javascript - 如何在一个页面中处理多个表单

Question

我正在处理一个页面，如下所示

<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>

左侧 Div(first_div) 包含发票数据，右侧 Div(second_div) 用于显示附加信息或更新，例如显示客户信息，或者如果是新客户，则创建新客户数据。

我想做的是在提交新客户信息时，我希望在提交右侧客户表单时左侧 div 保持不变，并在完成创建客户日志后，更新左侧 div 中的客户列表(下拉) (发票)

我不知道的部分是“我是提交到页面 (forms_customer.php) 还是有办法将所有元素包装在 second_div 中并使用 jquery 或 post 方法发送它们？

Answer 1

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)

根据您的描述，听起来您想异步 POST 数据，然后重新加载包含的 div，而不执行完整的回发:

首先，使用 jQuery

在您的 HTML 中包含此行:<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

使用 $.ajax() 异步 POST

$('#yourForm').submit(function(event) {
    event.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'php/yourPHPScript.php',
            data: $(this).serialize(),
            dataType: 'json'
        });
});

$(this).serialize()将在表单中发布所有输入，因此您可以在您的 php 代码隐藏中使用如下内容访问它们:$yourField = $_POST['yourField];

使用 $.load() 动态重新加载数据

因此，您已将数据发送回服务器，现在您想要重新加载您的 div 以反射(reflect)服务器端的更改，而无需执行完整的回发。我们可以使用 jQuery 的 $.load() 来做到这一点:

让我们写一个简单的函数来调用$.load() :

function reloadDiv(){
    $('#divToReload').load('scriptWithThisDivContent.php');
}

我们可以把它扔到更早的$.ajax()异步 POST 返回服务器后执行的函数 deferred object :

$('#yourForm').submit(function(event) {
    event.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'php/yourPHPScript.php',
            data: $(this).serialize(),
            dataType: 'json'
        }).done(function() {
           reloadDiv();   
        });
});