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..

Suman Singh · Accepted Answer · 2016-10-02 05:25:33Z

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
}

answered Oct 2, 2016 at 5:25

Suman Singh

1,37712 silver badges20 bronze badges

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

Comments

Hassan Tahir · Accepted Answer · 2016-10-02 05:11:39Z

0

U should give ur input fields class and call secific fields by their classs name not by id

answered Oct 2, 2016 at 5:11

Hassan Tahir

1329 bronze badges

2 Comments

Ryan D Over a year ago

say there are 100+ post, how could I program each input with its own unique class and call that class in ajax?

TimBrownlaw Over a year ago

Well easy, append an id on the end of the class OR why not just submit the actual id of the form which will match your items id. You need some way to get a handle on who called the submit and pass it in.

Stu Furlong · Accepted Answer · 2016-10-02 06:46:25Z

0

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

edited Oct 2, 2016 at 6:46

Stu Furlong

3,6576 gold badges37 silver badges50 bronze badges

answered Oct 2, 2016 at 5:24

Hsu Pu

839 bronze badges

Collectives™ on Stack Overflow

Ajax form submit wont post form field value from while loop

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related