I have displayed 4 rows of a table (gids) from phpmyadmin. Now I have added for each row a button, I want to redirect each button to an external page (book.php). Now when I use the classname "data" in javascript to try to redirect to book.php, this doesn't work for all 4 buttons.
What should I change so these buttons work for each row?
<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>
var btn is an array so you need to read as an array.
Try this:
var btn = document.getElementsByClassName('data');
for(var item in btn){
btn[item].addEventListener('click', function() {
document.location.href = 'book.php';
});
}
If I correctly understood your code, the result will be four rows, and each have a button at the end, right?
Because there is your problem: all buttons have the same ID: id="dat"
You can avoid this by creating a new variable to count the rows, then append the variable's value to each buttons ID, thus creating "dat1", "dat2", etc.
Modify this part:
// 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>';
}
Into this:
// 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
}
Try this
var btn = document.getElementById('data');
also change your button to
id='data'
and in function
window.location.href = 'book.php'; // here also try to give full url
Try this instead:
var btn = document.getElementById('dat');
btn.addEventListener('click', function() {
document.location.href = 'book.php';
});
UPDATE Based on your comments:
1 - You'll need to build a form, example:
<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 - After the user clicks the submit button, you'll need to get the POST values on book.php, example:
voornaam IS <?php echo $_POST["voornaam"]; ?><br>
You don't need javascript for this, just simple html and php on backend.