How to handle multiple forms in one page

I am working one a page like the below

<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) contains Invoice Data and Right side Div(second_div) is for displaying additional info or update like displaying a customer info or if it's a new customer, create a new customer data.

What I want to do is when submitting a new customer info, 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)

The part I don't know is " do I submit to a page(forms_customer.php) or is there a way to wrap all elements in second_div and send them with jquery maybe with post method?

---

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

---

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)

Based on your description, it sounds like you want to asynchronously POST data, then reload the containing div without performing a full postback:

First off, use jQuery

Include this line in your HTML: <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Asynchronously POST with $.ajax()

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

The $(this).serialize() will POST all inputs in the form, so you can access them in your php code-behind with something like this: $yourField = $_POST['yourField];

Dynamically re-load data with $.load()

So, you've sent your data back to the server and now you want to reload your div to reflect server-side changes without doing a full postback. We can do this with jQuery's $.load() :

Let's write a simple function to call $.load() :

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

We can throw it onto earlier $.ajax() function to execute after the async POST back to the server with a deferred object:

$('#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/55298.html

上一篇: 强制代码在另一个方法完成执行后执行

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