1

I am new to Jquery and my Question is can i delay the click on the submit button for example, you cannot click the submit button for 1 second after submitting so I can prevent the Click spamming on the submit button

this is my Click event

$("#btnConfirmEditNo").click(function (e) {
        e.preventDefault();
        $('#editContactForm').validationEngine('hide');
        editwnd.close();
    });

also tried the settimeout() but it delays the closing of the window

1
  • 4
    Explore the cool jQuery methods .one(), .on() and .off() Commented Nov 24, 2014 at 3:16

3 Answers 3

3

This example may help you:

Using On - Off

function handleClick(evt) {
     $( "#btn" ).prop( "disabled", true );
     setTimeout(function() {
       $( "#btn" ).prop( "disabled", false );
       $('#btn').on('click', handleClick);       
     }, 1000);
     $( this ).off( event );     
}

$('#btn').on('click', handleClick);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Click Me</button>

Using One

function handleClick(evt) {
     $( "#btn" ).prop( "disabled", true );
     setTimeout(function() {
       $( "#btn" ).prop( "disabled", false );
       $('#btn').one('click', handleClick);       
     }, 1000);     
}

$('#btn').one('click', handleClick);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Click Me</button>

Sign up to request clarification or add additional context in comments.

Comments

0

You can register a callback function on a button and subsequently remove that callback using the jquery off method. This means that when the submit button is pressed, you can remove the event handler and then set a timer that will subsequently re-add it after a period of time when the timer fires. You can use the window.setTimer() function to register a function to be called after a period of time.

An alternate algorithm would be to have a class level "flag" that is set when the button is clicked and reset when a timer expires. In your handler for a button press, you would check the value of the flag and, if true, ignore the button press.

Comments

0

Basically setTimeout is used to handle the 1s off state.
Here are two examples:

Using .one()

var $btn = $('#btnConfirmEditNo');

function doSomething() {

  // Do here whatever you want

  setTimeout(function(){
    $btn.one("click", doSomething);
  }, 1000);
}

$btn.one("click", doSomething);

Using a flag

function doSomething() {
  var el = this;
  if(el.noClick) return;
  el.noClick = 1;

  // Do here whatever you want

  setTimeout(function() { el.noClick = 0; }, 1000);
}

$('#btnConfirmEditNo').click(doSomething);

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.