Ajax form submit wont post form field value from while loop

Question

I am trying to submit a form which is being displayed with images from my db in a while loop. Im using ajax so it will not refresh the page and loose my place, I have a form that updates the datetime in the db when submitted but when the form submits it only shows the most recent id from the while loop..

Here is the getFeed.php

//Display feed with form
$sql = "SELECT * FROM images ORDER BY id desc";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo '<div id="mainCont">';
while($row = $result->fetch_assoc()) {
    $path = $row['path'];
    $user = $row['user'];
    $id = $row['id'];

    echo '<img id="pic" src="/mobile/uploads/'.$path.'"/>';
    echo '<div id="userCont">';
    echo '<div id="user">@'.$user.'</div>';
    echo '<div id="com"><img src="../img/com.png"/>0</div>';
    echo '<form method="post" data-ajax="false">';
    echo '<input name="id" data-ajax="false" id="id" type="text" value="'.$id.'" />';
    echo '<input type="image" style="height:35px;top:4px;" id="bump" src="../img/bump.png" id="searchForm" onclick="SubmitForm();" value="Send" />';
    echo ' </form>';


    echo '</div>';
    }
echo '</div>';

Here is the ajax call in index.php

<script type="text/javascript">
//Calling Feed
repeatAjax();
function repeatAjax(){
  $.ajax({    
    type: "GET",
    url: "getFeed.php",             
    dataType: "html",                  
    success: function(response){                    
        $("#response").html(response); 

        },
    });
};

//Submit Form
function SubmitForm() {
    event.preventDefault();
    var name = $('#id').val();
    console.log(name);
    $.post("bump.php", {name: name},
    function(data) {

    });
}
</script>

I have 3 post in the database that have id's of 100,101,102. when the form is submitted log only displays 102 no matter which post form was submitted..

Answer 1

You can use

echo '<input name="id" data-ajax="false" id="field_'.$id.'" type="text" value="'.$id.'" />';
echo '<input type="image" style="height:35px;top:4px;" id="bump" src="../img/bump.png" id="searchForm" onclick="SubmitForm('.$id.');" value="Send" />';

and for submission

//Submit Form
function SubmitForm(id) {
    event.preventDefault();
    var name = $('#field_'+id).val();
    console.log(name);
    // your code
}

Answer 2

U应该给ur输入字段类，并通过其类名称而不是id调用特定字段

Answer 3

id is unique in HTML. You should use class instead of id .

For example:

HTML:

<input type="text" id="input0" class="id" name="id0" />
<input type="text" id="input1" class="id" name="id1" />

JS:

var name0 = $("#input0").val(); // by id
var name1 = $(".id")[1].val(); // by class