Process a Form Submit with Multiple Submit Buttons in Javascript

Question

I have a form with multiple submit buttons, and I'd like to capture when any of them are pressed, and perform different JS code for each one.

<form id="my-form">
    <input type="email" name="email" placeholder="(Your email)" />
    <button type="submit" value="button-one">Go - One</button>
    <button type="submit" value="button-two">Go - Two</button>
    <button type="submit" value="button-three">Go - Three</button>
</form>

Looking at an older answer, I can process all of the submit buttons in JS:

function processForm(e) {
    if (e.preventDefault) e.preventDefault();

    /* do what you want with the form */

    // You must return false to prevent the default form behavior
    return false;
}

var form = document.getElementById('my-form');
if (form.attachEvent) {
    form.attachEvent("submit", processForm);
} else {
    form.addEventListener("submit", processForm);
}

But how can I discriminate amongst the different submit buttons? Is there a way to get the value and perform logic from there?

I don't need to have three submit buttons, per se... I just need three different buttons in a form to perform three different actions.

Thanks!

Banana · Accepted Answer · 2014-09-25 13:34:58Z

9

you can attach a custom click handler to all buttons, and that way you can check which button is clicked before submitting the form:

Live Example

$("#my-form button").click(function(ev){
    ev.preventDefault()// cancel form submission
    if($(this).attr("value")=="button-one"){
        //do button 1 thing
    }
    // $("#my-form").submit(); if you want to submit the form
});

edited Sep 25, 2014 at 13:34

answered Sep 25, 2014 at 13:20

Banana

7,4843 gold badges25 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Berto Over a year ago

This works well! I can remove the attachEvent stuff and already have jQuery so I might as well use it. Thanks!

Pragnesh Karia Over a year ago

I hope this helps you , Jsfiddle code is here : jsfiddle.net/pragneshkaria/eusyrdmy/2

swimmer · Accepted Answer · 2022-02-16 17:16:29Z

You can also use the read-only submitter property of a SubmitEvent.

HTML (same as you have):

<form id="my-form">
    <input type="email" name="email" placeholder="(Your email)" />
    <button type="submit" value="button-one">Go - One</button>
    <button type="submit" value="button-two">Go - Two</button>
    <button type="submit" value="button-three">Go - Three</button>
</form>

JS:

let form = document.getElementById("my-form");
form.addEventListener("submit", handleSubmit);

function handleSubmit(event) {
    event.preventDefault()
    alert(event.submitter.value) // shows a different value depending on button pressed

From there on, it's easy to use submitter as a control flow, e.g.:

let form = document.getElementById("my-form");
form.addEventListener("submit", handleSubmit);

function handleSubmit(event) {
    event.preventDefault()
    submitter = event.submitter.value
    switch (submitter) {
        case "button-one":
            alert(1)
            break;
        case "button-two":
            alert(2)
            break;
        case "button-three":
            alert(3)
            break;
    }

}

aM-Vee · Accepted Answer · 2014-09-25 13:27:30Z

1

use this

function processForm(e) {
if (e.preventDefault) e.preventDefault();
/* do what you want with the form */
var submit_type = document.getElementById('my-form').getAttribute("value");
if(submit_type=="button-one"){

}//and so on
// You must return false to prevent the default form behavior
return false;
}

answered Sep 25, 2014 at 13:27

aM-Vee

4032 silver badges10 bronze badges

Comments

sauravjoshi23 · Accepted Answer · 2021-03-24 18:35:34Z

1

HTML:

<form id = "form" onSubmit = {handleSubmit}>
<input type="email" name="email" placeholder="(Your email)" />
<button type="submit" value="button-one">Go - One</button>
<button type="submit" value="button-two">Go - Two</button>
<button type="submit" value="button-three">Go - Three</button>
</form>

JS:

const handleSubmit = e => {
    e.preventDefault();

    var ans = document.activeElement['value'];
    console.log(ans);
};

answered Mar 24, 2021 at 18:35

sauravjoshi23

88711 silver badges10 bronze badges

1 Comment

curious.netter Over a year ago

Didn't know about activeElement before. This helped me as I had multiple dynamic forms as well as all input fields in the form were dynamic. Moreover, I had two submit-type buttons. I was using jquery's serializedArray() to get all the values of the form using $("form").submit and reading using $(this). activeElement helped me to get the type of submit button clicked. Thanks.

Matt Styles · Accepted Answer · 2014-09-25 13:22:54Z

0

But how can I discriminate amongst the different submit buttons? Is there a way to get the value and perform logic from there?

Yes, you can use querySelector to grab elements with attributes.

document.querySelector('#my-form button[value="button-one"]' )

answered Sep 25, 2014 at 13:22

Matt Styles

2,4621 gold badge19 silver badges23 bronze badges

1 Comment

ricdesi Over a year ago

This allows you to target the individual buttons, but doesn't use logic based on which button submitted the form.

Collectives™ on Stack Overflow

Process a Form Submit with Multiple Submit Buttons in Javascript

5 Answers 5

2 Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related