JavaScript Restrict User From Clicking Button Multiple Times - javascript

I am trying to restrict the user from clicking on a button multiple times. They can click on the button once when the page loads. If the page is reloaded the same should apply the user can click on the button only once.
I am using the following code however it doesn't seem to work for me
$("#doAccess").click(function() {
$("#doAccess").removeAttr('onclick');
DoSave();
});

Disable the button after it's been clicked
var accessBtn = $('#doAccess');
accessBtn.click(function() {
accessBtn[0].disabled = true;
DoSave();
});

Sounds like what you really need is:
$("#doAccess").one('click', DoSave);
jsFiddle example
.one() - Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

Why not this?
$("#doAccess").once('click', function() {
DoSave();
});
You should probably also gray out or disable #doAccess, whatever it is.

Related

.on('change' ...) doesn't trigger for data changed by JS

I am trying to trigger an event when an input textbox changed:
$('.packeta-selector-branch-id').on('change', function () { alert('helo'); })
This works only If I manually type something in the textbox, but in my case where an external javascript is setting the textbox value, not working.
I created a little jsfiddle to show this:
https://jsfiddle.net/6vnuqxa0/
To try out:
Click on Choose pickup point
Select something from list and click on "Choose this pick up point".
Any ideas how to resolve this issue?
The selected answer to jQuery watch for domElement changes? suggests binding to the DOMSubtreeModified event. I have tried iin your fiddle and it works! The answer does mention that this event may be deprecated, but it is worth looking into.
In your case, add an id to your div so that you have:
<div id="packeta-selector-branch-id" class="packeta-selector-branch-id"></div>
Then the following code will trigger the alert when the contents of that div change.
$('#packeta-selector-branch-id').bind('DOMSubtreeModified', function(e) {
if (e.target.innerHTML.length > 0) {
alert('helo');
}
});
Otherwise, I would look at the widget itself and try and determine if it fires any events on select. If so, you could attach some behaviour to that event.
trigger('change') when click button. but a ID or name on your input would be better
$(document).off('click', '.button select-branch').on('click', '.button select-branch', function(){
$('.packeta-selector-branch-id').trigger('change');
})

Simulate div click multiple times

I've got slider in template glitching, and code is minimized. So, got tired of looking for the cause of the problem and decided to use a quick hack.
I need to fire a div click multiple times.
I've used this piece of code to trigger a click
$('.control-prev').trigger('click');
Works fine for one time click.
Now, how do i make it click multiple times?
http://jsfiddle.net/br4Lmyso/ (warning: creates three alerts, just to quickly show it works)
// set your count to whatever you want. Get a reference to the div
// so you're not querying the DOM everytime.
var triggerCount = 3;
var triggerDiv = $('.control-prev');
// loop!
for(var i = 0; i < triggerCount; i++) {
triggerDiv.trigger('click');
}
To be clear, trigger(...) does not simulate the click behavior and there is no way you can simulate the click behavior. What it does is to call the function that handle given event. These two are total different. For example:
$('#test').click(function() {
console.log("Clicked");
});
$('#test').dblclick(function() {
console.log("Double Click");
});
$('#test').trigger('click');
$('#test').trigger('click');
Despite of rapidly trigger two clicks, the double click will not trigger.

Javascript disabling a button during requests

I am trying to briefly disable a 'Save' button on a page during requests to prevent users from clicking it twice. Following advice that I found here, I put
elem.setAttribute("disabled","disabled")
at the very beginning of the onclick method, but it doesn't work, I can still click multiple times very fast and cause multiple requests to be sent before the buttons get disabled. Does anyone have any advice?
Try using the elements properties instead of its attributes
elem.disabled = true;
The onclick method can do this, too. In addition to disabling the button.
if (inclick) return;
inclick = true;
... handle the entire click work ...
inclick = false;
be sure to default inclick = false; at the start of the world.
This will make sure any fast clicks get ignored. (It's a sort of 'debouncing' effect.)
like this
elem.attr("disabled", "disabled");
$("#idButton").attr("disabled", "disabled");
could you help this.
Disabling a submit button after one click
http://jsfiddle.net/V7B3T/12/

Jquery toggle command triggers unexpectedly

I have a webpage which contains one section called 'answer'. The 'answer' section should be hidden until users click the 'show-answer' hyper link.
So I use JQuery toggle command to achieve this:
$('.show-answer').toggle(function() { show_answer ...} ,
function() {hide_answer ...} )
It works well by itself.
However, I got a problem when I add another form on the same page. When the form is submitted, I redirect it to this page with an anchor "#xxx" appended in the end.
Then I found that the toggle function got triggered unexpectedly. Basically, if the 'answer' section is hidden before the form submitted, it becomes visible after the browser is redirected to the page.
May be using a click handler will help you
$(document).ready(function(){
$('.answer').on('click', function(e){
e.preventDefault();
$('.show-answer').toggle('show');
//Or use the following
//$('.show-answer').slideToggle();
});
});
A fiddle is here.

Javascript multiple hyperlink clicks process

We have many hyperlinks in a html page. On click of which we do certain function.
After one hyperlink is clicked I wanted to make other hyperlink clicks to do nothing until first one finishes it processing. (During testing testers started clicking the hyperlinks rapidly one after another)
I did something like this, but it does not seem to be working. Basically used a variable to track if a hyperlink is clicked.
var hyperlinkClickInProcess=false;
function clickHandler(inputData){
if(hyperlinkClickInProcess ==false){
hyperlinkClickInProcess =true;
linkProcessing(inputData);
hyperlinkClickInProcess =false;
}
}
Any thoughts on how to implement such functionality?
function disableAllLinks() {
// search for all links and remove onclick event handlers, + return false.
}
function enableAllLinks() {
// search for all links and reassing onclick event handlers
}
function clickHandler(inputData){
disableAllLinks();
/// Link processing body here ////
enableAllLinks();
}
This question tells how to use jquery to disable all the links on a page: jQuery disable a link. But instead of disabling just one specific link, you could use a similar strategy on all the links on the page by doing like so:
$('a').click(function(e) {
if(hyperlinkClickInProcess) {
e.preventDefault();
}
else {
hyperlinkClickInProcess =true;
linkProcessing(inputData);
hyperlinkClickInProcess =false;
}
});

Categories

Resources