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 worki

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

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 3

$(".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.

Answer 4

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();
});