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.

Yii and Javascript form submission

I'm using Yii as a PHP framework for my site. Additionally, my site uses some js/jquery like, say, a jQuery UI Dialog widget (except for those dialogs, the rest of the code is pure normal html form components and jQuery code for the event handlers).
In the Yii side, I use CForms to build my forms from specifications file.
When I test if the form was submitted, I must do it for a certain button. This is not only forced, but I also take advantage of it.
if ($myCFormInstance->submitted('approve')) {
//process approval code
} else if ($myCFormInstance->submitted('reject')) {
//process rejection code
}
The actual problem I have is a bit conceptual one, since -fortunately- I know what's going on with my code and -again, fortunately- know the problem root:
Somewhere in My code I intercept the submit button's click event:
$(function(){
$(".critical-action").click(function(e){
var form = $(this).closest("form");
e.preventDefault();
e.stopImmediatePropagation();
confirmDialog("¿Continuar?", "#critical-action-dialog", function(){
form.submit();
});
});
});
Say the .critical-action classed elements are always a submit button in a form.
The intention of the code: cancel the form submission, and perform it only if the user -in the dialog- clicks the "Yes, Continue" (i.e. confirming the action) button.
This code works as expected, and have no problems at a javascript level BUT -and here goes my issue- when doing form.submit(), the button is not sent as part of the form. This is obvious: I'm sending the form without specifying any button. In the case of Approve and Reject, which have two buttons, the example explains itself: if the form.submit() call could send their buttons ¿which of them should send?.
Question: So, since form.submit() doesn't send any button, but I actually need buttons ¿how can I send the form "with the corresponding button" -i.e. a button I choose to specify, which should correspond to this in the click handler function context- automatically via javascript? The button NEEDS to be identified by Yii in order to process the form (specially with the Approve and Reject case).

If you added a hidden input to the form, you can modify the input value with jQuery before you submit the form, like this:
$("#inputID").val('approve');
If you want to set the value to the value of the clicked button via $(this).val(), be aware of the issue that could result in an IE browser, explain here. The second answer (by postpostmodern) has a solution to this issue.

Preventing multiple form submits

I am submitting a form using JQuery and an event listener bound to a div (not an input field) and I am trying to prevent multiple submits, so the customer does not get overcharged. I am trying to accomplish this by removing the submit-button class of the clicked div, so the next time the user clicks it, JQuery won't listen to the event that is associated with the submit-button preventing multiple submits.
Using the implementation below however, for some reason, does not prevent multiple submits, as intended.
HTML
<div class="submit-button button-style">Submit</div>
JQuery
$(".submit-button").click(function(){
$(this).removeClass("submit-button");
//**submit form**
});
NOTE: I must stick to a solution that uses the html above, so solutions using an input element of type submit, will not be useful.
I appreciate any suggestions on how to make this work. Many thanks in advance!

You can make use of .one() to prevent it from firing multiple times -
$(".submit-button").one('click',function(){
//**submit form**
});
http://api.jquery.com/one/
Edit :
In case of error :
function submitForm(){
//**submit form**
$.post('submit.php').error(function(){
// rebind event on error
$(".submit-button").one('click',submitForm);
});
}
$(".submit-button").one('click',submitForm);

You could use something like:
$('something').one('click', function(){
// submit code
});
Which will only fire once.

A significant portion of users don't bother clicking the submit button to submit a form - there's other more convenient ways, like hitting the enter key when the cursor focus is on a form field.
A more robust approach is to block the form via the forms submit event, and maintain a variable to keep track of the form submission state.
var submitted = false;
$("form#myForm").submit(function(evt){
if (submitted) {
evt.preventDefault();//stops form submission
return;
}
submitted = true;
});
I omitted form validation for this example.

Javascript Submit form with custom button?

Imagine an HTML form with multiple submit buttons,
Im trying to write javascript function to submit this form with one specific button,
usually we use:
form.submit();
but it doesnt specify which button is pressed,
any Ideas?

Just fire it directly?
document.querySelector("#someButton").onclick();
Or if you're wanting to fire the submit button directly of a form, why not
document.querySelector("#someForm input[type='submit']").onclick();

Using jQuery, you'd submit the form in an event handler that is bound to the click event on the desired button:
$('.trueSubmitFormButton').click(function(){
form.submit();
});

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();