php 行，每行都有一个我想重定向到外部页面的按钮

Question

我已经显示了来自 phpmyadmin 的 table (gids) 的 4 行。现在我为每一行添加了一个按钮，我想将每个按钮重定向到外部页面 (book.php)。现在，当我在 javascript 中使用类名 "data" 尝试重定向到 book.php 时，这对所有 4 个按钮都不起作用。
我应该更改什么以使这些按钮适用于每一行？

        <div class="row">

    <?php 

    if(isset($_SESSION['FBID'])){


    // Create connection
    $conn = new mysqli("localhost", "root", "root", "phpproject");
    // Check connection
    if ($conn->connect_error) {
         die("Connection failed: " . $conn->connect_error);
    }

    $sql = "SELECT gids_voornaam, gids_naam, gids_bio, gids_richting, gids_jaar, gids_stad FROM gids";
    $result = $conn->query($sql);

if ($result->num_rows > 0) {
     // output data of each row
     while($row = $result->fetch_assoc()) {
         echo 
'<div class="col-sm-4">'.
            "<br>".'<img class="img-rounded img-responsive" src="http://placehold.it/150">'.
            "<br>"."voornaam: ".$row["gids_voornaam"].
            "<br>". "Achternaam: ". $row["gids_naam"].
            "<br>". "Richting: ". $row["gids_richting"].
            "<br>". "Jaar: ". $row["gids_jaar"].
            "<br>". "Biografie:  " . $row["gids_bio"]. 
            "<br>"."<br>".'<button type="submit" class="data" >boekingsdata</button>'.
'</div>';



     }
} else {
     echo "0 results";
}

$conn->close();
}


     ?>
         </div>



  <script>


var btn = document.getElementsByClassName('data');
btn.addEventListener('click', function() {
  document.location.href = 'book.php';
});


  </script>

Answer 1

如果我正确理解了你的代码，结果将是四行，每行末尾都有一个按钮，对吧？

因为有你的问题：所有的按钮都有相同的ID：id="dat"

您可以通过创建一个新变量来计算行数来避免这种情况，然后将变量的值附加到每个按钮 ID，从而创建 "dat1"、"dat2" 等。

修改这部分：

// output data of each row
 while($row = $result->fetch_assoc()) {
     echo 
'<div class="col-sm-4">'.
        "<br>".'<img class="img-rounded img-responsive" src="http://placehold.it/150">'.
        "<br>"."voornaam: ".$row["gids_voornaam"].
        "<br>". "Achternaam: ". $row["gids_naam"].
        "<br>". "Richting: ". $row["gids_richting"].
        "<br>". "Jaar: ". $row["gids_jaar"].
        "<br>". "Biografie:  " . $row["gids_bio"]. 
        "<br>"."<br>".'<button type="submit" id="dat" class="data" >boekingsdata</button>'.
'</div>';



 }

进入这个：

// output data of each row
 $counter = 1; //new variable
 while($row = $result->fetch_assoc()) {
     echo 
'<div class="col-sm-4">'.
        "<br>".'<img class="img-rounded img-responsive" src="http://placehold.it/150">'.
        "<br>"."voornaam: ".$row["gids_voornaam"].
        "<br>". "Achternaam: ". $row["gids_naam"].
        "<br>". "Richting: ". $row["gids_richting"].
        "<br>". "Jaar: ". $row["gids_jaar"].
        "<br>". "Biografie:  " . $row["gids_bio"]. 
        "<br>"."<br>".'<button type="submit" id="dat' . $counter . '" class="data" >boekingsdata</button>'.
'</div>';
$counter++; //increment it with every row


 }

Answer 2

试试这个

var btn = document.getElementById('data');

也将您的按钮更改为

id='data'

并在函数中

window.location.href = 'book.php'; // here also try to give full url

Answer 3

试试这个：

var btn = document.getElementById('dat');
btn.addEventListener('click', function() {
  document.location.href = 'book.php';
});

更新根据您的意见：

1 - 您需要构建一个 form，示例：

<html>
<body>

<form action="book.php" method="post">
voornaam: <input type="text" name="voornaam" value="<?php echo $row["gids_voornaam"]?>"><?php echo $row["gids_voornaam"]?><br>
etc..
<input type="submit">
</form>

</body>
</html>

2 - 用户点击提交按钮后，您需要获取 book.php 上的 POST 值，示例：

voornaam IS <?php echo $_POST["voornaam"]; ?><br>

你不需要 javascript，只需要 html 和 backend 上的 php。

Answer 4

var btn 是一个 array 所以你需要读取一个数组。

试试这个：

var btn = document.getElementsByClassName('data');

for(var item in btn){
    btn[item].addEventListener('click', function() {
        document.location.href = 'book.php';
    });
}

php 行，每行都有一个我想重定向到外部页面的按钮

php rows with each row having a button that I want redirect to external page

javascript

php

redirect

rows