Submitting AJAx form with multiple inputs in a php loop
Question
I am trying to learn how to use Ajax to submit a form in a php loop. Can anybody see why the below code won't write to my database? If I take out the sname parts it works but only allows one column to be updated. Thanks in advance for your help
<!DOCTYPE html> <html> <head> <?php include 'dbconnection.php';?> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script> // Add the counter id as an argument, which we passed in the code above function chk(id) { // Append the counter id to the ID to get the correct input var name=document.getElementById('name' + id).value; var name=document.getElementById('sname' + id).value; var dataString='name='+ name + '&sname=' + sname; $.ajax({ type:"post", url: "dataInsert2.php", data:dataString, cache:false, success:function(phtml){ // Instead of using the class to set the message, use the ID, // otherwise all elements will get the text. Again, append the counter id. $('#msg' + id).html(phtml); } }); return false; } </script> </head> <body> <?php $query=mysqli_query($connect,"SELECT distinct first_name from people " ); // Initiate a counter variable $i = 1; while ($row=mysqli_fetch_array($query)) { ?> </br> <?php echo$row["first_name"]; ?> <form> <!-- Extra input added here Append the counter to the ID --> <input type="text" id="name<?= $i ?>"> <input type="text" id="sname<?= $i ?>"> <br/> <!-- Send just the current counter to your method --> <input type="submit" value="submit" onclick="return chk('<?= $i ?>')"> </form> <!-- Append the counter to the message ID --> <p id="msg<?= $i ?>" class="msg1"></p> <?php // Increment the counter $i++; } ?> </body> </html>
dataInsert2.php
<?php include 'dbconnection.php'; $notes = $_POST['name']; $class = $_POST['sname']; mysqli_query($connect, "INSERT INTO people(class, notes) VALUES ('$class','$notes')"); ?>
1 answers
solution1
2 ACCPTED 2017-06-12 09:48:07
Assuming your php loop is syntactically and grammatically correct,
The below function should be called whenever you click that Button.
function chk(id)
{
// Append the counter id to the ID to get the correct input
var name=document.getElementById('name' + id).value;
var name=document.getElementById('sname' + id).value;
var dataString='name='+ name + '&sname=' + sname;
$.ajax({
type:"post",
url: "dataInsert2.php",
data:dataString,
cache:false,
success:function(phtml){
// Instead of using the class to set the message, use the ID,
// otherwise all elements will get the text. Again, append the counter id.
$('#msg' + id).html(phtml);
}
});
return false;
}
In the third line, during variable declaration, you have variable name it should be sname according to your logic.
var sname=document.getElementById('sname' + id).value;
Since that variable will not be found in the 4th line(when you use it), It is facing an error. So your code after that line wont be executed.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.