Автосохранение формы PHP с несколькими элементами и сохранение в MySQL с помощью AJAX

Question

У меня есть форма с несколькими вкладками.Каждая вкладка имеет различные элементы (текстовые поля, переключатели, раскрывающиеся списки).Мне нужно, чтобы содержимое сохранялось после 15 секунд простоя или когда пользователь нажимает кнопку «Отправить», все вкладки сохраняются, и в MySQL разные таблицы могут хранить информацию.

Если есть предложения, напишите пример кода для сохранения информации.с разными таблицами также

<form>
<div class="row">
  <div class="col-lg-12">
    <div class="card-box">
      <h4 class="header-title m-t-0 m-b-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="m-t-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 m-t-0 m-b-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="m-t-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 m-t-0 m-b-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="m-t-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="m-t-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>

здесь одна форма, у меня есть 3 элемента div, и в каждом элементе div есть две или более вкладок. Как сохранить всю информацию в разных базах данных

, например, вdiv оценки материала у меня есть 3 вкладки 1. Котировки 2. Покупка 3. Использование

на вкладках котировок добавить новые строки нажмите добавить еще одну строку, как нет ограничений, как и покупки также

цитаты данные могут хранитьтаблица котировок и данные о покупке могут хранить данные об использовании таблицы закупок в таблице использования

как у меня только для единственной кнопки отправки для формы отверстия и редактирования также добавить как

как можно сделатьэтот

, если возможно, пожалуйста, напишите фрагмент кода и сохраните его в db

Я также успешно работал с ajax-формой, поэтому, пожалуйста, если кто-нибудь сделает код, напишите нам спасибо,

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 
}