We Keep Coding

Jquery form submit button (chrome issue)

I'm trying to prevent a form from being submitted twice. I'm doing that by catching clicks on a submit button and disabling it while the form submit goes on in the background.
Here's a very basic example of the code I'm using:
$("button").click(function(){
$(this).attr("disabled","true").html("Wait here while posted...");
});
Working example:
http://jsfiddle.net/t93Vw/
This works perfectly in firefox and IE, but in chrome the form is not submitted.
Why is this different behaviour, and does anyone have a quick fix?

If you want to submit a form then you should use onsubmit event:
$("form").submit(function () {
$(':submit', this).prop("disabled", true).html("Wait here while posted...");
});
onclick is for click, form has a special event for submission. Advantage is that it will properly behave on Enter key submit.
Demo: http://jsfiddle.net/t93Vw/1/

Try .prop( propertyName, value ) and don't wrap true in quotes
value Type: String or Number or Boolean A value to set for the property.
$("button").click(function (e) {
e.preventDefault(); //stop default behavior of form submit
$(this).prop("disabled", true) // disable button
.text("Wait here while posted...") //change text of button
.closest('form').submit();//find closest form and submit it
});
.closest()
event.preventDefault()
Fiddle Demo

The type of the button may be the reason ... try this
<form action="/test" method="post">
<input type="text" name="somefield"/>
<button id="submitbutton">Send</button>
</form>
$("button").click(function(){
$(this).prop("disabled",true).html("Wait here while posted...")
.parent().get(0).submit();
e.preventDefault();
});

Not quite sure what's the error but maybe this will help?
$("button").click(function(e){
e.preventDefault();
$(this).attr("disabled","true").html("Wait here while posted...");
});

For it to work on chrome, do the following updates in your codes:
(1) your form
<form action="/test" method="post" id="myForm">
<input type="text" name="somefield"/>
<button id="submitbutton" type="submit">Send</button>
</form>
(2) Use jquery to submit the form:
$("button").click(function(){
$('form#myForm').submit();
$(this).attr("disabled","true").html("Wait here while posted...");
});

Submit a form based on the javascript event

What I want is to be able to submit a form when ever a user presses some key like tab or enter (i.e. that will case him to lose focus) also clicking outside of the text field should trigger a submit. However when ever he click on the cancel button it should prevent the submit ion
html structure look like this
<form id="form">
<input id="text" onblur="$(this).closest('form').submit();">
<a id"submit">submit</a>
<a id"cancel">cancel</a>
</form>
Currently what happens is that when a user presses enter a form is submitted twice and it should be submitted only once. When he presses a cancel a form is submitted and cancelled right after that.
Does anyone have any idea how can I write some javascript code that can accomplish this behaviour (the idea for is take form the jira in-line edit mode and I am trying to construct something in similar manner)

I'm going to provide you with another you could approach this by using jQuery and it's .change() event handler. This way when the user clicks off of the input element, it'll trigger the .change() event and you can submit a form within it's callback function. If the user cancels then you can handle that event normally, same with the submit button click.
The Form:
<form id="form">
<input id="text">
<a id="cancel">cancel</a>
<a id="submit">submit</a>
</form>
The Javascript (jQuery):
$(document).ready(function(){
$('#submit').click(function(e){
e.preventDefault();
//submit the form
console.log('form submitted by button click')
});
$('#cancel').click(function(e) {
e.preventDefault();
//close form?
console.log('cancelled form');
});
$('#text').change(function(){
//submit the form
console.log('form submitted, maybe hide form now?');
});
});
The jsFiddle.

Keep submit flag to prevent duplication on form submit. Something like that
<form id="form">
<input id="text" onblur="submitForm('form');">
<button onclick="submitForm('form');">submit</button>
<button type="cancel">cancel</button>
</form>
<script>
var submitFlag = {};
function submitForm(id){
if(!submitFlag[id]){
submitFlag[id] = true;
$('#' + id).submit();
} else {
// do nothing
// alert('Form already submitted');
return;
}
}
</script>

Disable submit button ONLY after submit

I have the following HTML and jquery:
<html dir="ltr" lang="en">
<head>
</head>
<body>
<h2>Test disabling submit button for 1 minute...</h2>
<br/>
<p style="text-align:center">
<form id="yourFormId" name="yourFormId" method="post" action="#">
<input type="submit" class="submitBtn" value="I Accept"/>
</form>
</p>
<!--script to disable the submit button -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$(".submitBtn").click(function () {
$(".submitBtn").attr("disabled", true);
return true;
});
});
</script>
<!--script ends here-->
</body>
</html>
As its stands the submit button gets disabled when pressed. However once pressed it does not seem perform the submit. If I removed the jquery to disable the button, the button then performs the submit normally.
How can I disable the button only after it has performed the submit? the current jquery above seems to conflict with the submit operation.
Any suggestions to resolve this issue would be extremely helpful.

Add the disable part in the submit event.
$(document).ready(function () {
$("#yourFormId").submit(function () {
$(".submitBtn").attr("disabled", true);
return true;
});
});

I faced the same problem. Customers could submit a form and then multiple e-mail addresses will receive a mail message. If the response of the page takes too long, sometimes the button was pushed twice or even more times..
I tried disable the button in the onsubmit handler, but the form wasn't submitted at all. Above solutions work probably fine, but for me it was a little bit too tricky, so I decided to try something else.
To the left side of the submit button, I placed a second button, which is not displayed and is disabled at start up:
<button disabled class="btn btn-primary" type=button id="btnverzenden2" style="display: none"><span class="glyphicon glyphicon-refresh"></span> Sending mail</button>
<button class="btn btn-primary" type=submit name=verzenden id="btnverzenden">Send</button>
In the onsubmit handler attached to the form, the 'real' submit is hidden and the 'fake' submit is shown with a message that the messages are being sent.
function checkinput // submit handler
{
..
...
$("#btnverzenden").hide(); <= real submit button will be hidden
$("#btnverzenden2").show(); <= fake submit button gets visible
...
..
}
This worked for us. I hope it will help you.

This solution has the advantages of working on mobile and being quite simple:
<form ... onsubmit="myButtonValue.disabled = true; return true;">

Hey this works,
$(function(){
$(".submitBtn").click(function () {
$(".submitBtn").attr("disabled", true);
$('#yourFormId').submit();
});
});

As a number of people have pointed out, disabling the submit button has some negative side effects (at least in Chrome it prevents the name/value of the button pressed from being submitted). My solution was to simply add an attribute to indicate that submit has been requested, and then check for the presence of this attribute on every submit. Because I'm using the submit function, this is only called after all HTML 5 validation is successful. Here is my code:
$("form.myform").submit(function (e) {
// Check if we have submitted before
if ( $("#submit-btn").attr('attempted') == 'true' ) {
//stop submitting the form because we have already clicked submit.
e.preventDefault();
}
else {
$("#submit-btn").attr("attempted", 'true');
}
});

Test with a setTimeout, that worked for me and I could submit my form, refers to this answer https://stackoverflow.com/a/779785/5510314
$(document).ready(function () {
$("#btnSubmit").click(function () {
setTimeout(function () { disableButton(); }, 0);
});
function disableButton() {
$("#btnSubmit").prop('disabled', true);
}
});

Reading the comments, it seems that these solutions are not consistent across browsers.
Decided then to think how I would have done this 10 years ago before the advent of jQuery and event function binding.
So here is my retro hipster solution:
<script type="text/javascript">
var _formConfirm_submitted = false;
</script>
<form name="frmConfirm" onsubmit="if( _formConfirm_submitted == false ){ _formConfirm_submitted = true;return true }else{ alert('your request is being processed!'); return false; }" action="" method="GET">
<input type="submit" value="submit - but only once!"/>
</form>
The main point of difference is that I am relying on the ability to stop a form submitting through returning false on the submit handler, and I am using a global flag variable - which will make me go straight to hell!
But on the plus side, I cannot imagine any browser compatibility issues - hey, it would probably even work in Netscape!

This is the edited script, hope it helps,
<script type="text/javascript">
$(function(){
$("#yourFormId").on('submit', function(){
return false;
$(".submitBtn").attr("disabled",true); //disable the submit here
//send the form data via ajax which will not relaod the page and disable the submit button
$.ajax({
url : //your url to submit the form,
data : { $("#yourFormId").serializeArray() }, //your data to send here
type : 'POST',
success : function(resp){
alert(resp); //or whatever
},
error : function(resp){
}
});
})
});
</script>

I put this in my global code to work on all submit buttons:
$("input[type='submit']").on("click", function (e) {
$(this).attr("disabled", true);
$(this).closest("form").submit()
});

My problem was solved when i add bind section to my script file.
Totally i did this 2 steps :
1 - Disable button and prevent double submitting :
$('form').submit(function () {
$(this).find(':submit').attr('disabled', 'disabled');
});
2 - Enable submit button if validation error occurred :
$("form").bind("invalid-form.validate", function () {
$(this).find(':submit').prop('disabled', false);
});

Not that I recommend placing JavaScript directly into HTML, but this works in modern browsers (not IE11) to disable all submit buttons after a form submits:
<form onsubmit="this.querySelectorAll('[type=submit]').forEach(b => b.disabled = true)">

I went through a lot of solutions for my problem statement and I think most of the people here are also answering the same.
Generally, when you do a server side form submit, there is a chance of user clicking the button multiple times which leads to multiple submissions. So, to prevent that, the button should be disabled after the first submit. This is what worked for me in the most elegant way.
We have a form submit event <form onsubmit="onFormSubmitted()"></form>.
In onFormSubmitted() disable your submit button or do any operations required.
Handing this way retains your html validations as well as it disables the button once the form submit is triggered when first click of button takes place.
function onSubmit() {
$('.btn_submit').attr('disabled', true);
}
<form class="contact_form" method="POST" autocomplete="off" onsubmit="onSubmit()">
<input name="email" id="email">
<button class="btn_submit" type="submit">Submit</button>
</form>
Alternatively, you can also make global form submit handler for forms throughout the project.
$('form').on('submit', function() {
$(this).find(":submit").prop('disabled', true);
});

$(document).ready(function() {
$(body).submit(function () {
var btn = $(this).find("input[type=submit]:focus");
if($(btn).prop("id") == "YourButtonID")
$(btn).attr("disabled", "true");
});
}

$(function(){
$("input[type='submit']").click(function () {
$(this).attr("disabled", true);
});
});
thant's it.

Form fields value get reset without page load

Following is my code in which i am trying to accomplish, when user clicks on the submit button then my javascript function sets all the value to null in the textfields of the form whose id='contact_form' without loading the page . Kindly let me know how can i modify the following code to accomplish the functionality i've been trying to do.
Thanks!!
<script type='text/javascript'>
$(document).ready(function(){
$('#love').click(function(e) {
document.contact_form.name.value = '';
alert('aloha!!');
//stop the form from being submitted (not working fine)
e.preventDefault();
}
}
</script>
<form name='abc' action='' id='abc' >
<input type="submit" id='love' />
</form>
I have also tried the following function it worked fine but its not preventing from the page load
<script type='text/javascript'>
function js(){
document.contact_form.name.value = '';
//stop the form from being submitted (NOT WORKING!!)
preventDefault();
}
}
</script>

If you try onsubmit="return false;" in the form tag your form will not be submitted. Unfortunately it will NEVER be submit. Unless you are not planning to submit it via AJAX you have to modify your onsubmit event like this:
<form onsubmit="return callFunction()">
function callFunction() {
if(condition)
return true;
else
return false;
}

$("#abc").submit( function() {
// do everything you want.
return false; //will prevent the reload.
});

To have a function execute when the form submits you have to do something like this;
<form onsubmit="return validate();">
your form here
</form>
Then you can have your check in a function called 'validate()' (or whatever you want to call it)
Make sure the validate() function returns true is the form is allowed to submit, or returns false if the page is not allowed to submit.
Also put id's and names on your input elements, that way you can access them much easier.

Assuming you have an HTML like this :
<form>
<input type="text" id="text" />
<input type="submit" id='submit' value="clear above field without reloading" />
</form>
And you want the text field value to clear when a user submits without reloading using jQuery, then following script will be your remedy :
$(function(){
$('#submit').click(function(){
$('#text').value('');
})
});

A form can be submitted in many ways, not only by clicking on a submit buttons. You should really watch for submit events, and cancel them with preventDefault (instead of click events that might trigger the submit). See #user1359163's answer.
But you problem seem to be document.contact_form.name.value. There is no property contact_form on the document object, so this will raise an error. The preventDefault is not executed, your form gets submitted and you never see the error. Set your debugger to "Stop on errors"!
You might want something like document.forms["contact"], but I don't know your HTML. An id selector for the input element would be the better choice.

jQuery not preventing form from being submitted

I want to prevent a form from being submitted using jQuery and instead run a function when the user wants to submit.
Here's my forms markup:
<form action="" method="post" id="msg-form">
<p><textarea name="msg"></textarea><input type="submit" value="Send"></p>
</form>
And my Javascript code:
$('#msg-form').submit(function() {
return false;
}
However, when I press the submit button, the form still gets sent and the page refreshes. How can I properly prevent the form from submitting?

It seems the event handler is not even executed, thus I assume the form could not have been found. Try enclosing your code within handler executed when the DOM is ready. In jQuery it can be simply done like that:
$(function(){
$('#msg-form').submit(function(event) {
event.preventDefault();
// code executed when user tries to submit the form
});
});
Also, as you can see above, you can prevent default behaviour of the form when it is being submitted.

The submit event is not actually being bound to the form element. You may have forgotten to bind it after the DOM was loaded!
Put the event binding inside of $(document).ready(function() { or load the script at the bottom of the page (after all of the elements have loaded).

$('#msg-form').submit(function(e){
e.preventDefault();
});

You could not give the users a real submit button and only submit the form using JS after validation:
HTML
<form action="" method="post" id="msg-form">
<p><textarea name="msg"></textarea><input id="submit" type="button" value="Send"></p>
</form>
JS
$('#submit').on('click', function() {
// validate
$('#msg-form')[0].submit();
});

Try:
$("#msg-form").submit(function (e) {
e.preventDefault();
});

This works
<form action='' onsubmit="return false;">
As does this
<form action='' onsubmit="doSomeWork();return false;">