This question already has an answer here:
I'm trying to create a php page that displays some data from a mysql table and that gives the option to add a date and time (to follow up some elements of that list later) and save that into another table to be displayed on top of that php page.
I'm trying to do all of this without reloading the page (so I'm using ajax with jquery/javascript).
Thing is, when I click the button to send data, it's not working... I tried a lot of different ways but without any success... Can anyone here help me please?
Note: I don't think it has anything to do with quotes or double quotes in my sql request...
Here is the code in my index.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<title>Ajax Tests</title>
</head>
<body>
<div class="container-fluid">
<!-- Afficher suivi billets -->
<h2>Billets avec suivi activé</h2>
<table class="table table-striped">
<thead>
<tr>
<th>Billet</th>
<th>Technicien</th>
<th>Date suivi</th>
<th>Heure suivi</th>
</tr>
</thead>
<tbody>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "suiviBillets";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Erreur de connexion: " . mysqli_connect_error());
}
$sql = "SELECT billet, technicien, date, heure FROM suiviBillets";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
echo "<tr><td>" . $row["billet"]. "</td><td>"
. $row["technicien"]. "</td><td>"
. $row["date"]. "</td><td>"
. $row["heure"]. "</td></tr>";
}
} else {
echo "Aucun résultat";
}
mysqli_close($conn);
?>
<tbody>
</table>
<!-- Afficher Billets -->
<h2>Tous les billets</h2>
<table class="table table-striped">
<thead>
<tr>
<th>Billet</th>
<th>Client</th>
<th>Technicien</th>
<th>Date suivi</th>
<th>Heure suivi</th>
<th>Suivre</th>
</tr>
</thead>
<tbody>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "suiviBillets";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Erreur de connexion: " . mysqli_connect_error());
}
$sql = "SELECT billet, nomClient, technicien FROM billets";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
echo "<tr><td><input type=\"hidden\" name=\"billet".$row["billet"]."\" id=\"billet".$row["billet"]."\" value=\"".$row["billet"]."\">" . $row["billet"]. "</td><td>"
. $row["nomClient"]. "</td><td><input type=\"hidden\" value=\"".$row["technicien"]."\">"
. $row["technicien"].
"</td><td><input type=\"text\" name=\"date".$row["billet"]."\" id=\"date".$row["billet"]."\"></td>
<td><input type=\"text\" name=\"heure".$row["billet"]."\" id=\"heure".$row["billet"]."\"></td>
<td><button type=\"button\" class=\"btn btn-success btn-block\" name=\"insert-data".$row["billet"]."\" id=\"insert-data".$row["billet"]."\">Suivre</button></td><p class=\"message\"></p></tr>";
}
} else {
echo "Aucun résultat";
}
mysqli_close($conn);
?>
<tbody>
</table>
</div>
<!-- Script pour envoi donnée via ajax -->
<script type="text/javascript">
$(document).ready(function(){
$("#insert-data<?php echo $row["billet"]; ?>").click(function(){
var billet=$("#billet<?php echo $row["billet"]; ?>").val();
var technicien=$("technicien<?php echo $row["billet"]; ?>").val();
var date=$("#date<?php echo $row["billet"]; ?>").val();
var heure=$("#heure<?php echo $row["billet"]; ?>").val();
// AJAX code to send data to php file.
$.ajax({
method: "POST",
url: "insert-data.php",
data: {billet:billet,technicien:technicien,date:date,heure:heure},
dataType: "JSON",
success: function(data) {
$(".message").html(data);
$("p").addClass("alert alert-success");
},
error: function(err) {
alert(err);
}
});
});
});
</script>
</body>
</html>
And here is the php page where data is processed (insert-data.php):
<?php
$conn = new mysqli('localhost', 'root', '', 'suiviBillets');
$billet=$_POST['billet'];
$technicien=$_POST['technicien'];
$date=$_POST['date'];
$heure=$_POST['heure'];
$sql="INSERT INTO 'suiviBillets' ('billet', 'technicien', 'date', 'heure') VALUES ('$billet', '$technicien', '$date', '$heure')";
if ($conn->query($sql) === TRUE) {
echo "data inserted";
}
else
{
echo "failed";
}
?>
Thanks in advance for your help!
</div>