0

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.

Community
  • 1
  • 1
abagshaw
  • 6,162
  • 4
  • 38
  • 76
  • What are you using for validation? Generally speaking, I would think that you could add a success handler to your validation code from the click event for your button. – Kevin Aug 13 '15 at 21:51
  • Well basically it's the built in validation. `` and the browser does it itself. Actually using .click doesn't run the function before the validation - it runs the function and completely skips the browser built in validation and just submits the form. Could you elaborate on how to do the success handler? – abagshaw Aug 13 '15 at 21:53

2 Answers2

0

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()
});
Kevin
  • 281
  • 2
  • 7
-1

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.

Rick Viscomi
  • 8,180
  • 4
  • 35
  • 50
  • As you clearly explained that will fire on the `submit` event no matter how it's triggered. However, the OP is asking about how to capture the `submit` event ***only** when it's triggered only by a specific button*. – Sparky Aug 13 '15 at 23:23
  • @Sparky I understand, but had assumed there are multiple forms and only one submit button per form. – Rick Viscomi Aug 13 '15 at 23:36