I know there are a lot of questions about it, but I tried several solutions, and nothing works.
In my django app I have a form:
<form method='post'>
<button type='submit'>Send</button>
</form>
I wan't to disable the button once the user has submitted the form. Using other questions, I tried several things, like:
<button type='submit' onclick="this.disabled=true">Send</button>
When I click, the button is disabled... but the form is not submitted. And for each try I had the same issue: either the button is disabled or the form is submitted. I can't find how to do both...
I'm using Chrome. Any idea on why I have this problem? Thank you for your help.
Try this:
$('form').submit(function() {
$(this).find("button[type='submit']").prop('disabled',true);
});
I like this, don't have to traverse the DOM.
Put function on a setTimeout function, this allows make submit and after disable button, even if setTimeout is 0
$(document).ready(function () {
$("#btnSubmit").click(function () {
setTimeout(function () { disableButton(); }, 0);
});
function disableButton() {
$("#btnSubmit").prop('disabled', true);
}
});
You could disable it upon the parent form's submit event:
$("form").on("submit", function () {
$(this).find(":submit").prop("disabled", true);
});
Be sure to run this code only after the HTMLFormElement has been loaded, or else nothing will be bound to it. To ensure that the binding takes place, fire this off from within a document-ready block:
// When the document is ready, call setup
$(document).ready(setup);
function setup () {
$("form").on("submit", function () {
$(this).find(":submit").prop("disabled", true);
});
}
Something like this might work.
<button id="btnSubmit" type='submit'> Send </button>
<script>
$("#btnSubmit").on("click", function(e){
e.PreventDefault();
$(this).closest("form")[0].submit();
$(this).prop('disabled',true)
});
</script>
Try, like this,
<input type="submit" value="Send" onclick="javascript=this.disabled = true; form.submit();">
This ended up being the best solution for me
$("form").submit(function disableSubmit() {
$("input[type=submit]", this).prop("disabled", true);
});
my variant, disable button, no direct disabled but only vidible hidden:
<input type="submit" name="namebutton" value="Nahrát obrázek" onclick="this.style.visibility='hidden';" ondblclick="this.style.visibility='hidden';"/>
You can do something like this. It is work fine with me.
<form method='post' onSubmit='disableFunction()'>
// your code here
</form>
Then in script, add this
<script>
function disableFunction() {
$('#btn_submit').prop('disabled', true);
}
</script>
How about this?
onclick="this.style.visibility='hidden';"
I would say, instead of disabled, hide it.
If you want to go with disabled
onclick="this.style.disabled='true';"
Got an issue on Chrome, wasn't submitting the form. Tried a bunch of different code, this was what worked best for me (and looks best imo):
$('#form_id').submit(function() {
$("input[type='submit']", this)
.val("Please Wait...")
.attr('disabled', 'disabled');
return true;
});
Replace form_id with the id of your form. Classes work too of course: $('.form_class')
Source: JavaScript Coder
I like this better:
<script>
var submit = false;
$('form').submit(function () {
if (submit) { return false; }
else { submit = true;}
});
</script>
this way it also prevents the enter key to submit more than once
I'm using Chrome. Any idea on why I have this problem?
Well, first time I dealt with this, I solved it like this:
function blockButtons() {
$('button:submit').click(function(){
$('button:submit').attr("disabled", true);
});
}
This worked perfectly, but... in Mozilla Firefox. The Google Chrome did not submit it, so I changed it to this:
function blockButtons() {
$('button:submit').click(function(){
var form = $(this).parents('form:first');
$('button:submit').attr("disabled", true);
$('button:submit').css('opacity', 0.5);
form.submit();
});
}
This worked both in Mozilla Firefox, however, after that some of our users using old versions of IE experienced trouble of having two submits. That is, the one initiated by the javascript, and the one by browser ignoring the fact of onclick and just submitting anyway. This can be fixed by e.preventDefault, I guess.
If you don't want an element to be double-clicked, use .one()
<button id="submit" type="submit">Send</button>
<script>
$(function () {
$("#submit").one("click", function () {
//enter your submit code
});
});
.one()
You can do something like this. It is work fine with me.
$("button#submitted").click(function () {
$("button#submitted").prop('disabled', true);
});
Double click on your button. This code will running
You must prevent the form from being submitted more than once, disabling the button is not the right solution because the form could be submitted in other ways.
JavaScript:
$('form').submit(function(e) {
// if the form is disabled don't allow submit
if ($(this).hasClass('disabled')) {
e.preventDefault();
return;
}
$(this).addClass('disabled');
});
Once the form is correctly disabled, you can customize its appearance.
CSS:
form.disabled {
pointer-events: none;
opacity: 0.7;
}
Related
I have this little piece of code:
<script>
$(window).bind('beforeunload', function() {
$.ajax({
async: false,
type: 'POST',
url: '/something'
});
});
</script>
I wonder, how could I disable this request when user hits the submit button.
Basically something like here, on SO. When your asking a question and decide to close the page, you get a warning window, but that doesn't happen when you're submitting the form.
Call unbind using the beforeunload event handler:
$('form#someForm').submit(function() {
$(window).unbind('beforeunload');
});
To prevent the form from being submitted, add the following line:
return false;
Use
$('form').submit(function () {
window.onbeforeunload = null;
});
Make sure you have this before you main submit function! (if any)
This is what we use:
On the document ready we call the beforeunload function.
$(document).ready(function(){
$(window).bind("beforeunload", function(){ return(false); });
});
Before any submit or location.reload we unbind the variable.
$(window).unbind('beforeunload');
formXXX.submit();
$(window).unbind("beforeunload");
location.reload(true);
Looking for Detect onbeforeunload for ASP.NET web application well I was,
I've to show warning message if some input control changes on the page using ASP.NET with Master Page and Content Pages. I'm using 3 content placeholders on the master page and the last one is after the form
<form runat="server" id="myForm">
so after the form closing tag and before the body closing tag used this script
<script>
var warnMessage = "Save your unsaved changes before leaving this page!";
$("input").change(function () {
window.onbeforeunload = function () {
return 'You have unsaved changes on this page!';
}
});
$("select").change(function () {
window.onbeforeunload = function () {
return 'You have unsaved changes on this page!';
}
});
$(function () {
$('button[type=submit]').click(function (e) {
window.onbeforeunload = null;
});
});
</script>
beforeunload doesn't work reliably this way, as far as binding goes. You should assign it natively
so I got it working like this bind and unbind didn't work out for me also With jQuery 1.7 onward the event API has been updated, .bind()/.unbind() are still available for backwards compatibility, but the preferred method is using the on()/off() functions.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.dirtyforms/2.0.0-beta00006/jquery.dirtyforms.min.js"></script>
<script type="text/javascript">
$(function() {
$('#form_verify').dirtyForms();
})
</script>
<title></title>
<body>
<form id="form_verify" action="a.php" method="POST">
Firt Name <input type="text">
Last Name <input type="file">
<input type="submit">
</form>
if you're using bind then use this:
$('form').submit(function () {
$(window).unbind('beforeunload');
});
This will be good for all form submit.
Super old question but might be useful to others.
Simply detaching the "beforeunload" from the "submit" event would not work for me - because the submit handler was being called even when there were errors in the form that the user had to fix. So if a user attempted to submit the form, then received the errors, then clicked to another page, they would be able to leave without the warning.
Here's my workaround that seems to work pretty well.
(function($) {
var attached = false,
allowed = false;
// catch any input field change events bubbling up from the form
$("form").on("change", function () {
// attach the listener once
if (!attached) {
$("body").on("click", function (e) {
// check that the click came from inside the form
// if it did - set flag to allow leaving the page
// otherwise - hit them with the warning
allowed = $(e.target).parents("form").length != 0;
});
window.addEventListener('beforeunload', function (event) {
// only allow if submit was called
if (!allowed) {
event.preventDefault();
event.returnValue = 'You have unsaved changes.';
}
});
}
attached = true;
});
}(jQuery));
This way, if the click to leave the page originated from inside the form (like the submit button) - it will not display the warning. If the click to leave the page originated from outside of the form, then it will warn the user.
I am nearly finished my website, but my last problem is, I want to include a Loading.gif on the Follow-Button after hitting the submit-button 'Follow'. For this I need to submit the form-data after a delay. For showing the loading.gif on hitting submit, I dont need help, just for the delay.
I tried different codes but they didnt work. Here are all the codes:
My Form-Tag with submit-button:
<form id=followForm action="" method="POST"><input type="submit" name="follow" class="btn_id9 shadow rounded-min ptr" value="Follow User" style="width:100%" /></form>
And here the code-sample, which didnt work:
function formdelay(followform) {
$(function() {
setTimeout(function() { $('#followForm').submit(); }, 2000);
});
}
I hope you guys can help me, thanks!
This is an interesting problem. The first thought that I had was to do something like this:
http://jsfiddle.net/V9UpA/
$('#followForm').on('submit', function (event, force) {
if (!force) {
var $this = $(this);
event.preventDefault();
setTimeout(function () {
$this.trigger('submit', true);
}, 2000);
}
});
Basically, you want to use event.preventDefault() on the initial submit event, followed by a timeout. After that timeout has completed, you re-trigger the event, but pass the force argument so that we want to allow the submit this time around.
What you need to do is something like this:
$("#followForm input").click(function(e) {
e.preventDefault();
setTimeout(function() { $("#followForm").submit(); }, 2000);
});
The key is e.preventDefault(). This method will stop the default behavior of clicking on the submit button (which is submitting on the form). You can then do whatever you need to do and then submit the form manually which is what $("#followForm").submit(); does.
Demo: http://jsfiddle.net/DMcCr/2/
I've been trying to find the "right" way to prevent double submits of forms. There are lots of related posts on SO but none of them hit the spot for me. Two questions below.
Here is my form
<form method="POST">
<input type="text" name="q"/>
<button class="once-only">Send</button>
</form>
Here is my first attempt to disable double submits:
$(document).ready(function(){
$(".once-only").click(function(){
this.disabled = true;
return true;
});
});
This is the approach suggested here: Disable button after post using JS/Jquery. That post suggests the submitting element must be an input rather than a button, but testing both makes no difference. You can try it yourself using this fiddle: http://jsfiddle.net/uT3hP/
As you can see, this disables the button, but also prevents submission of the form. In cases where the submitting element is a button and an input element.
Question 1: why does this click handler stop submission of the form?
Searching around some more I find this solution (from Why doesn't my form post when I disable the submit button to prevent double clicking?)
if($.data(this, 'clicked')){
return false;
} else{
$.data(this, 'clicked', true);
return true;
}
You can play with this using this fiddle: http://jsfiddle.net/uT3hP/1/
This does work, but...
Question 2: Is this the best we can do?
I thought this would be an elementary thing. Approach 1 does not work, approach 2 does, but I don't like it and sense there must be a simpler way.
Simple and effective solution is
<form ... onsubmit="myButton.disabled = true; return true;">
...
<input type="submit" name="myButton" value="Submit">
</form>
Source: here
You can use jQuery's submit(). In this case, it should look something like this:
$('form').submit(function(){
$(this).children('input[type=submit]').prop('disabled', true);
});
Here is a working jsFiddle (made by Mike) - http://jsfiddle.net/gKFLG/1/.
If your submit-button is not a direct child of the form-element you will need to replace children with find. Additionally, your submit-button may also be a button element instead of an input element. E.g. This is the case if you are using Bootstrap horizontal forms. Below is a different version of the snippet:
$('form').submit(function(){
$(this).find('button[type=submit]').prop('disabled', true);
});
Demo jsFiddle - http://jsfiddle.net/devillers/fr7gmbcy/
Similarly Ive seen a few examples, this one allows you to alter how long the button is disabled for, through timeout. It also only triggers on a form submit rather than on the buttons click event, which originally caused me a few issues.
$('form').submit(function () {
var button = $('#button');
var oldValue = button.value;
var isDisabled = true;
button.attr('disabled', isDisabled);
setTimeout(function () {
button.value = oldValue;
button.attr('disabled', !isDisabled);
}, 3000)
});
You could try using the following code:
$(document).ready(function(){
$(".once-only").click(function(){
this.submit();
this.disabled = true;
return true;
});
});
This should help:
<form class="form-once-only" method="POST">
<input type="text" name="q"/>
<button type="submit" class="once-only">Send</button>
</form>
Javascript:
$(document).ready(function(){
$("form.form-once-only").submit(function () {
$(this).find(':button').prop('disabled', 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);
$('#XynBp0').find('input').each(function(){
if ($(this).attr('value') == 'Cancel'){
$(this).trigger('click');
}
});
doesn't work in IE7
it's strange but try to create a custom event
$('#XynBp0 input').bind('custom',function(){
//code
})
$('#XynBp0').find('input').each(function(){
if ($(this).attr('value') == 'Cancel'){
$(this).trigger('custom');
}
});
Does this work?
$.click() (or $.trigger('click')) doesn't simulate a mouse click; it fires off any onclick events bound to that element. If you haven't assigned an onclick event to that input you're searching for, nothing will happen.
It sounds like you're trying to submit the form with a traditional submit button (e.g. <input type="submit" value="Cancel">). If that's the case, you may have to use $(yourform).submit() to submit the form, in combination with some handling of the data sent to the server to simulate clicking the Cancel button.
Is it wrapped in a dom ready event? Might help if you provide more code.
$(function () {
$('#XynBp0').find('input').each(function () {
if ($(this).attr('value') == 'Cancel') {
$(this).trigger('click');
}
});
});
Your code snippit doesn't make any sense, you are clicking inputs if they are canceled?
Here's some things to clean up in your code
$('input','#XynBp0').each(function () {
var $this = $(this);
if ( this.value === 'Cancel' ) { //Don't need jQuery here
$this.trigger('click'); //Probably don't need it here either
}
});
What does click even do? If you are trying to submit a form, use form.submit();