Submit form with jquery which has multiple submit buttons without click trigger?

Question

Imagine this :

<form id="form"> 
    <input type="text">
    <button type="submit" name="submit1" value="1">something1</button>
    <button type="submit" name="submit2" value="2">something2</button>
    <button type="submit" name="submit3" value="3">something3</button>
</form>

First of all when I write $('#form').submit() which submit value will be sent? the first one?

Second of all How can I submit the form without the click trigger event with the value I want? Is it possible at all? For example submitting the form with the 2 submit value.

The reason I want do this is to have confirmation popup with sweetalert before sending my form so here it is :

$('form').on('submit',function(e){
    form = $(this);
    e.preventDefault();
    swal({'some dialog'},function(isConfirm)
        {
            if(isConfirm)
                 form.submit;
                 \\If I use the click trigger I will get stuck in here again.
        })
});

On $('#form').submit(), all submit values will be sent if you have provided different name for the buttons — Aju John, Mar 16 '16 at 13:26
What do you mean "sent"? jQuery `.submit()` is simply an event handler. Only the event is passed to it, not the form. — Carol Skelly, Mar 16 '16 at 13:29
Imagine I want to submit the form with the second submit button. like pressing the second submit button, but without the click trigger. — Arman Momeni, Mar 16 '16 at 13:29
`which submit value will be sent?` The default submit button which [spec](https://www.w3.org/TR/html5/forms.html#implicit-submission) says the first one in DOM order. Now your second question is unclear, why don't you simply trigger click event??? — A. Wolff, Mar 16 '16 at 13:30
@A.Wolff Is there anyway I can change it to the second one? I can't do it because I'm adding some validation with sweetalert so If do send it with click trigger it will become a loop. — Arman Momeni, Mar 16 '16 at 13:31
@ArmanMomeni Ya, before submiting form, set the second one as the first one, still in DOM order or better just disabled any previous submit button(s) — A. Wolff, Mar 16 '16 at 13:31
How are you submitting the form to the server? Do you intend to use an `action=` or are you using a jQuery ajax http method? — Carol Skelly, Mar 16 '16 at 13:34

tenbits · Answer 1 · 2016-03-16T14:14:51.823

There is an alternative - use the FormData You can create an instance of a FormData, add your html form, modify entries, and send it. Everything is under your control here then.

EDIT: Based on your edit, it seems you have the problem of resubmitting the form. You can handle it like this.

var form = document.querySelector('form');
form.addEventListener('submit', {
    confirmed: false,
    handleEvent: function (event) {
        if (this.confirmed)
            return;

        event.preventDefault();
        doconfirm((confirmed) => {
            if (confirmed) {
                this.confirmed = true;
                form.submit();
            }
        })
    }
}, false);

Or you can solve your problem by unbinding the submit handlers after validation and submit it again: $('form').off('submit').submit()

score 0 · Answer 2 · edited May 23 '17 at 11:51

As @Scott Marcus explained, the value of named buttons will be submitted when the form is sent to the server. However in your case, this won't help because you want to perform some logic before submitting it to the server.

The issue is that jQuery has no way to determine which button was clicked because it doesn't provide the submit button values when you look at the form data via $.serialize(), and there is no easy cross-browser friendly way to check the button that triggered the $.submit() event without using click.

So, the only workaround would be to handle the click event of the 3 buttons and store some value that is checked before you submit the form as described in this answer: How can I get the button that caused the submit from the form submit event?

Example: http://codeply.com/go/Wj85swRyfX

Have you come up with something else? – Carol Skelly Mar 17 '16 at 18:29 — Carol Skelly, Mar 17 '16 at 18:29
Yes, look at my answer. – Scott Marcus Mar 17 '16 at 18:35 — Scott Marcus, Mar 17 '16 at 18:35

Scott Marcus · Answer 3 · 2016-03-17T18:04:26.427

-1

Let's take your questions one at a time...

First of all when I write $('#form').submit() which submit value will be sent? the first one?

When a form is submitted, ALL form elements that nave a NAME attribute will submit their value (even if the value is an empty string) to the form's ACTION destination. So, in your case, all 3 of your buttons have a name attribute and so all 3 buttons will submit their name/value pairs.

Usually, we don't put a name attribute on the submit button because we only want it to trigger the submit, not actually use it as a data container. And, we usually include only a single submit button under most circumstances.

Second of all How can I submit the form without the click trigger event with the value I want? Is it possible at all? For example submitting the form with the 2 submit value

You would use:

 $('#form').submit()

to manually cause the submit, but you'd need to have an if() statement that has logic that determines which value is appropriate to submit. Instead of the value being stored in a button, you could use a hidden form field, like this:

<form id="form"> 
    <input type="text">
    <input type="hidden" name="hidden" value="">

    <button type="submit">something3</button>
</form>

JavaScript:

 $("#form").on("submit", function(evt){
     // Stop the form submission process
     evt.preventDefault();


     // Logic that sets hidden input field to correct value:
     if(condition1){
         $("input[type=hidden]").attr("value", "1");
     } else if(condition2) {
         $("input[type=hidden]").attr("value","2");
     } else {
         $("input[type=hidden]").attr("value","3");
     }

     // Manually submit the form
     $("#form").submit();

 });

edited Mar 17 '16 at 18:04

answered Mar 16 '16 at 13:39

Scott Marcus

64,069
6
49
71

This doesn't work for what the OP requested. jQuery still doesn't recognize which submit button has been checked. – Carol Skelly Mar 18 '16 at 13:43
@Skelly There is only one submit button in my example. Did you read my answer? – Scott Marcus Mar 18 '16 at 13:44
Yes, and the OP has multiple submit buttons.. Did you read the question? – Carol Skelly Mar 18 '16 at 13:45
My answer points out that the OP's strategy is wrong. OP never said they must have 3 buttons. The point of the post is how to get one of 3 possible values submitted. In fact, if you READ my answer, you'll see that the OP asked two questions and I answered both of them. – Scott Marcus Mar 18 '16 at 13:48
Really?? Did you READ the title? "Submit form with jquery which has multiple submit buttons..." – Carol Skelly Mar 18 '16 at 13:49
Why are you being so argumentative? I already told you and the OP that the setup was wrong and how to do it correctly. Your approach here is "just answer the question, even if the question is predicated on an incorrect setup". I could point out that your statement that jQuery has no way to determine which button was clicked is completely false, but you don't see me badgering you. – Scott Marcus Mar 18 '16 at 13:52
You're the argumentative one with rude comments and CAPS. You've provided a non-working solution. There is nothing in the HTML spec that states a form must have one submit button. – Carol Skelly Mar 18 '16 at 13:55
There's nothing in the HTML spec. that says that each form element should be in its own form tag, but we all know that's the wrong way to do it. If you don't like my answer down vote it. But, it is the correct approach and it will solve the actual problem at hand. Good luck to you! – Scott Marcus Mar 18 '16 at 13:57
Who is we? There are many scenarios where one would want multiple submit buttons. Provide a fiddle that demonstrates how it *specifically* solves the question the OP asked. You'll find it doesn't work. – Carol Skelly Mar 18 '16 at 14:00

score -2 · Answer 4 · answered Mar 16 '16 at 13:40

-2

I suggest to use hidden input tag to make the logic clear.

answered Mar 16 '16 at 13:40

Tony Luo

110
1
9

Submit form with jquery which has multiple submit buttons without click trigger?

4 Answers4