javascript - 自动保存包含多个项目的PHP表单并使用ajax保存在mysqli中

Question

我有一个带有多个选项卡的表单。每个选项卡都有各种项目(文本框、单选按钮、下拉框)。我需要在 15 秒空闲后保存内容，或者当用户单击提交按钮时，所有选项卡内容都将保存，并且在 mysqli 中不同的表可以存储信息。

如果有任何建议，请编写示例代码来保存不同表的信息

<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 有两个或更多选项卡，我如何使用不同的数据库存储所有信息

例如在 Material 估算 div 中我有 3 个选项卡 1. 行情 2. 购买 3. 使用方法

在报价选项卡中添加新行，然后单击添加另一行，就像没有限制一样，也像购买一样

报价数据可以存储报价表，购买数据可以存储购买表使用数据存储在使用表中

我如何仅对孔表单的单个提交按钮进行编辑并添加类似

如何才能做到这一点

如果可能，请编写代码片段并保存到数据库

我也曾使用过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 
}