I have following jQuery code to prevent double clicking a button. It works fine. I am using Page_ClientValidate() to ensure that the double click is prevented only if the page is valid. [If there are validation errors the flag should not be set as there is no postback to server started]
Is there a better method to prevent the second click on the button before the page loads back?
Can we set the flag isOperationInProgress = yesIndicator only if the page is causing a postback to server? Is there a suitable event for it that will be called before the user can click on the button for the second time?
Note: I am looking for a solution that won't require any new API
Note: This question is not a duplicate. Here I am trying to avoid the use of Page_ClientValidate(). Also I am looking for an event where I can move the code so that I need not use Page_ClientValidate()
Note: No ajax involved in my scenario. The ASP.Net form will be submitted to server synchronously. The button click event in javascript is only for preventing double click. The form submission is synchronous using ASP.Net.
Present Code
$(document).ready(function () {
var noIndicator = 'No';
var yesIndicator = 'Yes';
var isOperationInProgress = 'No';
$('.applicationButton').click(function (e) {
// Prevent button from double click
var isPageValid = Page_ClientValidate();
if (isPageValid) {
if (isOperationInProgress == noIndicator) {
isOperationInProgress = yesIndicator;
} else {
e.preventDefault();
}
}
});
});
References:
Validator causes improper behavior for double click check
Whether to use Page_IsValid or Page_ClientValidate() (for Client Side Events)
Note by #Peter Ivan in the above references:
calling Page_ClientValidate() repeatedly may cause the page to be too obtrusive (multiple alerts etc.).
I found this solution that is simple and worked for me:
<form ...>
<input ...>
<button ... onclick="this.disabled=true;this.value='Submitting...'; this.form.submit();">
</form>
This solution was found in:
Original solution
JS provides an easy solution by using the event properties:
$('selector').click(function(event) {
if(!event.detail || event.detail == 1){//activate on first click only to avoid hiding again on multiple clicks
// code here. // It will execute only once on multiple clicks
}
});
disable the button on click, enable it after the operation completes
$(document).ready(function () {
$("#btn").on("click", function() {
$(this).attr("disabled", "disabled");
doWork(); //this method contains your logic
});
});
function doWork() {
alert("doing work");
//actually this function will do something and when processing is done the button is enabled by removing the 'disabled' attribute
//I use setTimeout so you can see the button can only be clicked once, and can't be clicked again while work is being done
setTimeout('$("#btn").removeAttr("disabled")', 1500);
}
working example
I modified the solution by #Kalyani and so far it's been working beautifully!
$('selector').click(function(event) {
if(!event.detail || event.detail == 1){ return true; }
else { return false; }
});
Disable pointer events in the first line of your callback, and then resume them on the last line.
element.on('click', function() {
element.css('pointer-events', 'none');
//do all of your stuff
element.css('pointer-events', 'auto');
};
After hours of searching i fixed it in this way:
old_timestamp = null;
$('#productivity_table').on('click', function(event) {
// code executed at first load
// not working if you press too many clicks, it waits 1 second
if(old_timestamp == null || old_timestamp + 1000 < event.timeStamp)
{
// write the code / slide / fade / whatever
old_timestamp = event.timeStamp;
}
});
you can use jQuery's [one][1] :
.one( events [, data ], handler ) Returns: jQuery
Description: Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
see examples:
using jQuery: https://codepen.io/loicjaouen/pen/RwweLVx
// add an even listener that will run only once
$("#click_here_button").one("click", once_callback);
using count,
clickcount++;
if (clickcount == 1) {}
After coming back again clickcount set to zero.
May be this will help and give the desired functionality :
$('#disable').on('click', function(){
$('#disable').attr("disabled", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="disable">Disable Me!</button>
<p>Hello</p>
We can use on and off click for preventing Multiple clicks. i tried it to my application and it's working as expected.
$(document).ready(function () {
$("#disable").on('click', function () {
$(this).off('click');
// enter code here
});
})
This should work for you:
$(document).ready(function () {
$('.applicationButton').click(function (e) {
var btn = $(this),
isPageValid = Page_ClientValidate(); // cache state of page validation
if (!isPageValid) {
// page isn't valid, block form submission
e.preventDefault();
}
// disable the button only if the page is valid.
// when the postback returns, the button will be re-enabled by default
btn.prop('disabled', isPageValid);
return isPageValid;
});
});
Please note that you should also take steps server-side to prevent double-posts as not every visitor to your site will be polite enough to visit it with a browser (let alone a JavaScript-enabled browser).
The absolute best way I've found is to immediately disable the button when clicked:
$('#myButton').click(function() {
$('#myButton').prop('disabled', true);
});
And re-enable it when needed, for example:
validation failed
error while processing the form data by the server, then after an error response using jQuery
Another way to avoid a quick double-click is to use the native JavaScript function ondblclick, but in this case it doesn't work if the submit form works through jQuery.
One way you do this is set a counter and if number exceeds the certain number return false.
easy as this.
var mybutton_counter=0;
$("#mybutton").on('click', function(e){
if (mybutton_counter>0){return false;} //you can set the number to any
//your call
mybutton_counter++; //incremental
});
make sure, if statement is on top of your call.
If you are doing a full round-trip post-back, you can just make the button disappear. If there are validation errors, the button will be visible again upon reload of the page.
First set add a style to your button:
<h:commandButton id="SaveBtn" value="Save"
styleClass="hideOnClick"
actionListener="#{someBean.saveAction()}"/>
Then make it hide when clicked.
$(document).ready(function() {
$(".hideOnClick").click(function(e) {
$(e.toElement).hide();
});
});
Just copy paste this code in your script and edit #button1 with your button id and it will resolve your issue.
<script type="text/javascript">
$(document).ready(function(){
$("#button1").submit(function() {
$(this).submit(function() {
return false;
});
return true;
});
});
</script
Plain JavaScript:
Set an attribute to the element being interacted
Remove the attribute after a timeout
If the element has the attribute, do nothing
const throttleInput = document.querySelector('button');
throttleInput.onclick = function() {
if (!throttleInput.hasAttribute('data-prevent-double-click')) {
throttleInput.setAttribute('data-prevent-double-click', true);
throttleInput.setAttribute('disabled', true);
document.body.append("Foo!");
}
setTimeout(function() {
throttleInput.removeAttribute('disabled');
throttleInput.removeAttribute('data-prevent-double-click');
}, 3000);
}
<button>Click to add "Foo"!</button>
We also set the button to .disabled=true. I added the HTML Command input with type hidden to identify if the transaction has been added by the Computer Server to the Database.
Example HTML and PHP Commands:
<button onclick="myAddFunction(<?php echo $value['patient_id'];?>)" id="addButtonId">ADD</button>
<input type="hidden" id="hasPatientInListParam" value="<?php echo $hasPatientInListParamValue;?>">
Example Javascript Command:
function myAddFunction(patientId) {
document.getElementById("addButtonId").disabled=true;
var hasPatientInList = document.getElementById("hasPatientInListParam").value;
if (hasPatientInList) {
alert("Only one (1) patient in each List.");
return;
}
window.location.href = "webAddress/addTransaction/"+patientId; //reloads page
}
After reloading the page, the computer auto-sets the button to .disabled=false. At present, these actions prevent the multiple clicks problem in our case.
I hope these help you too.
Thank you.
One way I found that works is using bootstrap css to display a modal window with a spinner on it. This way nothing in the background can be clicked. Just need to make sure that you hide the modal window again after your long process completes.
so I found a simple solution, hope this helps.
all I had to do was create a counter = 0, and make the function that runs when clicked only runnable if the counter is = 0, when someone clicks the function the first line in the function sets counter = 1 and this will prevent the user from running the function multiple times when the function is done the last line of the code inside the function sets counter to 0 again
you could use a structure like this, it will execute just once:
document.getElementById('buttonID').addEventListener('click', () => {
...Do things...
},{once:true});
I wish to disable a href after clicking it once.
I have the following href:
<a href="BeginPayment.aspx?PayPal=true" id ="link" onclick="javascript:clickAndDisable();">
I have added the onclick event that gets called on click.
I have attempted to change the href to be a blank path so that it cannot be clicked a second time: This is via a Javascript function.
function clickAndDisable(link)
{
alert("Entered clickAndDisable function");
this.href="''";
}
My code is all within an xslt file.
Where am i going wrong with this?
Here is my updated code following peoples suggestions:
<a href="BeginPayment.aspx?PayPal=true" id ="link" onclick="javascript:clickAndDisable(this);">
<script type="text/javascript">
function clickAndDisable(link)
{
alert("Entered clickAndDisable function");
link.href="";
}
This disables the link from working at all, I wish for the link to work the first time it is clicked, but not work any other time it is clicked.....
You can use the Javascript like
function clickAndDisable(link) {
link.onclick = function(event) {
event.preventDefault();
}
}
<a href="BeginPayment.aspx?PayPal=true" id ="link" onclick="javascript:clickAndDisable(this);">
If you can use jQuery then you can append a class on the first click and then preventDefault after that.
$('a').on("click", function (e) {
if($('a').hasClass('clicked'){
e.preventDefault();
} else {
$('a').addClass('clicked');
}
});
This Fiddle shows an example
EDIT: As pointed out by Johannes H. jQuery is not required, this can be done in pure JS as seen here
First of all: .href="''" will not set the href attribute to an empty value, but to the string ''. Instead, .href="" does what you tried.
Second: this refers to the source element of the event within the inline onclick handler. However, when a function is called in the event handler, there is no special treatment for this, so any reference to this inside the function will point to the window object.
To solve this you can either:
1) pass the element to your function:
<a href="BeginPayment.aspx?PayPal=true" id ="link" onclick="javascript:clickAndDisable(this);">
function clickAndDisable(link)
{
alert("Entered clickAndDisable function");
link.href="";
}
2) use Function.prototype.call()
<a href="BeginPayment.aspx?PayPal=true" id ="link" onclick="javascript:clickAndDisable.call(this);">
function clickAndDisable()
{
alert("Entered clickAndDisable function");
this.href="";
}
3) Use Javascript to attach the event handler and dump the inline handler (in this case, this will be set to the EventTarget that triggered the handler when calling handler function):
<a href="BeginPayment.aspx?PayPal=true" id ="link">
function clickAndDisable()
{
alert("Entered clickAndDisable function");
this.href="";
}
document.getElementById('link').attachEventListener('click', clickAndDisable);
Third: encorporating #SamAnderson's answer, instead of setting an empty value for href, you can also set a flag on first call and evaluate if it has been set on later calls, and if so, use Event.preventDefault() to prevent the normal action of the hyperlink form happening:
<a href="BeginPayment.aspx?PayPal=true" id ="link">
var clicked = false;
function clickAndDisable(e)
{
alert("Entered clickAndDisable function");
if (clicked)
{
e.preventDefault();
}
else
{
clicked = true;
}
}
document.getElementById('link').attachEventListener('click', clickAndDisable);
I ended up disabling the href after one click using the following javascript function:
function check(link) {
if (link.className != "visited") {
//alert("new");
link.className = "visited";
return true;
}
//alert("old");
return false;
}
hi i have a html button and when you press it, it should give you the distances of shops from where you are so when you press it they appear now the problem is because it is in early stages the information is printed everytime the button is pressed i would just like to now how to disable it when it has been pressed once and then reactivate it when another button has been pressed this is not a submit button my code for the button is :
<button onclick="getLocation()">Search</button>
any help would be much appreciated thanks in advance
I think its very clear for you..
Call your getlocation() method inside the click event..
Working fiddle
Code
$( "#bind" ).click(function() {
$(this).attr("disabled", "disabled");
$("#unbind").removeAttr("disabled");
});
$( "#unbind" ).click(function() {
$(this).attr("disabled", "disabled");
$("#bind").removeAttr("disabled");
});
Output
Do like that:
<script type="text/javascript">
var clicked = false;
function disableMe() {
if (document.getElementById) {
if (!clicked) {
document.getElementById("myButton").value = "thank you";
clicked = true;
return true;
} else {
return false;
}
} else {
return true;
}
}
</script>
<button type="button" id="myButton" onClick="return disableMe()" value="OK">
Or, you can do this:
onclick="this.disabled=true"
There are a number of ways to do this. Usually, you could use JavaScript to edit the attributes. It's best to read on this and ask if you have problems with your coding.
You should find what you need on this post: How to disable html button using JavaScript?
You could try something like this:
$('button').click(function(){
// Add functionality here, then...
$(this).attr("disabled", true);
});
This can be solved in several ways, but the most intuitive way would most likely be to feed the application (which this appears to be) which state it is in. Such as:
var locationSearched = false //global scope of the application
getLocation() {
if(locationSearched) {
//do nothing or inform user of the state + wait for alternative button click
} else {
//execute the method and request to retrieve the location
state = true
}
}
Alternatively this could be passed as a parameter to the method. This does seem abit wonky in my opinion tho. With the solution suggested you can perform logical behavior in relation to the state, making it abit more scalable.
Maybe this will work. Using DOM
function myFunction() {
document.getElementById("myBtn").disabled = true;
}
I need to disable right-click on a hyperlink which is in a span. I need to disable only one link from the whole page. Any suggestions?
If you dont want to show the context menu on hyperlink, you can do so without doing anything to other part or even span where it exists. I tested in IE, Firefox and it works.
Link
This should work:
oncontextmenu=”return false;”
Place it on any element you want to disable right click for.
Be aware that this causes bad user experience and users can disable it very easily.
Disclaimer: not tested.
If you don't want to pollute your HTML with inline events and you care about supporting IE < 9, you can use this lovely mess:
function addEvent (el, eventType, listener) {
if (el.addEventListener) { // W3C-compliant
el.addEventListener(eventType, listener, false);
}
else {// IE-specific
el.attachEvent('on'+eventType, listener);
}
}
addEvent(document.getElementById('myLinkID'), 'contextmenu', function (e) {
if (e.preventDefault) { // W3C
e.preventDefault();
}
else { // IE
e.returnValue = false;
}
});
I have never seen one done through HTML (that does not imply it is not possible). However, JavaScript can help you here.
You can do something like:
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
Try this oncontextmenu="return false;"
IN MVC:
#Html.ActionLink("print page", "myprint", "print", null, new { #oncontextmenu="return false;"})
You can also use jQuery:
$(".myHyperlinks").contextmenu(function () { return false; });
We are using window.location.href to navigate the user to a page.
Also, we have configured the window.onbeforeunload event to alert users in case there are any unsaved changes.
window.onbeforeunload = confirmBeforeClose;
function confirmBeforeClose() {
if (jwd.global.inEditMode)
return "Your changes will not be saved :) and you will be punished to death";
}
In places where there are unsaved changes, and I try to use window.location.href to navigate the user, I get the alert message.
It works fine if I click OK on the popup. However, if I click CANCEL, the JS throws an unspecified error at window.location.href.
Any help is appreciated.
I was also experiencing this issue (in IE7 and above, not in IE6 however).
The only solution that I could find was wrapping the window.location.href call in a try/catch block.
The below is a complete example that reproduces the problem. If you uncomment out the try/catch then it works as desired in all browsers.
JavaScript (in HTML head):
window.onbeforeunload = confirmBeforeClose;
function confirmBeforeClose( )
{
return 'You have made changes on this page that will be lost if you navigate away without saving.';
}
function leavePage( )
{
// try {
window.location.href = "http://www.example.com";
// } catch( e ) { }
}
HTML:
<body>
Leave this page
</body>