The following script is not checking working when testing the radio button
<script type="text/javascript">
function checkButton(){
if(document.getElementById('Revise').checked = true){
alert("hello");
}
}
</script>
The html code is:
<form:radiobutton id= "Revise" value="Revise" name="status" path="status"></form:radiobutton>
Do i need to call the function/or place it in the body?
As most people have mentioned within their comments, you either need to
write
if(document.getElementById('Revise').checked === true)(newbie way)
or
write if(document.getElementById('Revise').checked) (pro way)
Also, you haven't invoked the function "checkButton", this is how you do it:
<form> <input type="radio" id= "Revise" value="Revise" name="status" path="status" onclick="checkButton()"> Click Me!! </form>
First off, your code is not working because you defined a function (checkButton) that never make a call to, thus it is never executed.
I'm not sure of what you are trying to do but you should avoid using in-line javascript.
If you are trying to run the alert when the radio button is clicked then add an click event listener on the radio.
document.getElementById('Revise').addEventListener('click',function() {
alert('Hello');
});
JSFindle
If you are trying to define a function called checkButton that checks your radio and shows an alert then your function would be defined like this:
function checkButton() {
document.getElementById('Revise').checked = true;
alert('Hello');
}
JSFindle
And then you would just invoke checkButton() on your trigger.
I have created a form where user can create his profile, now I want that if user do not click on save/submit button on the page and clicks on any other available link other than save.
Then he should get confirm popup of JavaScript mentioning that you are aborting the creation of profile. I am unable to find any event via which I can achieve this.
Other links are navigation links available on my page.
If you are using button for submit and others as a link then you can find out like this:
$(document).ready(function() {
$(document).('on','click',function(){
var pressedButton = $(this).text();
if(pressedButon == "Submit" || pressedButton =="Save")
{
return false;
}
else
{
$("a").on('click',function() {
var confirmAns = confirm('Your message');
if(confirmAns == true)
{
// DO whatever you want...
}
else
{
//Do whatever you want...
}
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can use onblur event for it and you can achieve your goal. So when a user click anywhere in your web page then the onblur event automatically fire.
You should use onblur event on your save/submit button.
<button onblur="myFunction()" type="button">Save</button>
<script>
function myFunction() {
var txt;
var r = confirm("You are aborting the creation of profile");
if (r == true) {
return true;
} else {
return false;
}
}
</script>
Try using some plugin. There is one jQuery plugin "Are You Sure"
So you just need below code snippet
$('form').areYouSure();
// OR
$('form.my_form_class').areYouSure();
There are some advanced option available with plugin. Checkout its documentation.
If I understood right, you want this two possibilities:
1.User clicks submit button: form gets submitted
2.User clicks "a" link: get alert asking for confirmation to leave the registration process.
First point will be done automatically as it's a form submit button without the need of extra jQuery.
Second point would just need the following code in order to show the confirmation button:
<script>
$(document).ready(function(){
$('a').on('click',function(e){
if (!confirm("Are you sure you want to exit the registration process?")){
e.preventDefault();
return false;
}
});
});
</script>
I am using the following javascript to hide a form if the user clicks on a checkbox.
I am trying to get the code to run on page load but am not able to work out how to do this. Can anyone help?
$('#no_cage').change(function(){
if (this.checked) {
$('#cage_details').fadeOut();
} else {
$('#cage_details').fadeIn();
}
});
HTML:
<input name="no_cage" id="no_cage" type="checkbox" value="1" <?php echo $checked; ?>><label for="no_cage">Check if not required</label>
<div id="cage_details">
<form>
...
</form>
</div>
This works fine when a user clicks on the checkbox. But does not when it pulls from the DB and the checkbox is already selected on page load.
Just add this code inside the document ready handler. It will trigger the change event handler without it needing to actually change...
$('#no_cage').trigger("change");
Alternatively, just trigger the event where you declare it...
$('#no_cage').change(function(){
if (this.checked) {
$('#cage_details').fadeOut();
}
else {
$('#cage_details').fadeIn();
}
}).trigger("change");
That will add the event handler and then immediately execute it, in order to set the form to the correct state when the document has loaded.
You can either change the checked property or trigger the change event.
$(function() {
$('#no_cage').change(function() {
if (this.checked) {
$('#cage_details').fadeOut();
} else {
$('#cage_details').fadeIn();
}
});
// Change the checked property
$('#no_cage').prop('checked', true);
// OR trigger the change event
// $('#no_cage').trigger('change');
});
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 have a file upload system, after the upload button is clicked, the file is then uploaded through AJAX. While the file is uploaded I want to disable the click function that is on the "Select Images" button.
Currently this is the click function on the file-selection button:
$(document).ready(function() {
$("#file-button").click(function() {
$('#file').trigger('click');
});
});
That works fine, but I want to disable the click function in the progress phase of the XmlHttpRequest, and then re-enable the click function when I get a 200 response from the server. I have tried bind() and unbind() and it works fine in Chrome, but in firefox, during the upload, the button cannot be clicked, which is what I want, and then after I get a response from the server the button is re-enabled, but in firefox two file-selection dialogue windows open at the same time. This is because of the function above, and me binding the function again using bind(). Does anyone have any suggestions on how to enable, then disable the button without re-entering the code (function) of the click event.
Something like this would be preferable:
$('#file-button').disable();
$('#file-button').enable();
I have tried the on() and off() and they do not seem to work either.
SOLUTION -- thanks to Eric
I changed my initial click function to the following:
$(document).ready(function() {
$("#file-button").click(function() {
if ( $('#file-button').attr('disabled') == "disabled" ) {
return false;
}
else {
$('#file').trigger('click');
}
});
});
And I set the following to disable the button
$('#file-button').attr('disabled','disabled');
And this to re-enable it:
$('#file-button').removeAttr('disabled');
Disable the button using jQuery $.prop() function:
$("input[type=submit]").prop('disabled', true);
Add a conditional to the click handler to check if the button is disabled:
$("#file-button").click(function() {
if (!$(this).is(':disabled')) {
$('#file').trigger('click');
}
});
Later on re-enable the button:
$("input[type=submit]").prop('disabled', false);
Or you might be able to use the submit event instead of click, if there is a form involved:
$("#whatever-your-form-is").on('submit', function() {
$('#file').trigger('click');
});
Try Attr jQuery function.
$('#file-button').attr('disabled','disabled');
$('#file-button').removeAttr('disabled');
Tested Code
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#file-button").click(function(e)
{
e.preventDefault();
$(this).attr('disabled','disabled');
return false;
});
});
</script>
<input type="button" id="file-button" value="ClickMe" />
You have to refer input button in order to disable button ,
Something like below
$("input[type=submit]").prob('disabled', true);
$("inpur[type=submit]").prob('disabled', false);