2014-12-08 53 views
0

我使用Smarty的templete引擎及以下頁面上我有一個表格,如果我停用了提交按鈕,然後,如果我沒有被禁用,然後重新提交問題不是submited在同一頁上形式的值出現如何解決這個如何禁用提交按鈕如果頁面數據進程在同一頁面上?

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'])){ 
 
\t  
 
\t  $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)); 
 

 
       } 
 
\t  
 
\t  
 
      } 
 
      
 
      
 
      //get all classes for select drop down menu 
 
      $this->mClassList = SchoolErp::ShowClassDetails();  
 
      
 
     } 
 
    } 
 
?>

  1. 我想知道: -
  2. 如果同一頁面上,如果提交按鈕的數據處理壓很快多次如何防止用戶不點擊多個時間提交按鈕
  3. 我重定向用戶使用(標題:位置)在同一頁面上,但在用戶點擊這麼多次之前
  4. 如果有任何jQuery或PHP解決方案?
+0

例如使用jQuery只允許單一的點擊,並禁用點擊後 - http://stackoverflow.com/a/11621701/689579 – Sean 2014-12-08 04:40:14

+0

如果你正在使用HTML5,那麼你可以通過使用$(this).attr('disabled',true)來禁用提交按鈕以防止多次點擊。點擊事件。 – Rivnat 2014-12-08 04:41:47

+0

你能澄清你的意思是3號? – Todd 2014-12-08 04:52:37

回答

1

您可以禁用後點擊提交按鈕:

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

我有我的原始代碼你可以做一些幫助 – 2014-12-08 07:26:33

+0

首先,在這一行「$('#submit).prop('disabled',true);」 (幾乎是js的其餘部分),你錯過了結束單引號。爲什麼你將字段值與字符串'null'進行比較,而不是使用null或''(空字符串)?我會把「$('#submit).prop('disabled',true);」在提交表單行之前(實際上我不認爲你需要手動提交它:如果你沒有返回false,它將會被提交)。 – Alex 2014-12-08 09:50:23

+0

我的問題是,如果我很快點擊這麼多次插入值一次又一次,但如果我禁用提交按鈕的表單值沒有提交,因爲我使用相同的PHP頁面進行處理。我該怎麼辦 ? – 2014-12-08 12:10:26

0

禁用提交上單擊按鈕。 jsfiddle

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

我的問題是,如果我點擊很多次,很快插入的值一次又一次,但如果我禁用提交按鈕的表單值未提交,因爲我使用相同的PHP頁面進行處理。我該怎麼辦 ? – 2014-12-08 12:10:53

0

您可以通過兩種方式禁用,

無論是通過的onclick功能:

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

返回虛假它被禁用,以防止用戶從垃圾郵件後:

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/

信用卡不會發給我。

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); 
    }); 
}); 
+0

我的問題是,如果我非常快速地點擊這麼多次的值插入一次又一次,但如果我禁用提交按鈕的表單值未提交,因爲我使用相同的PHP頁面進行處理。我該怎麼辦 ?驗證是必要的。 – 2014-12-08 12:27:33

+0

有一個語法錯誤,$('#submit')。prop('disabled',true);檢查http://jsfiddle.net/aaxf3nfd/1/ – Dave 2014-12-08 12:36:28

+0

@Dave感謝您的關注。請注意':submit'也是有效的。 http://api.jquery.com/submit-selector/ – Todd 2014-12-08 12:40:43

相關問題