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

我正在像下面这样一页一页地工作

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

顾客
名称
帐单

左侧Div（第一个Div）包含发票数据，右侧Div（第二个Div）用于显示其他信息或更新，如显示客户信息，或者如果是新客户，则创建新客户数据

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

---

我不知道的部分是“我是否要提交到一个页面（forms_customer.php），或者是否有办法将所有元素封装在第二个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：

首先，使用jQuery

在HTML中包括此行：

使用$.ajax（）异步发布。

$（this）.serialize（）

将在表单中发布所有输入，因此您可以在php代码中通过如下方式访问它们：

$yourField=$\u POST['yourField]；

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

因此，您已将数据发送回服务器，现在希望重新加载div以反映服务器端的更改，而无需执行完整的回发。我们可以使用jQuery的

$.load（）

：

让我们编写一个简单的函数来调用

$.load（）

：

我们可以将它放到前面的

$.ajax（）

函数中，以便在异步发回服务器后使用以下命令执行：

---

提供更多的代码。如果您没有更多的代码，请开始阅读javascript或php。您的问题是动态更新内容，因此您可以使用javascript和ajax（用于更新客户端的内容）或php（用于服务器端）。感谢您提供了非常好的教育性答案。但呼叫员回答得稍早一些。

$("#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
      ......
   }
});

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

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

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