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

时间：2014-12-08 04:32:41

标签： php jquery

我正在使用smarty模板引擎，在下面的页面上我有一个表单，如果我禁用了我的提交按钮，那么如果我没有禁用，那么表单的值不会在同一页面上提交，那么重新提交问题就会出现如何解决这个问题< / strong>

collection.php collection.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解决方案？

4 个答案:

答案 0 :(得分：1)

点击后，您可以禁用提交按钮：

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

答案 1 :(得分：0)

点击后禁用提交按钮。 jsfiddle 

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

答案 2 :(得分：0)

您可以通过两种方式禁用

通过onclick功能：

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/

信用不属于我。

答案 3 :(得分：0)

我更喜欢添加第二个提交处理程序，这会阻止其他提交。

但

这很简单：

$("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);
    });
});
相关问题
最新问题