Develop Reference

Cancel a $('form').submit() call in jQuery

I'm in trouble when I use form submit event in jQuery.
Markups
<form>
<input type="text" name="username" />
<a id="btn_submit">Submit</a>
<input type="submit" />
</form>
Event listener
function valid() { return false; }
$('form').submit(function() {
if(!valid()) {
return false;
}
});
Then, when I click that <input type="submit" /> it do trigger that event, and can cancel the submit event.
But when I trigger the form submit on the .btn_submit tag, return false cannot cancel the submit.
Failure of cancel
$('#btn_submit').click(function() {
$('form').submit();
// $('form').trigger('submit');
// document.forms[0].submit();
});
So, now the question is, if I must use an a.btn_submit to trigger the submit of form, and I want to cancel that submit in case.
How should I trigger?
How should I cancel?
Please help!
I made a fiddle http://jsfiddle.net/69wcduv5/2/.
But it seemed cannot submit in jsfiddle.
My final solution (a bit dirty)
I can create a submit input inside the form, then trigger a click on it. Then remove it.
If I trigger the submit in this way, I acts exactly the same as I expected:
The validation code inside the $('form').submit(function() {}); don't have to change.
If the form has something like <input type="text" required />, it can do well.
I can style well on that anchor. Not the f**king <input type="submit" />
Thank you all for your patient, best regards.
And hoping for a clean better solution.

$("a.btn_submit").click(function(){
if($('form').valid())
{
$('form').submit();
}
});

$('form').submit(function(event) {
if(!valid()) {
event.preventDefault();
}
});

Seems weird to use a link to submit a form, but your problem is you are not cancelling the click action on the anchor.
$('.btn_submit').on("click", function(evt) {
evt.preventDefault();
$('form').submit();
});

I understand now what you are trying to achieve, so please ignore what I wrote before.
formElement.submit() and its jQuery equivalent very deliberately do not trigger an onsumbit event. Othwise there is the potential for infinite recursion.
Therefore, you cannot execute $('form').submit(); and hope for an onsubmit handler to intercept.
Your best bet is probably your "dirty" idea. Namely to trigger a click on a (hidden) type="submit" button.

Call the submit in this way, the most close to my intention:
$.fn.natural_submit = function() {
if($(this).is('form')) {
var $form = $(this);
var $input_submit = $('<input type="submit" />').hide().appendTo($form);
$input_submit.trigger('click');
$input_submit.remove();
}
}
$('#btn_submit').click(function() {
$('form').natural_submit();
});

Submit Form-data after delay, on hitting a submit-button?

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/

Why is onsubmit="" so slow?

I was using this first:
HTML:
<form onsubmit="return validate()">
...
<input type="submit" id="submit-button"/>
</form>
JS:
function validate() {
// many lines for a big validation with regex and so on...
$('form').submit();
}
I noticed, that this was loading very long, so I changed it to:
HTML:
<form>
...
<input type="submit" id="submit-button"/>
</form>
JS:
function validate() {
// many lines for a big validation with regex and so on...
$('form').submit();
}
$('#submit-button').on('click', function(e) {
e.preventDefault();
validate();
});
And the loading time was OK and about 100 times faster!
Can someone give me a - hopefully - short answer to this?

On the first example, you are firing a submit event inside the submit callback, then the call stack exceeds [see fiddle].
The second example relies on a click event, so things seem to work, but you should better fire your HTTP call via ajax after validation.

Your function is called validate(), but I don't see any validation, just a submit event. The thing is, the way you have it set-up is wrong. validate() should be returning true/false so the form knows if it should continue or not. So instead, your validate function should look more like this:
function validate() {
//many lines for a big validation with regex and so on...
if (val=='') { return false; }
else { return true; }
}
Now your form will only submit when the validate() function returns true, otherwise, it will not continue. This will fix your issue, so you are not looping out.

How to Prevent Users from Submitting a Form Twice

<input type="submit" name="btnADD" id="btnADD" value="ADD"/>
when user click add button twice, from get submitted twice with same data into table.
So Please help me to restrict user to submit from twice.

Once the form is submitted, attach a handler with jQuery that hijacks and "disables" the submit handler:
var $myForm = $("#my_form");
$myForm.submit(function(){
$myForm.submit(function(){
return false;
});
});
Returning "false" from the submit handler will prevent the form from submitting. Disabling buttons can have weird effects on how the form is handled. This approach seems to basically lack side effects and works even on forms that have multiple submit buttons.

try out this code..
<input type="submit" name="btnADD" id="btnADD" value="ADD" onclick="this.disabled=true;this.value='Sending, please wait...';this.form.submit();" />

You can disable the button after clicking or hide it.
<input type="submit" name="btnADD" id="btnADD" value="ADD" onclick="disableButton(this)"/>
js :
function disableButton(button) {
button.disabled = true;
button.value = "submitting...."
button.form.submit();
}

If you are working with java server side scripting and also using struts 2 then you refer this link which talks about on using token.
http://www.xinotes.org/notes/note/369/
A token should be generated and kept in session for the initial page render, when the request is submitted along with the token for the first time , in struts action run a thread with thread name as the token id and run the logic whatever the client has requested for , when client submit again the same request, check whether the thread is still running(thread.getcurrentthread().interrupted) if still running then send a client redirect 503.
And if you are not using any framework and looking for simple workout.
You can take help of the
java.util.UUID.randomUUID();
Just put the random uuid in session and also in hidden form field and at other side(the jsp page where you are handling other work like storing data into database etc.) take out the uuid from session and hidden form field, If form field matches than proceed further, remove uuid from session and if not than it might be possible that the form has been resubmitted.
For your help i am writing some code snippet to give idea about how to achieve the thing.
<%
String formId=(java.util.UUID.randomUUID()).toString();
session.setAttribute(formId,formId);
%>
<input type='hidden' id='formId' name='formId' value='<%=formId%>'>

You could notify the user that he drinks too much coffee but the best is to disabled the button with javascript, for example like so:
$("#btnADD").on('click', function(btn) {
btn.disabled = true;
});

I made a solution based on rogueleaderr's answer:
jQuery('form').submit(function(){
jQuery(this).unbind('submit'); // unbind this submit handler first and ...
jQuery(this).submit(function(){ // added the new submit handler (that does nothing)
return false;
});
console.log('submitting form'); // only for testing purposes
});

My solution for a similar issue was to create a separate, hidden, submit button. It works like so:
You click the first, visible button.
The first button is disabled.
The onclick causes the second submit button to be pressed.
The form is submitted.
<input type="submit" value="Email" onclick="this.disabled=true; this.value='Emailing...'; document.getElementById('submit-button').click();">
<input type="submit" id='submit-button' value="Email" name="btnSubmitSendCertificate" style='display:none;'>
I went this route just for clarity for others working on the code. There are other solutions that may be subjectively better.

You can use JavaScript.
Attach form.submit.disabled = true; to the onsubmit event of the form.
A savvy user can circumvent it, but it should prevent 99% of users from submitting twice.

You can display successful message using a pop up with OK button when click OK redirect to somewhere else

Disable the Submit Button
$('#btnADD').attr('disabled','disabled');
or
$('#btnADD').attr('disabled','true');

When user click on submit button disable that button.
<form onSubmit="disable()"></form>
function disable()
{
document.getElementById('submitBtn').disabled = true;
//SUBMIT HERE
}

Create a class for the form, in my case I used: _submitlock
$(document).ready(function () {
$(document).on('submit', '._submitlock', function (event) {
// Check if the form has already been submitted
if (!$(this).hasClass('_submitted')) {
// Mark the form as submitted
$(this).addClass('_submitted');
// Update the attributes of the submit buttons
$(this).find('[type="submit"]').attr('disabled', 'disabled');
// Add classes required to visually change the state of the button
$(this).find('[type="submit"]').addClass("buttoninactive");
$(this).find('[type="submit"]').removeClass("buttonactive");
} else {
// Prevent the submit from occurring.
event.preventDefault();
}
});});

Put a class on all your buttons type="submit" like for example "button-disable-onsubmit" and use jQuery script like the following:
$(function(){
$(".button-disable-onsubmit").click(function(){
$(this).attr("disabled", "disabled");
$(this).closest("form").submit();
});
});
Remember to keep this code on a generic javascript file so you can use it in many pages. Like this, it becomes an elegant and easy-to-reuse solution.
Additionally you can even add another line to change the text value as well:
$(this).val("Sending, please wait.");

Add a class to the form when submitted, stopping a user double clicking/submitting
$('form[method=post]').each(function(){
$(this).submit(function(form_submission) {
if($(form_submission.target).attr('data-submitted')){
form_submission.preventDefault();
}else{
$(form_submission.target).attr('data-submitted', true);
}
});
});

You can add a class to your form and your submit button and use jquery:
$(function() {
// prevent the submit button to be pressed twice
$(".createForm").submit(function() {
$(this).find('.submit').attr('disabled', true);
$(this).find('.submit').text('Sending, please wait...');
});
})

None of these solutions worked for me as my form is a chat and repeated submits are also required. However I'm surprised this simple solution wasn't offered here which will work in all cases.
var sending = 0;
$('#myForm').submit(function(){
if (sending == 0){
sending++;
// SUBMIT FORM
}else{
return false;
}
setTimeout(function(){sending = 0;},1000); //RESET SENDING TO 0 AFTER ONE SECOND
}
This only allows one submit in any one second interval.

Perform Javascript action after reset button handles click

How do I perform an action immediately after an <input type="reset"/> has already reset the form elements?

Try :
<input type="reset" onclick="return resetForm();"/>
function resetForm(){
setTimeout(function(){
// do whatever
}, 50);
return true;
}

Forms have a reset event that you can listen for.
<script>
function resetHandler() {
// code
}
</script>
<form ... onreset="resetHandler();">
</form>
Of course, it's bad practice to add javascript handlers this way, so you'd want to use .addEventListener/.attachEvent or jQuery.bind(), but you get the idea.

Write code/events which you wanted to call in middle of this function. I have tested this. Working good.
$(document).ready(function() {
$("input:reset").click(function() { // apply to reset button's click event
this.form.reset(); // reset the form
// call your functions to be executed after the reset
return false; // prevent reset button from resetting again
});
});

You always can use jQuery, or do some tricks with form reset event itself.