I'm trying to prevent users from clicking the button on the page twice, so what I've been doing is hiding that button with jQuery after it's been clicked once. But is there a way instead of hiding that button to disable with jQuery that button after it was clicked once?
I've tried
$(document).ready(function () {
$('#onClickHideButton').click(function () {
$(this).prop('disabled', true);
});
});
but the problem that I'm having with this function is that as soon as the button is clicked it it becomes disabled before it get the chance to submit the form, so the form never gets submitted.
Why not disable the button when the form is submitted, since that's what you actually want to do...
$('#myForm').on('submit', function () {
$('#myButton').prop('disabled', true);
});
Instead of using a submit button, just use a simple button and send manually the form submit.
<input type="button" id="onClickHideButton" value="Submit"/>
$('#onClickHideButton').click(function () {
$(this).prop('disabled', true);
$('#myform').submit();
});
or you could disable the button when the form is submitted
$('#myform').on('submit', function(e) {
$('#onClickHideButton').prop('disabled',true);
});
Related
I am using this below code for button click event using jQuery. When button is clicked the page reloads.
$('#button1').click(function () {
//Code goes here
return false;
});
If your "button" is a button element, make sure you explicity set the type attribute, otherwise the WebForm will treat it as submit by default.
<button id="button1" type="button">Go</button>
If it's an input element, do so with jQuery with the following:
$('#button1').click(function(e){
e.preventDefault();
// Code goes here
});
Read more: event.preventDefault()
You can use event.preventDefault() to prevent the default event (click) from occurring.
$('#button1').click(function(e) {
// prevent click action
e.preventDefault();
// your code here
return false;
});
Lets say I have a form with hidden submit button, and I input values in it, then I hit one button and dialog appears with Confirmation message and Confirm button. When I click on Confirm button, I click also on a hidden submit button from a form. Is that possible and how can I achieve it in JQuery?
In your jQuery use code like this:
$("#confirmationButton").on("click" , function () {
$("#submitButton").trigger("click");
});
or
$("#confirmationButton").on("click" , function () {
$("#form").submit();
});
Rememer that you have to set ids to your form and/or formSubmitButton.
I have an form with dropdown. whenever i select the drop down once i click save itself it appear it do some action. I want to as auto save when you change the dropdown values.
Here is the fiddle:
http://jsfiddle.net/GGtTw/
jQuery('select[name="dropdown"]').change(function() {
alert(jQuery(this).val());
});
jQuery('#submit').click(function() {
alert('you click submit button');
});
I want once you select the dropdown it automatically submit the values means it automatically click save without noticing to the user.
Any suggestion would be great.
Thanks
Use trigger to simulate a click event for the given object
jQuery('select[name="dropdown"]').change(function() {
jQuery('#submit').trigger('click');
});
jQuery('#submit').click(function() {
alert('you click submit button');
});
just do
$( "#submit" ).trigger( "click" );
Another Approach:
jQuery('select[name="dropdown"]').change(function() {
save();
});
jQuery('#submit').click(function() {
save();
});
function save()
{
alert('Save');
}
Make an ajax call to save from inside your drop down change event. Unless you want to perform a form submit, in that case trigger the click function on the submit like so
jQuery('#submit').trigger('click');
jQuery ajax()
Currently I have a submit button that pops up a confirmation that allows the form data to be processed or not.
I need my other button on my form page called "Cancel" to have the same action. How could I expand this code to add a second confirmation to the same form?
these are my buttons on the form :
And this is my current code that works :
</script>
<script>
$(document).on('submit', "#signinform", function(e)
{
if (!confirm("By clicking 'OK' you will be placed in queue! Please take a seat."))
{
e.preventDefault();
return;
}
});
</script>
just to add on :
The submit is a submit BUTTON. the Cancel is just a href with a border around it.
also again
This works at the moment for just the submit button.
I need my other button on the form called "Cancel" to do the samething, as in if you hit Ok your submission data will be deleted, and then you will be returned back to the form. If you hit cancel then you will remain on the page.
I guess you simply need something like
$(document).on('click', "#cancelButtonID", function(e)
{
if (!confirm("By clicking 'OK' you cancel the submission and the form is cleared."))
{
e.preventDefault();
return;
}
else {
//Clear the form or perform whatever actions are needed
}
});
I think however that you may want to replace your cancel link with a proper <input type="reset"> button, as that will clear the form automatically when you let the default action happen. Then you should be able to get rid of the else section above.
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);