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>

Left Div（first_div）包含发票数据，右侧Div（second_div）用于显示其他信息或更新，如显示客户信息或是否是新客户，创建新客户数据。

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

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

2 个答案:

答案 0 :(得分：9)

答案 1 :(得分：5)

Answer 1

我希望左侧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＆＃39; $.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();   
        });
});

Answer 2

给每个表单一个标识符（name，id，class等...）然后用jquery和serialize定位它们，例如：

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

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

2 个答案: