如果页面数据在同一页面上处理,如何禁用提交按钮


How to Disabled Submit Button IF the Page Data Process on The Same Page?

我正在使用聪明的寺庙引擎,在下面的页面上我有一个表单,如果我禁用了我的提交按钮,那么如果我没有禁用,那么表单的值不会在同一页面上提交,然后出现重新提交问题如何解决这个问题

收藏.phpcollection.tpl

collection.js

$(document).ready(function(){
 $("#fee_collection_form").on('submit', function () {  
        var class_id = $('#class_id').val();
        var cs_id = $('#class_section_list').val();
        var student_registration_no = $('#student_list').val();
        var net_fee_value = $('#net_fee_value').val();
        var paid_amount = $('#paid_amount').val();
        var collection_date = $('#collection_date').val();
        var due_date = $('#due_date').val();
       
        if(class_id == 'null'){
            $('#error-msg').html('<div class="alert alert-danger"><a href="#" class="close" data-dismiss="alert">&times;</a><strong>Error</strong> Please Select Class</div>');
            $('#class_id').focus();
            return false;
        }
        else if(cs_id == 'null'){
            $('#error-msg').html('<div class="alert alert-danger"><a href="#" class="close" data-dismiss="alert">&times;</a><strong>Error</strong> Please Select Class Section</div>');
            $('#class_section_list').focus();
            return false;
        }
        else if(student_registration_no == 'null'){
            $('#error-msg').html('<div class="alert alert-danger"><a href="#" class="close" data-dismiss="alert">&times;</a><strong>Error</strong> Please Select Student</div>');
            $('#student_list').focus();
            return false;
        }
        else if(net_fee_value == ''){
            $('#error-msg').html('<div class="alert alert-danger"><a href="#" class="close" data-dismiss="alert">&times;</a><strong>Error</strong> Please Select Months</div>');
            $('#monthlist').focus();
            return false;
        }
        else if(paid_amount == ''){
            $('#error-msg').html('<div class="alert alert-danger"><a href="#" class="close" data-dismiss="alert">&times;</a><strong>Error</strong> Enter Paid Amount</div>');
            $('#paid_amount').focus();
            return false;
        }
        else if(collection_date == ''){
            $('#error-msg').html('<div class="alert alert-danger"><a href="#" class="close" data-dismiss="alert">&times;</a><strong>Error</strong> Enter Collection Date</div>');
            $('#collection_date').focus();
            return false;
        }
        else if(due_date == ''){
            $('#error-msg').html('<div class="alert alert-danger"><a href="#" class="close" data-dismiss="alert">&times;</a><strong>Error</strong> Enter Enter Due Date</div>');
            $('#due_date').focus();
            return false;
        }
        else{
                   $('#fee_collection_form').submit();
                   $('#submit).prop('disabled', true);
        }
    })  ;
});
{* student_admission.tpl *}
{load_presentation_object filename="fee_collection" assign="obj"}
<div class="form-coverup-div">
    {if $obj->mErrorMessage}<p class="error">{$obj->mErrorMessage}</p> {/if}
        <form id="fee_collection_form" name="fee_collection_form" class="form" method="post" action="{$obj->mLinkToFeeCollection}" autocomplete="off"  enctype="multipart/form-data" >
            <h3>Student Fee Collection Form</h3>
            <div id="error-msg"></div>
        <table>
        <tr>
        
        <fieldset>
        <legend>Search Student</legend>
      
                <td><span>Class Name</span>
                <select tabindex="1" id="class_id" name="class_id">
                    <option value="null">--Select Class --</option>
                    {foreach from=$obj->mClassList item=value}
                    {html_options values=$value.class_id output=$value.class_name}
                    {/foreach}
                </select>
                
                </td>
            <td><span>ClassSection &#09;<img style="display:none;" id="loader" src="{$obj->mSiteUrl}images/ajax-loader.gif"></span>
             <select tabindex="2" name="class_section_id" id="class_section_list">
                 <option value="null">--Select Section --</option>
              <!--populated using ajax-->
               </select>
                </td>
                <td><span>Student Name &#09;<img style="display:none;" id="loader2" src="{$obj->mSiteUrl}images/ajax-loader.gif"></span>
                <select tabindex="3" name="student_registration_no" id="student_list">
            <option value="null">--Select Student --</option>
             
              <!--populated using ajax-->
          </select>
                </td>
        </fieldset>
        </tr>
        <tr>
            <td><span>Mother Name</span><input value=""  type="text"  disabled="disabled" id="student_mother_name"/></td>  
            <td><span>Father Name</span><input value="" id = "student_father_name"type="text" disabled="disabled" /></td> 
            <td><span>Address</span><input value="" type="text" disabled="disabled" id="address"/></td>
        </tr>
        </table>
        <table style="width:100%;">
        <fieldset>
        <legend>Fee Status &#09;<img style="display:none;" id="loader3" src="{$obj->mSiteUrl}images/ajax-loader.gif">
</legend>
        
        <tr>
        <td>
        <div id="fee_structure" style="overflow:auto;float:left;width:70%; height:150px; border:1px solid #ddd;">
        Calculated Fee
        </div>
        <div style="overflow:auto;width:20%;float:left; height:150px; border:1px solid #ddd;">
           <div id="monthlist">
Months List
            
           </div>
            
        </div>
         <div>
        <!-- <input type="button" value="Ok" tabindex="4" id="buttonParent">-->
        </div>
        </td>
        </tr>
        </table>
        <table>
        <tr>
            <td><span>Previous Balance</span><input value="" placeholder="previous balance" type="text" readonly ="readonly" placeholder="" name="previous_balance" id="previous_balance"/></td> 
            <td><span>Discount[%]</span><input value="" tabindex="5" placeholder="in percentage" type="text"  placeholder="" name="discount_in_percentage" maxlength="5" id="discount_in_percentage"/></td>  
            <td><span>Paid Amount</span><input value="" tabindex="8" placeholder="paid amount" type="text"  placeholder="" name="paid_amount" id="paid_amount"/></td> 
        </tr>
        <tr>
        <td><span>Net Amount</span><input value="" type="text" readonly ="readonly" placeholder="fee value.." name="net_fee_value" id="net_fee_value"/></td>
        <td><span>Discount Amount</span><input value="" tabindex="6" placeholder="discount amount" type="text"  placeholder="" name="discount_amount" id="discount_amount"/></td> 
 
        <td><span>Balance</span><input value="" placeholder="balance amount" type="text"  placeholder="" readonly ="readonly" name="balance_amount" id="balance_amount"/></td>  
        </tr>
        </fieldset>
        <tr>
        <td><span>Payable Amount</span><input value="" placeholder="payable amount" type="text"  placeholder="" readonly ="readonly" name="amount_payable" id="amount_payable"/></td>
        <td><span>Remark</span><input tabindex="7" value="" type="text"  placeholder="Remark" name="remark" id="remark"/>  </td>
        </tr>
        </table>
        <table>
        <fieldset>
        <legend>Date Details</legend>
        <tr>
            <td><span>CollectionDate</span><input type="text" value="" tabindex="9" placeholder="collection date" name="collection_date" class="collection_date" id="collection_date"/></td>
            <td><span>DueDate</span><input type="text"  value=""  tabindex="10" placeholder="due date" name="due_date" class="due_date" id="due_date"/></td>
        </tr>
        </table>
        </br>
        <table>
        <tr>
            <td><button tabindex="11" name="submit" id="submit" type="submit" class="btn btn-primary">Make Transaction</button></td>
            <td><button type="reset" value="Reset" class="btn btn-default">Reset</button></td>
        </tr>
        </table>
      
        </form>
  
</div>
<!--THIS IS MY PHP CODE-->
<?php
  class FeeCollection{
      public $mErrorMessage;
      public $mLinkToFeeCollection;
      //get class for admission
      public $mClassList;
      
      
      
      public function __construct(){
          $this->mLinkToFeeCollection = Link::ToFeeCollection();
          
      }
      public function init(){
          //submit the form values
          if(isset($_POST['submit'])){
	     
	      $class_id = $_POST['class_id'];
              $class_section_id = $_POST['class_section_id'];
              $student_registration_no = $_POST['student_registration_no'];
              if(isset($_POST['months_list'])){
                $months = implode(', ',$_POST['months_list']);         
              }
              $net_amount = $_POST['net_fee_value'];
              $discount_amount = $_POST['discount_amount'];
              $remark = $_POST['remark'];
              $amount_payable = $_POST['amount_payable'];
              $paid_amount = $_POST['paid_amount'];
              $balance_amount = $_POST['balance_amount'];
              $academic_year_id = $_SESSION['academic_year']    ;
              $collection_date = $_POST['collection_date'];
              $due_date = $_POST['due_date'];
              if(empty($class_id) || $class_id =='null'){
                  $this->mErrorMessage = 'Please Select Class';
              }elseif(empty($class_section_id) || $class_section_id =='null'){
                  $this->mErrorMessage = 'Please Select Class Section';
              }elseif(empty($student_registration_no) || $student_registration_no == 'null'){
                  $this->mErrorMessage = 'Please Select Student';
              }elseif(empty($net_amount)){
                  $this->mErrorMessage = 'Please First Calculate Fee';
              }elseif(empty($paid_amount)){
                  $this->mErrorMessage = 'Please Enter Paid Amount';
              }elseif(empty($collection_date)){
                  $this->mErrorMessage = 'Please Enter Collection Date';
                  
              }elseif(empty($due_date)){
                  $this->mErrorMessage = 'Please Enter Due Date';
                                                                        
              }elseif($this->mErrorMessage == null){
                  SchoolErp::AddStudentFee($class_section_id,$student_registration_no,$months,$net_amount,$discount_amount,
                                            $remark,$amount_payable,$paid_amount,$balance_amount,$academic_year_id,
                                            $collection_date,$due_date);
                  header('Location: '.htmlspecialchars_decode($this->mLinkToFeeCollection));
              }
	      
	    
          }
          
         
          //get all classes for select drop down menu
          $this->mClassList = SchoolErp::ShowClassDetails();    
          
      }
  }
?>

  1. 我想知道:-
  2. 如果数据在同一页面上处理并且如果提交按钮按得非常快多次如何防止用户不多次点击提交按钮
  3. 我在同一页面上使用(标题:位置)重定向了用户,但在该用户单击这么多次之前
  4. 如果有任何jquery或php解决方案?

您可以在单击后禁用提交按钮:

$(document).on('click', '#submit', function(){
    $(this).prop('disabled', true);
});

您可以通过两种方式禁用,

通过点击功能:

document.getElementsByTagName("input")[1].onclick = function () {
    this.disabled = true;
};

禁用后返回 false 以防止用户发送垃圾邮件:

document.getElementById("f2").onsubmit = function() {   
    this.children[1].disabled = true;
    return false; // prevent form from actually posting (only for demo purposes)

JSFiddle 的示例:http://jsfiddle.net/zb8CZ/

功劳不归我所有。

单击时禁用提交按钮。 杰斯菲德尔

<input type="submit" onclick="this.disabled=true;this.value='Sending, please wait...';this.form.submit();" name="btnSubmit" id="btnSubmit" value="Submit" />

我更喜欢添加第二个提交处理程序,这可以防止其他提交。

这很简单:

$("form").submit(function(e) {
    e.preventDefault();
    $("#submit").prop('disabled', true);
    
    $.post( "ajax/test.html", yourData, function(data) {
       $( "body" ).html( data ); // or whatever; deal with your data
       // handle data as you normally would
    }).always(function() {
        $("#submit").prop('disabled', false);
    });
});