How to handle multiple forms in one page

Question

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?

Provide more code. If you have no more code. Start reading javascript or php. Your problem is talking for dynamic updating content, so you can use javascript and ajax (for updating content on client side) or php (for server side) — GramThanos, Oct 07 '14 at 20:23

score 10 · Answer 1 · edited May 23 '17 at 11:46

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();   
        });
});

Thank you for your very well educational answer. but callmen answered it a bit earlier. — user1084885, Oct 07 '14 at 22:00

score 6 · Accepted Answer · answered Oct 07 '14 at 20:27

Give each form an identifier (name, id, class etc...) then target them with jquery and serialize e.g:

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

How to handle multiple forms in one page

2 Answers2

Linked