我应该如何分别寄送我的表格？ [英] How should I send my forms separately?

问题描述

我写吹码，当我点击每个表格提交按钮时，我会发送我的表格。
我的问题是，如何分别发送每个表单并分别指示每个结果，因为当我的代码运行时，所有表单都将同时提交。
这里是我的代码：

$（＃done ）.click（function（e）{var url ='secondpage.htm'$。ajax（{type：POST，url：url，data：$（＃done）。serialize（），success：function数据）{$（'。divs'）。empty（）$（。divs）。html（data）}}）; e.preventDefault（）;}）;

form {width：100px;边框：1px纯蓝色;高度：50像素; }

 < script src =https：// ajax .googleapis.com / ajax / libs / jquery / 1.10.1 / jquery.min.js>< / script>< div class =divs>< form>< button id =done >完成< / button>< / form>< / div>< div class =divs>< form>< button id =done> done< / button>< / form> ;< / div>< div class =divs>< form>< button id =done> done< / button>< / form>< / div>在您的实际代码中有许多问题。

，我们可以从中指出：



• 为多个元素赋予相同的 id 你可以使用 class 代替。


• 使用 $（＃done）。serialize ）你只是用 id =done序列化第一个元素，而不是任何 form 。


• 您正在覆盖 .divs 中的字词nt所以从 $（'。divs'）。和 $（。divs）。html（数据），您最好使用特定元素来显示响应并使用 .text（）方法填充内容。
>


我尝试重构代码，以便按照您的方式工作，这里是您将需要的内容：

  $（。done）。click（function（e）{
 var url ='secondpage.htm'; $ b $ .ajax（{
 type：POST，
 url：url，
 data：$（this）.closest（'form'）。serialize（），
成功：函数（数据）{
 // $（'。divs'）。empty（）您将在这里清除您的表单
 $（this）.closest（'。preview'）。文本（数据）
} 
}）; 
 e.preventDefault（）; 
}）; 
  

演示：

$（。done）。click（function（e）{var url ='secondpage.htm '; $ .ajax（{type：POST，url：url，data：$（this）.closest（'form'）。serialize（），success：function（data）{//$('.divs' ）.empty（）您将在这里擦除您的表单$（this）.closest（'。preview'）。text（data）}}）; e.preventDefault（）;}）;

form {width：100px;边框：1px纯蓝色; height：50px;}

< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js>< / script>< div class =divs> <形式> < button class =完成>完成< / button> < /形式> < div class =preview>< / div>< / div>< div class =divs> <形式> < button class =完成>完成< / button> < /形式> < div class =preview>< / div>< / div>< div class =divs> <形式> < button class =完成>完成< / button> < /形式> < div class =preview>< / div>< / div>

注意：

• 我使用了 code> class而不是 id ，并将它引用
$（'。done'）在JS代码中。

• 我使用 $（this）.closest（'form'）。serialize（）来分别序列化适当的表单点击按钮。


• 我添加了一个带有 class =preview code>在每个表单中保存显示的响应，并在其中填充 $（this）.closest（'。preview'）.text（data） JS代码。

• 通过使用 $（this）.closest（），我们只能处理包含点击按钮的表单。



I write the blow codes and I would send my forms when I click on each forms submit button. my question is how can I send each forms separately and indicate each result separately .because when my codes run all of the forms will submit at the same time. here is my codes:

$("#done").click(function(e) { 
var url = 'secondpage.htm'
$.ajax({ type: "POST", url: url, data: $("#done").serialize(),
 success: function(data) { 
$('.divs').empty()

$(".divs").html(data)

  } }); e.preventDefault();
 }); 

form{
	width:100px;
	border:1px solid blue;
	height:50px;
	}
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="divs">
<form>
<button id="done">done</button>
</form>
</div>
<div class="divs">
<form>
<button id="done">done</button>
</form>
</div>
<div class="divs">
<form>
<button id="done">done</button>
</form>
</div>

解决方案

You have many problems in your actual code, from which we can state:

• Giving the same id for multiple elements in the page, you can use class instead.
• With $("#done").serialize() you are only serializing the first element with id="done" and not any form.
• You are overriding the .divs content so deleting your forms from the page with $('.divs').empty() and $(".divs").html(data), you better use a specific element to show the response and use .text() method to fill it with the content.

I tried to refactor your code so it works the way you want, here's what you will need:

$(".done").click(function(e) {
  var url = 'secondpage.htm';
  $.ajax({
    type: "POST",
    url: url,
    data: $(this).closest('form').serialize(),
    success: function(data) {
      //$('.divs').empty() You will erase your form here
      $(this).closest('.preview').text(data)
    }
  });
  e.preventDefault();
});

Demo:

$(".done").click(function(e) {
  var url = 'secondpage.htm';
  $.ajax({
    type: "POST",
    url: url,
    data: $(this).closest('form').serialize(),
    success: function(data) {
      //$('.divs').empty() You will erase your form here
      $(this).closest('.preview').text(data)
    }
  });
  e.preventDefault();
});

form {
  width: 100px;
  border: 1px solid blue;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="divs">
  <form>
    <button class="done">done</button>
  </form>
  <div class="preview"></div>
</div>
<div class="divs">
  <form>
    <button class="done">done</button>
  </form>
  <div class="preview"></div>
</div>
<div class="divs">
  <form>
    <button class="done">done</button>
  </form>
  <div class="preview"></div>
</div>

Note:

• I used a done class instead of id, and referred it with $('.done') in JS code.
• I used $(this).closest('form').serialize() to respectively serialize the appropriate form when clicking on the button.
• I added a div with class="preview" in each form to hold the displayed response, and filled it with $(this).closest('.preview').text(data) in the JS code.
• By using $(this).closest() we are sure to handle only the form containing the clicked button.

这篇关于我应该如何分别寄送我的表格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！