使用相应的提交按钮对多个表单进行jQuery验证

时间:2016-12-08 11:47:20

标签: jquery html

我有一个页面,其中有多个表单,例如form_1,form_2..etc&每个表单都包含相应的提交按钮,例如submit_1,submit_2..etc。

每个表单都有带复选框的记录,以便选择所有复选框功能进行特定操作。

我想检查jquery验证,当我点击form_1中的提交按钮,即submit_1时,它应检查用户是否至少选中了该特定表单的复选框。

HTML CODE:

<form class="form-group purchase_gift clearfix" name="giftRefund_113" id="giftRefund_113" action="" method="post">
   <div class="table-responsive">
      <table class="table table-bordered marginbottom0">
         <tr>
            <th class="text-center"><input type="checkbox" id="selectall" class="selectall" value="113" /></th>
            <th class="text-center border-top-0">Sr. No.</th>
            <th class="text-center border-top-0">Gift Code</th>
            <th class="text-right border-top-0">Price (BD)</th>
            <th class="text-center border-top-0">Status</th>
         </tr>
         <tr>
            <td class="text-center">
               <input type="checkbox" class="gift" name="giftCodeId[]" id="giftCodeId_667" value="667"/>
            </td>
            <td class="text-center border-top-0">1</td>
            <td class="text-center">56644DEDCF</td>
            <td class="text-right">250.000</td>
            <td class="text-center">
               Not used <a href="javascript:;">Refund</a>
            </td>
         </tr>
         <tr>
            <td class="text-center">
               <input type="checkbox" class="gift" name="giftCodeId[]" id="giftCodeId_668" value="668"/>
            </td>
            <td class="text-center border-top-0">2</td>
            <td class="text-center">F448DAB6EE</td>
            <td class="text-right">250.000</td>
            <td class="text-center">
               Not used <a href="javascript:;">Refund</a>
            </td>
         </tr>
         <tr>
            <td class="text-center">
               <input type="checkbox" class="gift" name="giftCodeId[]" id="giftCodeId_669" value="669"/>
            </td>
            <td class="text-center border-top-0">3</td>
            <td class="text-center">D76C086174</td>
            <td class="text-right">25.000</td>
            <td class="text-center">
               Not used <a href="javascript:;">Refund</a>
            </td>
         </tr>
         <tr>
            <td class="text-right" colspan="3"><b>Total</b></td>
            <td class="text-right"><b>525.000</b></td>
         </tr>
      </table>
   </div>
   <div class="row">
      <div class="col-md-3">
         <div class="form-group marginbottom0 refund">
            <select class="form-control" name="action" id="action">
               <option value="">Select</option>
               <option value="refund">Refund</option>
            </select>
         </div>
      </div>
      <div class="col-md-2">
         <input type="submit" name="giftRefundSubmit_113" id="giftRefundSubmit_113" class="btn btn-success" value="Go"/>
         <div id="errormsg" class="error"></div>
      </div>
   </div>
</form>

1 个答案:

答案 0 :(得分:-1)

到目前为止,我了解您的问题,您只想在表单提交之前调用ajax。所以view this link可以帮到你。

<form onsubmit="return beforeSubmit();" class="form-group purchase_gift clearfix" name="giftRefund_113" id="giftRefund_113" action="" method="post">
     <div class="table-responsive">
        <table class="table table-bordered marginbottom0">
           <tr>
              <th class="text-center">
                <input type="checkbox" id="selectall" class="selectall" value="113" /></th>
              <th class="text-center border-top-0">Sr. No.</th>
              <th class="text-center border-top-0">Gift Code</th>
              <th class="text-right border-top-0">Price (BD)</th>
              <th class="text-center border-top-0">Status</th>
           </tr>
           <tr>
              <td class="text-center">
                 <input type="checkbox" class="gift" name="giftCodeId[]" id="giftCodeId_667" value="667"/>
              </td>
              <td class="text-center border-top-0">1</td>
              <td class="text-center">56644DEDCF</td>
              <td class="text-right">250.000</td>
              <td class="text-center">
                 Not used <a href="javascript:;">Refund</a>
              </td>
           </tr>
           <tr>
              <td class="text-center">
                 <input type="checkbox" class="gift" name="giftCodeId[]" id="giftCodeId_668" value="668"/>
              </td>
              <td class="text-center border-top-0">2</td>
              <td class="text-center">F448DAB6EE</td>
              <td class="text-right">250.000</td>
              <td class="text-center">
                 Not used <a href="javascript:;">Refund</a>
              </td>
           </tr>
           <tr>
              <td class="text-center">
                 <input type="checkbox" class="gift" name="giftCodeId[]" id="giftCodeId_669" value="669"/>
              </td>
              <td class="text-center border-top-0">3</td>
              <td class="text-center">D76C086174</td>
              <td class="text-right">25.000</td>
              <td class="text-center">
                 Not used <a href="javascript:;">Refund</a>
              </td>
           </tr>
           <tr>
              <td class="text-right" colspan="3"><b>Total</b></td>
              <td class="text-right"><b>525.000</b></td>
           </tr>
        </table>
     </div>
     <div class="row">
        <div class="col-md-3">
           <div class="form-group marginbottom0 refund">
              <select class="form-control" name="action" id="action">
                 <option value="">Select</option>
                 <option value="refund">Refund</option>
              </select>
           </div>
        </div>
        <div class="col-md-2">
           <input type="submit"  class="btn btn-success" value="Go"/>
        </div>
     </div>
  </form>
  <script>
  function beforeSubmit(){

  var l = document.getElementById("giftCodeId_669").checked;
                  alert(l);
  return false;
  }
  </script>
  </p>