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

我正在像下面这样工作

<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方法？

---

为每个表单提供一个标识符（名称，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
      ......
   }
});

---

我想在提交右侧客户表格时创建左侧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()会将所有输入发布到表单中，所以你可以在你的php代码中访问它们，例如： $yourField = $_POST['yourField];

使用$ .load（）动态重新加载数据

所以，您已经将数据发送回服务器，现在您希望重新加载您的div以反映服务器端更改，而不进行完整回发。 我们可以用jQuery的$.load()来做到这一点：

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

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

我们可以将它放到较早的$.ajax()函数中，以便在异步POST之后使用延迟对象返回到服务器：

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

链接地址: http://www.djcxy.com/p/55297.html

上一篇: How to handle multiple forms in one page

下一篇: Why can I pass an instance method to multiprocessing.Process, but not a multiprocessing.Pool?