Autosave PHP form with multiple items and save in mysqli with ajax

Question

I have a form with multiple tabs. Each tab has various items (textboxes, radio buttons, drop down boxes). I need the content to be saved after 15 seconds idle or when the user clicks on submit button all tabs content will save and in mysqli different tables can store information.

If any suggestions please write sample code for save the information with different tables also

 <form> <div class="row"> <div class="col-lg-12"> <div class="card-box"> <h4 class="header-title mt-0 mb-30">Material Management</h4> <ul class="nav nav-tabs"> <li class="nav-item"> <a href="#quote" data-toggle="tab" aria-expanded="true" class="nav-link active"> Quotes </a> </li> <li class="nav-item"> <a href="#purchase" data-toggle="tab" aria-expanded="false" class="nav-link"> Purchases </a> </li> <li class="nav-item"> <a href="#usage" data-toggle="tab" aria-expanded="false" class="nav-link"> Usage </a> </li> </ul> <div class="tab-content"> <div class="tab-pane fade show active" id="quote"> <i class="mdi mdi-plus"><button type="button" class='addmore'>Add More</button></i> <form id='students' method='post' name='students'> <table border="1" cellspacing="0" class="table-responsive"> <tr> <th><input class='check_all' type='checkbox' onclick="select_all()" /></th> <th>S.No</th> <th>Q.No</th> <th>Item Name</th> <th>Categories</th> <th>Brand</th> <th>Qty</th> <th>Rate</th> <th>Amount</th> <th>Quote Pic</th> <th>Others</th> </tr> <tr> <td><input type='checkbox' class='case' /></td> <td><span id='snum'>1</span></td> <td><span id='qnum'>1</span></td> <td><input type='text' id='item_name' name='item_name[]' /></td> <td><input type='text' id='categories' name='categories[]' /></td> <td><input type='text' id='brand' name='brand[]' /></td> <td width="10%"><input type='text' id='qty' name='qty[]' /> </td> <td width="10%"><input type='text' id='rate' name='rate[]' /></td> <td width="10%"><input type='text' id='amount' name='amount[]' /> </td> <td width="10%"><input type='text' id='qpic' name='qpic[]' /> </td> <td width="10%"><input type='text' id='others' name='others[]' /> </td> </tr> </table> <button type="button" class='delete'>- Delete</button> <p> </div> <!--Quotes Div Close--> <div class="tab-pane fade" id="purchase"> <div class="row"> <div class="col-md-1"> <div class="form-group"> <label for="field-4" class="control-label">S.No</label> <input type="text" class="form-control" id="field-4" placeholder="1"> </div> </div> <div class="col-md-1"> <div class="form-group"> <label for="field-4" class="control-label">Q.No</label> <input type="text" class="form-control" id="field-4" placeholder="1"> </div> </div> <div class="col-md-1"> <div class="form-group"> <label for="field-4" class="control-label">Itemname</label> <input type="text" class="form-control" id="field-4" placeholder="Boston"> </div> </div> <div class="col-md-2"> <div class="form-group"> <label for="field-5" class="control-label">Categories</label> <input type="text" class="form-control" id="field-5" placeholder="categories"> </div> </div> <div class="col-md-1"> <div class="form-group"> <label for="field-6" class="control-label">Brand</label> <input type="text" name="country" id="autocomplete-ajax" class="form-control" autocomplete="off"> </div> </div> <div class="col-md-1"> <div class="form-group"> <label for="field-4" class="control-label">Qty</label> <input type="text" class="form-control" id="field-4" placeholder="1"> </div> </div> <div class="col-md-1"> <div class="form-group"> <label for="field-5" class="control-label">Rate</label> <input type="text" class="form-control" id="field-5" placeholder="1234.00"> </div> </div> <div class="col-md-2"> <div class="form-group"> <label for="field-6" class="control-label">Amount</label> <input type="text" class="form-control" id="field-6" placeholder="123456"> </div> </div> <div class="col-md-1"> <div class="form-group"> <label for="field-6" class="control-label">Inv. Pic</label> <input type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary"> </div> </div> <div class="col-md-1"> <div class="form-group"> <label for="field-6" class="control-label">Others</label> <input type="text" class="form-control" id="field-6" placeholder="123456"> </div> </div> </div> <!-- row--> </div> <!-- Purchase Div Close--> <div class="tab-pane fade" id="usage"> <div class="row"> <!-- Inline Form --> <div class="col-md-12"> <div class="card-box"> <h4 class="mt-0 header-title"></h4> <div class="row"> <div class="col-md-1"> <div class="form-group"> <label for="field-4" class="control-label">S. No. </label> <input type="text" class="form-control" id="field-4" placeholder="1"> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="field-5" class="control-label">Item Name </label> <input type="text" class="form-control" id="field-5" placeholder="Item Name"> </div> </div> <div class="col-md-1"> <div class="form-group"> <label for="field-6" class="control-label">Qty</label> <input type="text" class="form-control" id="field-4" placeholder="1"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="field-6" class="control-label">Usage For </label> <textarea class="form-control" rows="5"></textarea> </div> </div> </div> <!--row--> </div> <!--end card box--> </div> <!--end col-md-12--> </div> <!-- end row / End Inline form--> </div> <!-- Usage Div--> </div> <!-- Tab Content--> </div> <!-- Close card-box --> </div> <!--col-lg-12--> </div> <div class="row"> <div class="col-lg-12"> <div class="card-box"> <h4 class="header-title mt-0 mb-30">Labour Management</h4> <ul class="nav nav-tabs"> <li class="nav-item"> <a href="#inhouse" data-toggle="tab" aria-expanded="true" class="nav-link active"> In House </a> </li> <!-- <li class="nav-item"> <a href="#scontract" data-toggle="tab" aria-expanded="false" class="nav-link"> Sub Contract </a> </li> --> </ul> <div class="tab-content"> <div class="tab-pane fade show active" id="inhouse"> <!-- Inline Form --> <div class="row"> <div class="col-md-12"> <div class="card-box"> <h4 class="mt-0 header-title"><i class="mdi mdi-plus"></i></h4> <div class="row"> <div class="col-md-3"> <div class="form-group"> <label for="field-4" class="control-label">Category Of Labour</label> <input type="text" class="form-control" id="field-4" placeholder="Mastrey"> &nbsp;&nbsp; </div> </div> <div class="col-md-3"> <div class="form-group"> <label for="field-4" class="control-label">No.Of. Workers</label> <input type="text" class="form-control" id="field-4" placeholder="1"> </div> </div> <div class="col-md-3"> <div class="form-group"> <label for="field-4" class="control-label">Per Head Amount</label> <input type="text" class="form-control" id="field-4" placeholder="Boston"> </div> </div> <div class="col-md-3"> <div class="form-group"> <label for="field-4" class="control-label">Total Amount</label> <input type="text" class="form-control" id="field-4" placeholder="Boston"> </div> </div> </div><!--row close--> </div><!--card box close--> </div><!--div md 12 close--> </div><!-- end row / End Inline form--> </div><!--in house tab close--> </div><!--tab content--> </div><!-- Close card-box --> </div> <!--col-lg-12--> </div> <div class="row"> <div class="col-lg-12"> <div class="card-box"> <h4 class="header-title mt-0 mb-30">Work In Progress</h4> <ul class="nav nav-tabs"> <li class="nav-item"> <a href="#winhouse" data-toggle="tab" aria-expanded="true" class="nav-link active"> In House </a> </li> <li class="nav-item"> <a href="#wsubcontract" data-toggle="tab" aria-expanded="false" class="nav-link"> Sub Contract </a> </li> </ul> <div class="tab-content"> <div class="tab-pane fade show active" id="winhouse"> <!-- Inline Form --> <div class="row"> <div class="col-md-12"> <div class="card-box"> <h4 class="mt-0 header-title"><i class="mdi mdi-plus"></i></h4> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="field-6" class="control-label">Usage For </label> <textarea class="form-control" rows="5"></textarea> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="field-6" class="control-label">Inv. Pic</label> <input type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary"> </div> </div> </div> </div> </div> </div> <!-- end row / End Inline form--> </div><!--winhouse close--> <div class="tab-pane fade" id="wsubcontract"> <!-- Inline Form --> <div class="row"> <div class="col-md-12"> <div class="card-box"> <h4 class="mt-0 header-title"><i class="mdi mdi-plus"></i></h4> <div class="row"> <div class="col-md-5"> <div class="form-group"> <label for="field-6" class="control-label">Notes </label> <textarea class="form-control" rows="5"></textarea> </div> </div> <div class="col-md-3"> <div class="form-group"> <label for="field-6" class="control-label">Upload Pics</label> <input type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary"> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="field-4" class="control-label">No.Of. Workers</label> <input type="text" class="form-control" id="field-4" placeholder="1"> </div> </div> </div> </div> </div> </div> <!-- end row / End Inline form--> </div><!--wsubconant--> </div><!--tab content--> </div> <!-- Close card-box --> </div> <!--col-lg-12--> </div> </form> 

here single form i have 3 divs and each div i have two or more tabs how can i store the all information with different databases

for example in material estimation div i have 3 tabs 1. Quotes 2. Purchase 3. Usage

in quotes tabs add new rows click add another row like no restrictions is there like purchases also

quotes data can store quotes table and purchase data can store purchase table usage data store in usage table

how i have only for single submit button for hole form and edit also add like

how is it is possible to make that one

if possible please write a code snippet and save to db

i have worked also ajax form not successfully so please if any one make code write for us thank u

Answer 1

you can write in form action page look like this and also each and every field you can assign the name/id first then write form action page 


if example i have taken one item 

if(!empty($catlabours)) {
                         //your code 
}