Clever Geek Handbook

How to handle multiple forms on one page

I am working on one page as 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>

The left Div (first_div) contains the account data and the right side of the Div (second_div) for displaying additional information or updating, such as displaying customer information or new customer, creating new customer data.

What I want to do is when you submit new client information, I want the left side of the div to stay the same when submitting the form with the right client and after the client log is created, update the client list (dropped out) on the left side of the div (count- texture)

The part I don't know is "am I posting to the page (forms_customer.php) or is there a way to wrap all the items in a second_div and submit them using jquery, perhaps using the post method?"

+3


source to share


2 answers


Give each form an id (name, id, class, etc.), then specify them with jquery and serialize like:



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


source


I want the left side of the div to remain unchanged when the form is submitted with the right client and after the client log is created, update the client list (dropped out) on the left side of the div (invoice)

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

First of all, use jQuery

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

POST asynchronously with $ .ajax ()

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

$(this).serialize()

will POST all inputs on the form, so you can access them in your php codebase something like this: $yourField = $_POST['yourField];



Load data dynamically with $ .load ()

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

:

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

:

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

We can send it to the previous function $.ajax()

, which will be executed after the async POST returns to the server with the deferred object :

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


source






More articles:


All Articles