Question

I want to add a comment system after my article,

php part code

<?php
...
while($result = mysql_fetch_array($resultset))
{
$article_title = $result['article_title'];
...
?>
<form id="postform" class="postform">
<input type="hidden" name="title" id="title" value="<?=$article_title;?>" />
<input type="text" name="content" id="content" />
<input type="button" value="Submit" class="Submit" />
</form>
...
<?php
}
?>

ajax part:

$(function($) {
$(document).ready(function(){
$(".Submit").click(function(){
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
var anyBlank = 0;
if(anyBlank == "0")
{
var title    = $("#title").val();
var content   = $("#content").val();
$.ajax({
type: "POST",
url: "ajax_post.php",
data: "title="+title+"&content="+content,
success: function(date_added){
if(date_added != 0)
{
structure = '<div class="comment_date_added">'+date_added+'</div><div id="comment_text"><div id="comment_content">'+content+'</div>';                   
$("#post_comment").prepend(structure);
}
});
});

ajax_post.php

echo $title;
echo $content;//get $title and $content and insert into database.

my question: <form id="postform" class="postform"> is written into a MYSQL_QUERY result circle. how to modify ajax part so that every div.submit can post its own value to ajax_post.php and then return the data into $("#post_comment").prepend(structure); Thanks to all.

Answer 1

You have to give the input fields a class instead of an ID. IDs have to be unique in an HTML document:

<form class="postform">
    <input type="hidden" name="title" class="title" value="<?=$article_title;?>" />
    <input type="text" name="content" class="content" />
    <input type="button" value="Submit" class="Submit" />
</form>

Then you can make the data lookup relative to the clicked element:

var title = $(this).siblings('.title').val();
var content = $(this).siblings('.content').val();

I also suggest to pass an object to the data attribute for automatic URL encoding of the values:

data: {title: title, content: content}

Then, when you create a new entry for the #post_comment section, you have to give these elements also a class instead of an ID (and don’t forget to use var!):

var structure = '<div class="comment_date_added">'+date_added+'</div><div class="comment_text"><div class="comment_content">'+content+'</div>';

or more jQuery like:

$('<div />', {class:'comment_data_added'})
.append($('<div />', {class: 'comment_date_added', text: date_added}))
.append($('<div />', {class: 'comment_content', text: content}))
.prependTo('#post_comment');

Further notes:

• You have somehow a nested ready() handler:

  $(function($) {                     //   <--┐
      $(document).ready(function(){   //   <--┴- this is the same
          //...
      });
  });
  

  Either do:

  jQuery.noConflict();
  jQuery(function($) {
      $('.Submit')...
  )};
  

  or

  $(function() {
      $('.Submit')...
  )};
  

• This part in the click handler:

  var id = $(this).attr("id");
  var name = $(this).attr("name");
  var dataString = 'id='+ id ;
  var parent = $(this);
  var anyBlank = 0;
  

  does not seem to do anything. Besides that, the submit button has no ID and no name.

• Depending on the further structure of your PHP code, you should have a look at the alternative syntax for control structures. It makes easier to mix PHP and HTML without fiddling around with brackets.