How to AJAX more than one form on the same page

Question

I had a form that when I clicked on submit it was submitted. Then that form hid and the result of action page showed in div with classname= dig .

It was working correctly but when I added another forms it stopped working correctly and all of the forms submitted at the same time.

How can I change my code?:

 $(".done").click(function(e) { var url = 'http://seller.ir/test' $.ajax({ type: "POST", url: url, data: $(".formi").serialize(), success: function(data) { $('.dig').empty() $('.dig').html(data) } }); e.preventDefault(); }); 

 .dig { width: 200px; height: 30px; border: 1px solid #000 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="dig"> <form class="formi"> <button class="done">done</button> </form> </div> <div class="dig"> <form class="formi"> <button class="done">done</button> </form> </div> <div class="dig"> <form class="formi"> <button class="done">done</button> </form> </div> 

Answer 1

$(".done").click(function(e) {
   var dig=$(this).parents('.dig');
  var url = 'http://seller.ir/test'
  $.ajax({
    type: "POST",
    url: url,
    data: $(this).parent('.formi').serialize(),
    success: function(data) {
      $(dig).empty()

      $(dig).html(data)
    }
  });
  e.preventDefault();
});

Answer 2

you should empty and fill the corresponding dig element only as

$(".done").click(function(e) {
   var url = 'http://seller.ir/test';
   var digElement=$(this).parents('.dig');
   $.ajax({
      type: "POST",
      url: url,
      data: $(this).parent('.formi').serialize(),
      success: function(data) {
          digElement.html(data)
      }
   });
   e.preventDefault();
});

Answer 3

Try with form submit and $(that).closest('.dig').empty() to find the .dig .In this snippet is not working .Snippet blocked some ajax function call

change the button as type="submit"

Note create the ajax function is separate and call with new ajax like constructor .Its not disturbing on going ajax

 $(document).ready(function(){ $("form").on('submit',function(e) { var url = 'http://seller.ir/test'; new ajax($(this)) e.preventDefault(); }); }) function ajax(that){ $.ajax({ type: "POST", url: url, data: $(that).serialize(), success: function(data) { $(that).closest('.dig').empty() }, error:function(jqXHR, textStatus, errorThrown){ console.log(textStatus) } }); } 

 .dig { width: 200px; height: 30px; border: 1px solid #000 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="dig"> <form class="formi"> <button class="done" type="submit">done</button> </form> </div> <div class="dig"> <form class="formi"> <button class="done" type="submit">done</button> </form> </div> <div class="dig"> <form class="formi"> <button class="done" type="submit">done</button> </form> </div> 

Answer 4

 $(".done").click(function(e) { var url = 'http://seller.ir/test' $.ajax({ type: "POST", url: url, data: $(this).parents("form").serialize(), success: function(data) { $(this).parents("dig").empty() $(this).parents("dig").html(data) } }); e.preventDefault(); }); 

 .dig { width: 200px; height: 30px; border: 1px solid #000 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="dig"> <form class="formi"> <button class="done">done</button> </form> </div> <div class="dig"> <form class="formi"> <button class="done">done</button> </form> </div> <div class="dig"> <form class="formi"> <button class="done">done</button> </form> </div> 

Try This!And send update if it doesn't work.