CODEWITHSUNDEEP
phpjqueryajax
bevan7
bevan7

Reputation: 63

Submitting AJAx form with multiple inputs in a php loop

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

Upvotes: 1

Views: 932

Answers (1)

pro_cheats
pro_cheats

Reputation: 1582

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.

Upvotes: 2

Related Questions