Question

I use it as a form for comment. There’re many of this class on the page, so i have to choose the closest form but it doesn’t work.

$(document).ready(function() {
$(".comment_but").on('click',function(){
    var location2 = $(this).closest('div');
    var datastring = $(this).closest('form').serialize();
        $.ajax({
        type: "POST",
        url: "comment_save.php",
        data:  datastring,
        cache   : false,
        success: function(html){
$('.comment_show',location2).html(html);}});});});

And my HTML

<div class="comment_show"></div>
<tr>
        <form onSubmit="return false;" name="comment_form" id="comment_form" style=" display:inline; ">
            <td align="right"><textarea name="comment_box" cols="70" rows="2"></textarea></td>
                        <td>
            <input name="post_id" type="hidden" value="<? echo($data['post_id']); ?>" />
            <input name="Send" class="comment_but" value="Comment!" type="submit" /></td>
        </form>
</tr>

Answer 1

Put the code in the onsubmit

$(document).ready(function() {
  $("#comment_form").on("submit",function(){
    var datastring=$(this).serialize();
    $.ajax({
      type: "POST",
      url: "comment_save.php",
      data:  datastring,
      cache   : false,
      success: function(html){
        $('.comment_show',location2).html(html);
      }
    });
    return false; // mandatory
  });
});