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

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

给每个表单一个标识符（名称、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
      ......
   }
});

Answer 2

我希望左侧 div 在提交右侧客户表单时保持不变，并在创建客户日志后，更新左侧 div（发票）中的客户列表（下拉）

根据您的描述，听起来您想异步 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() 将 POST 表单中的所有输入，因此您可以在 php 代码隐藏中访问它们，如下所示：$yourField = $_POST['yourField];

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

因此，您已将数据发送回服务器，现在您想重新加载 div 以反映服务器端的更改，而无需进行完整的回发。我们可以使用 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();   
        });
});