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

Question

I am using smarty templete engine and on the below page I have a form if I disabled my submit button then values of form not submited on the same page if i not disabled then resubmitting problem arise how to resolve this

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();    
          
      }
  }
?>

I want to know:-
IF the data process on the same page and if submit button pressed very quickly multiple times how to prevent user not to click multiple time on the submit button
I redirected the user using (header:location) on the same page but before that user click so many times
IF there any jquery or php solution ?

example using jquery to only allow single click, and disable after the one click - http://stackoverflow.com/a/11621701/689579 — Sean, Dec 08 '14 at 04:40
If you are using HTML5 then you can disable the submit button to prevent multiple clicks by using $(this).attr('disabled', true); on the click event. — Rivnat, Dec 08 '14 at 04:41
if I do oneClick disabled then how to Validate other fields ? — Rammehar Sharma, Dec 08 '14 at 06:35

score 1 · Answer 1 · answered Dec 08 '14 at 04:41

1

You can disable you submit button after click:

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

answered Dec 08 '14 at 04:41

Alex

1,073
9
20

First of all, in this line "$('#submit).prop('disabled', true);" (almost the rest of the js part) you missed closing single quote. And why are you comparing fields values with string 'null' but not with null or '' (empty string)? and I would put "$('#submit).prop('disabled', true);" before submit form line (actually I don't think you need to submit it manually: if you don't return false it will get submitted anyway). – Alex Dec 08 '14 at 09:50
my problem is that if I click so many times very quickly the values inserted again and again but if i disabled submit button the form values not submitted because i use the same php page for processing. what should I do ? – Rammehar Sharma Dec 08 '14 at 12:10
Sorry, I don't get it. If you need to prevent second click handler you probably you have to return false always after single click. Would be better if you provided the whole working code scope and gave more details. – Alex Dec 09 '14 at 07:37
Sir, I have done it. I insert a field on the fly to the form with the same name of the submit button. – Rammehar Sharma Dec 09 '14 at 15:21

Dave · Answer 2 · 2014-12-08T05:07:17.027

0

Disable submit button on click. jsfiddle

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

edited Dec 08 '14 at 05:07

answered Dec 08 '14 at 04:42

Dave

4,376
3
24
37

my problem is that if I click so many times very quickly the values inserted again and again but if i disabled submit button the form values not submitted because i use the same php page for processing. what should I do ? – Rammehar Sharma Dec 08 '14 at 12:10

score 0 · Answer 3 · answered Dec 08 '14 at 04:46

You can disable by two ways ,

Either by onclick function :

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

or

Returning false after it's been disabled to prevent the user from spamming:

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

Example of JSFiddle: http://jsfiddle.net/zb8CZ/

Credit doesn't goes to me.

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

0

I prefer to add a 2nd submit handler, which prevents additional submits.

but

this is simple:

$("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);
    });
});

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 08 '14 at 04:50

Todd

5,314
3
28
45

my problem is that if I click so many times very quickly the values inserted again and again but if i disabled submit button the form values not submitted because i use the same php page for processing. what should I do ? validate is necessary. – Rammehar Sharma Dec 08 '14 at 12:27
there was a syntax error, $('#submit').prop('disabled', true); check http://jsfiddle.net/aaxf3nfd/1/ – Dave Dec 08 '14 at 12:36
@Dave thanks for looking out. Note that `:submit` is also valid. http://api.jquery.com/submit-selector/ – Todd Dec 08 '14 at 12:40

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

4 Answers4

but