Delaying the Submit button click using Jquery - javascript

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

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>

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.

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);

Related

Jquery delay after click, to allow different choice

I've added a snippet of code with what I am wanting to achieve in the comments.
There are 9 buttons and I need the data-id value of a button that is clicked but the user may click a button, and then quickly decide they want to click a different button, so I would want the value of the last button they click.
$( '#add-shot a.btn' ).on( 'click', function(e) {
e.preventDefault();
// delay for 1500
// if no other button is clicked, then simply use $( this ).data('id');
// else,
// if other button is clicked, don't use original data-id but use the new data-id
var id = $( this ).data('id');
// run the rest of the code
});
You can use a global timer with setTimeout(). On each click simply clear the timeout, if none of them are clicked within 1.5 seconds then the anonymous function will be called and get the appropriate id:
var timer;
$( 'button' ).on( 'click', function(e) {
e.preventDefault();
var self = this;
clearTimeout(timer); // Reset the timer.
timer = setTimeout(function(){ // Call this function if the timer
var id = $( self ).data('id'); // did not reset within 1.5 seconds.
alert(id);
}, 1500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button data-id="foo">
foo
</button>
<button data-id="bar">
bar
</button>
<button data-id="biz">
biz
</button>

Jquery .one() function doesn't prevent multi click event during form input

I have a code like that:
$(document).ready(function() {
$("#some-items").one("click", ".comment-form-gonder input", function(e) {
e.preventDefault();
$("body").css("cursor", "wait");
//this part inserts user comment to the written comments below with animation.
...
The problem is when I double click send button, comment are inserted twice. How can I prevent this?
Try removing preventDefault(); and
disable the button to be sure by
$(this).attr('disabled', 'disabled');
var n = 0
$( "div" ).one( "click", function() {
n++;
if (n % 2 == 0){
$(this).text('Foo');
}else{
$(this).text('Bar');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Foo</div>
Calling e.preventDefault(); within .one() handler, makes the form not able to prevent default behavior after the first type of one('event') is executed. After that, the same event will submit the form as supposed to.
Prevent default form submission using on() and do the rest stuff with one() :
$(document).ready(function(){
$('.comment-form-gonder input[type="submit"]')
.on('click', function(e) {
e.preventDefault();
})
.one('click', function() {
// This part executes only on first click:
$("body").css("cursor", "wait");
// rest of your code...
});
});
JSFiddle
You could also disable the submit input after first click, but in some cases may be desired to keep it 'clickable' (f.ex to inform the user that he cannot submit the form twice). To do so, you could store click state in data attribute of the input and use that state later on:
$(".comment-form-gonder input[type='submit']").on("click", function(e) {
e.preventDefault();
if($(this).data('clicked') == 'clicked'){
return alert('already submitted!');
}
// This part executes only on first click:
$(this).data('clicked', 'clicked');
$("body").css("cursor", "wait");
// rest of your code...
});
JSFiddle

How to disable functionality that takes place after a click event using jQuery

I have a button on my page which, when clicked, listens for another button being clicked and then performs an AJAX call. For example:
$( 'button#a' ).click( function() {
$( 'button#b' ).click( function() {
// Perform an AJAX call here.
});
});
Here is a demo of my code so far:
DEMO
I want to disable the ajax call functionality if a third button button#c is clicked at any time during the time that the page is loaded. I'm at a loss at how this can be done. Hoping someone can suggest an approach.
Should not code click event inside click, but after modifying in your code.
var third_click= false;
$(document).ready(function() {
$( 'button#c' ).click( function() {
third_click = true;
})
$( 'button#a' ).click( function() {
$( 'button#b' ).click( function() {
if( !third_click ) {
// Perform an AJAX call here.
alert( 'ajax call in progress' );
} else {
alert( 'Can\'t call ajax' );
}
});
});
})
here is demo.
What if you used button a to hide button b until a is clicked and then show button b and so fourth until your results are displayed as you with.
example:
$('.btnB').hide();
$('.btnA').on('click', function() {
$('.btnB').toggle();
});
Unless it needs to all display at one time this method wouldn't be able to work in that type of situation
You can just remove the click events from #a and b# when clicking on #c with:
$('#c').click(function () {
$('#a,#b').off('click')
})
jsFiddle example

jquery how to stop settimeout from looping

I want after my page loads to do a trigger click once and only once.
many posts swear that settimeout only fires once, but in my case it is infinite!
here is one of my many trials.
$( document ).ready(function() {
setTimeout(function() {
$("#btn1").trigger('click');
},1000);
});
I have tried moving that into a function outside the document.ready and then add cleartimeout, but then it stops from firing at all:
$( document ).ready(function() {
test();
});
function test() {
var t = setTimeout(function() {
$("#btn1").first().trigger('click');
},1000);
clearTimeout(t);
}
What am I doing wrong!?
use clearTimeout() inside the setTimeout().It clears the timeout after triggering the click
$(document).ready(function() {
test();
});
function test() {
var t = setTimeout(function() {
$("#btn1").trigger('click');
clearTimeout(t);
}, 1000);
}
$("#btn1").on('click',function(){
console.log("Clicked");
});
Fiddle: http://jsfiddle.net/6G4pR/
use e.stopPropagation(), this might be because of event bubbling.
HTML
<button id="btn1">my button</button>
JS
$( document ).ready(function() {
setTimeout(function() {
$("#btn1").trigger('click');
},1000);
$("#btn1").click(function(e){
console.log('clicked');
e.stopPropagation();
console.log(e);
})
});
CODE

Disable click on an element during animation

I want to prevent clicking on an element, while it performs some animations and then enable it later. I have tried to use unbind and then bind, but clicking remains permanently disabled.
Is there any other way to do it?
$("something").on("click", function() {
$("selected").unbind("click");
$("selected").animate({...}, function() {
$("selected").unbind("click");
});
basically, i don't want someone to click on the selected div while the animation is in progress, as clicking on it will start another set of animations which i don't want to start in between.
Try this, using a flag variable to store the info if the animation is happening:
var animating = false;
$("something").on("click", function () {
animating = true;
$("selected").animate({...
}, 1000, function () {
animating = false;
});
});
$("selected").click(function(){
if (animating) return false;
});
Use on and off this way you can "bind" the function foo to a click event on a particular element, switch it off and on again, as many times as you like. Have fun ;-)
DEMO: http://jsfiddle.net/4yBbb/2/
var foo = function() {
// Code to handle some kind of event
};
// ... Now foo will be called when paragraphs are clicked ...
$( "p" ).on( "click", foo );
// ... Foo will no longer be called.
$( "p" ).off( "click", foo );
edit: updated answer, my example used delegation and this was not necessary.
applied to your example it would look like this:
$("something").on("click", function() {
$("selected").off( "click", foo );
$("selected").animate({...}, function() {
$("selected").on( "click", foo );
});
clicking remains permanently disabled.
Because when never bind the "click" again to $("something"). Try:
$("something").on("click", function animate() {
var _this = $(this);
_this.off("click");
$("selected").animate({...}, function() {
_this.on("click",animate);
});
Here I use named function to make it easy to refer to the function again.
How about adding a check in your click function to perform the animation only when the clicked element is not animating?
$("something").on("click", function() {
$("selected").animate({...});
});
$("selected").on("click",function(){
if(!$(this).is("selected:animated")){
//Start other animation
}
});
Demo fiddle
Use .on() & .off() event of jquery. here is the example Jquery API
you need to do somthing like as follows:
function flash() {
// do your stuff here
}
$("something").on("click", function() {
$( "body" ).off( "click", "Your Div Selector", flash );
});
$("something").on("click", function() {
$( "body" ).on( "click", "Your Div Selector", flash );
});

Categories

Resources