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')");
			
	?>

pro_cheats · Accepted Answer · 2017-06-12 09:56:42Z

2

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.

edited Jun 12, 2017 at 9:56

answered Jun 12, 2017 at 9:48

pro_cheats

1,5921 gold badge16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bevan7 Over a year ago

Thank you so much for spotting that. Works perfectly now.

Collectives™ on Stack Overflow

Submitting AJAx form with multiple inputs in a php loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related