CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
user1084885
user1084885

Reputation: 77

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?

Upvotes: 3

Views: 27541

Answers (2)

zacran
zacran

Reputation: 865

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

Upvotes: 10

Callem Pittard
Callem Pittard

Reputation: 174

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

Upvotes: 6

Related Questions