We Keep Coding

jQuery on Submit of Specific Button [duplicate]

This question already has answers here:
How can I get the button that caused the submit from the form submit event?
(22 answers)
Closed 7 years ago.
Basically my question is very similar to:
Click a specific submit button with JQuery
However, I am not wanting to trigger my event on the button's click, I am wanting to trigger the event on the submit, of the form - but only of a specific button (as I have multiple submit buttons).
How can this be achieved?
Basically I've got this:
$("#btnCompleteOrder").click(function(event) {
//Do stuff here
}
And it works properly - however I want that event to trigger after form validation - so on submit (on click happens before form validation). However I don't think I can do .submit() on a button.
Edit: Yes this is also similar to How can I get the button that caused the submit from the form submit event?
However none of these options worked for me and I was looking for a more elegant solution to fix the problem.

I think I understand the problem now. See if this works for you.
Add an submit button to your form if you don't have one, this is necessary for the HTML5 validation to occur.
<input id="invisibleSubmit" type="submit" class="submit" style="display:none">
Then for your button handler use this:
$('#btnCompleteOrder').click(function(e) {
//don't submit the form
e.preventDefault();
//click the submit button so the html5 validtion occurrs
$("#invisibleSubmit").click();
//do some other stuff
//really submit the form
$(this).unbind('submit').submit()
});

You can use the submit method to bind a handler to a form's submit event.
For example:
$('form').submit(function () {
// Do stuff here.
});
Substitute form for the selector matching the form element.
This approach is better than simply listening for click, as you're probably aware, because a form can be submitted in more ways than just mouse click. A form can also be submitted by hitting enter in a text field or by tabbing to a submit button and hitting the space key. Because of this, you want to bind the event handler on the form itself, not any one UI element like the submit button.

Form validation fails but submits page

I have a form which uses GET as the method. I want to do some js validation on the form. I bind the event using
document.forms[0].onsubmit = function(){return myObj.myFrm.isFormValid();}.
In Firefox it works the first time I click on submit but after a while if I click it again the form submits even though I've not changed and data.
Any ideas?

Simply adding an event handler doesn't stop it from submitting.
You need to add in preventDefault();
(Documentation)

Submit button and jQuery

I was told by someone on this site that it was best not to write inline function calls in your HTML when doing jQuery. It sounds like a good plan.
So using jQuery, how do I call a function upon a button submission?

You mean form submission. And you can do it by binding an onsubmit event handler to your form:
$("#myForm").submit(function() {
// do something
});

Based on your question, there are 2 different events you might want to use.
If you want to capture the button click, then you want the "click" event of the button
If you want the form submit, then you want "submit" event of the form.

$('form[name=myForm]').submit(function(){
// function here
});
jQuery docs on submit();

Others already answered on how to do a form submission, but if you mean you just want to click the button then you would want to use
$('input[name=myButton]').click()
jQuery docs on click();

Ignoring onSubmit when the submit button is clicked

I have a form where I've specified onSubmit="validate()", but I want to ignore the validation if the submit-button was clicked. Is there a good cross-browser way of detecting if the submit button was clicked and thus ignoring the validation?

Why don't you use a button instead of a submit, and set it's action on the click of the button? That way you can control if you want to validate, submit, or whatever else you like.

The submit event only fires if the form is submitted by the user; not if it is submitted via JS.
Therefore:
<input type="submit" onclick="this.form.submit(); return false;">
If JS is not available, this acts like a normal submit button … and the onsubmit still fails to fire as it also requires JS.
(Attaching events using JS instead of intrinsic event attributes is, as usual, preferred by excluded from this example for the sake of clarity)

you can try to use a <input type="button"... with an onClick that submits the form - a javascript .submit() doesn't fire the onSubmit-function of the form.

Did you try this?
<input type="submit" onclick="void(window.validate=function(){return true;})" value="Submit" />

Just return false, or preventDefault from your submit button handler

jQuery override form submit not working when submit called by javascript on a element

I've got a page with a normal form with a submit button and some jQuery which binds to the form submit event and overrides it with e.preventDefault() and runs an AJAX command. This works fine when the submit button is clicked but when a link with onclick='document.formName.submit();' is clicked, the event is not caught by the AJAX form submit event handler. Any ideas why not or how to get this working without binding to all the a elements?

A couple of suggestions:
Overwrite the submit function to do your evil bidding
var oldSubmit = form.submit;
form.submit = function() {
$(form).trigger("submit");
oldSubmit.call(form, arguments);
}
Why not bind to all the <a> tags? Then you don't have to do any monkey patching, and it could be as simple as (assuming all the links are inside the form tag):
$("form a").click(function() {
$(this).parents().filter("form").trigger("submit");
});

If you are using jQuery, you should be attaching events via it's own event mechanism and not by using "on" properties (onclick etc.). It also has its own event triggering method, aptly named 'trigger', which you should use to activate the form submission event.

Thanks Eran
I am using this event binding code
this._form.bind('submit', Delegate.create(this, function(e) {
e.preventDefault();
this._searchFadeOut();
this.__onFormSubmit.invoke(this, new ZD.Core.GenericEventArgs(this._dateField.attr('value')));
});
but there is legacy onclick code on the HTML and I would prefer not to change it as there are just so many links.

This worked for me:
Make a dummy button, hide the real submit with the name submit,
and then:
$("#mySubmit").click(function(){
$("#submit").trigger("click"); });
set an event handler on your dummy to trigger click on the form submit button. let the browser figure out how to submit the form... This way you don't need to preventDefault on the form submit which is where the trouble starts.
This seemed to work around the problem.