Javascript 如何在一页中处理多个表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26244496/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to handle multiple forms in one page
提问by user1084885
I am working one a page like the below
我正在处理一个页面，如下所示
<div id="first_div">
<form name='invoice_edit' id='invoice_edit' action='forms_invoice.php' method='post'>
<table border="0">
<tr>
<td id=customers_title_td >Customer</td>
<td id=customers_td > <!-- php code for customer list //-->
</td>
</tr>
</table>
<input type="submit" value="get" />
</form>
</div>
<div id="second_div">
<form name='customers_edit' id='customers_edit' action='forms_customer.php' method='post'>
<table>
<tr>
<td >Name</td>
<td ><input name="customers_name" type="text" value="" id="customers_name"></td>
</tr>
<tr>
<td >Bill To</td>
<td ><input name="customers_billto_addr" type="text" value="" id="customers_billto_addr"></td>
</table>
<input type="button" onClick="goCustomerUpdate('I');" value=" Create " name="Insert" />
</form>
</div>
Left Div(first_div) contains Invoice Data and Right side Div(second_div) is for displaying additional info or update like displaying a customer info or if it's a new customer, create a new customer data.
左侧 Div(first_div) 包含发票数据，右侧 Div(second_div) 用于显示附加信息或更新，例如显示客户信息，或者如果是新客户，则创建新客户数据。
What I want to do is when submitting a new customer info, i want to the left side div stay unchanged while submitting right side customer form and after done creating customer log, update customer list(drop down) in the left side div(invoice)
我想要做的是在提交新客户信息时，我希望左侧 div 保持不变，同时提交右侧客户表单，完成创建客户日志后，更新左侧 div（发票）中的客户列表（下拉）
The part I don't know is " do I submit to a page(forms_customer.php) or is there a way to wrap all elements in second_div and send them with jquery maybe with post method?
我不知道的部分是“我是否提交到页面（forms_customer.php），或者有没有办法将所有元素包装在 second_div 中并使用 jquery 发送它们，也许使用 post 方法？
回答by zacran
I want to the left side div stay unchanged while submitting right side customer form and after done creating customer log, update customer list(drop down) in the left side div(invoice)
我希望左侧div保持不变，同时提交右侧客户表单，完成创建客户日志后，更新左侧div（发票）中的客户列表（下拉）
Based on your description, it sounds like you want to asynchronously POST data, then reload the containing div without performing a full postback:
根据您的描述，听起来您想要异步 POST 数据，然后重新加载包含的 div 而不执行完整的回发：
First off, use jQuery
首先，使用jQuery
Include this line in your HTML: <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
在您的 HTML 中包含此行： <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Asynchronously POST with $.ajax()
使用 $.ajax() 异步 POST
$('#yourForm').submit(function(event) {
event.preventDefault();
$.ajax({
type: 'POST',
url: 'php/yourPHPScript.php',
data: $(this).serialize(),
dataType: 'json'
});
});
The $(this).serialize()will POST all inputs in the form, so you can access them in your php code-behind with something like this: $yourField = $_POST['yourField];
在$(this).serialize()将发布所有的输入形式，这样你就可以在你的PHP代码隐藏有这样的访问它们：$yourField = $_POST['yourField];
Dynamically re-load data with $.load()
使用 $.load() 动态重新加载数据
So, you've sent your data back to the server and now you want to reload your div to reflect server-side changes without doing a full postback. We can do this with jQuery's $.load():
因此，您已将数据发送回服务器，现在您想重新加载 div 以反映服务器端的更改，而无需进行完整的回发。我们可以用 jQuery 来做到这一点$.load()：
Let's write a simple function to call $.load():
让我们编写一个简单的函数来调用$.load()：
function reloadDiv(){
$('#divToReload').load('scriptWithThisDivContent.php');
}
We can throw it onto earlier $.ajax()function to execute after the async POST back to the server with a deferred object:
我们可以将它扔到更早的$.ajax()函数上，以便在异步 POST 返回到带有延迟对象的服务器后执行：
$('#yourForm').submit(function(event) {
event.preventDefault();
$.ajax({
type: 'POST',
url: 'php/yourPHPScript.php',
data: $(this).serialize(),
dataType: 'json'
}).done(function() {
reloadDiv();
});
});
回答by Callem Pittard
Give each form an identifier (name, id, class etc...) then target them with jquery and serialize e.g:
为每个表单提供一个标识符（名称、ID、类等），然后使用 jquery 将它们作为目标并进行序列化，例如：
$("#left-side-form").on("submit",function(e){
e.preventDefault();
var formData = $(this).serialize();
var action = $(this).attr("action");
$.ajax(action, formData, function(response){
//update select values in left side form here
......
}
});
