如何在同一页面上使用AJAX多个表单 [英] How to AJAX more than one form on the same page

问题描述

我有一个表单，当我单击提交"时，该表单已提交.然后隐藏该表格，并在div中以classname = dig显示操作页面的结果.

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.

如何更改我的代码?:

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

推荐答案

您应该清空并填充相应的dig元素，其格式为

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

这篇关于如何在同一页面上使用AJAX多个表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！