javascript - Using jquery to submit one form on page that shares element names with other forms -

to give basic view of question, i'm trying create page similar how facebook , twitter's dashboards , comment systems work. have 1 page continuously create form elements (posts) database rows in loop user scrolls down. users able comment on each of these posts. want able use ajax submit comments on each post individually without reloading page.

i run problem when try submit comment on form other first 1 loaded on page. in addition ajax posts first form elements on submit (due each form , elements having same name i'm guessing). below comment loading script: [forgive old php, know need update mysqli or pdo]

php

<?php ...  $query = mysql_query("select * `posts`"); while ($row = mysql_fetch_array($query)) {   echo "   <div name='comment_body'>   <form name='comment_form'>   <td>user: ".$row['user']."</td>   <td>post: ".$row['post']."</td>   <textarea name='comment'></textarea>   <p name='post_id' style='display:none;'>".$row['post_id']."</p>   <input type='submit' name='submit'>   </form>   "; $query2 = mysql_query("select * `comments` `post_id` = $row['post_id']"); while ($row2 = mysql_fetch_array($query2)) {   echo "   <td>user: ".$row2['user']."</td>   <td>comment: ".$row2['comment']."</td>   </div>   "; } ... ?> 

jscript

<script> $('.comment_form').on('submit', function (e) {   e.preventdefault();   $.ajax ({     type: 'post',     url: 'submit_comment.php',     data: {comment : $('#comment').val(), post_id : $('#post_id').text()}     success: function() {       $("#comment_body").load("load_comments.php #comment_body");     }   }); }); </script> 

the script works point because when comment on first post, works expected. can't seem figure out how target forms further down page individually. here's example:

the top post has post_id value of 40. if comment on post_id = 38, ajax submit empty comment field , post_id = 40 database.

any script form targeting great. if need rebuild php query give each echoed form element individual name, that's fine well. in advance!

the data you're trying send in ajax call using:

$('#comment').val(), post_id : $('#post_id').text() 

but html doesn't have id="comment" , id="post_id". (the '#' in selector means getelementbyid.) aren't sending data php page. need use correct selectors data. (see below)

get rid of 'form' tags don't need them. change

<input type="submit"> 

to a:

<input type="button" class="comment-submit"> 

then script can be:

<script> $('.comment-submit').on('click', function (e) {   e.preventdefault();   // referenct particular comment_body div   var $commentbody = $(this).closest('.comment_body');   // find textarea within particular comment_body   var commenttext = $commentbody.find('textarea[name="comment"]').val();   // find post_id paragraph within particular comment_body   var postid = $commentbody.find('p[name="post_id"]').text();    $.ajax ({     type: 'post',     url: 'submit_comment.php',     data: {comment : commenttext , post_id : postid}     success: function() {       $comment_body.load("load_comments.php #comment_body");     }   }); }); </script> 

frankly i'm not sure success function trying do. think need work on too. ajax call return data success function should have return value , used populate part of screen. jquery 'load()' function ajax call inside success callback of ajax call. don't think want or need this.