Identify the value of clicked submit button with multiple submit buttons

Question

I have situation where i need to track which submit button click in order to do set variables according to that. Below is the test code,

<script>
function submitForm(form) {
    alert(document.getElementById('sb').value);
    if (document.getElementById('sb').value=="One") {
        //Do something
    }
    return true;
}
</script>


<form action="" method="get" onsubmit="return submitForm(this);">
    <input type="submit" name="sb" value="One">
    <input type="submit" name="sb" value="Two">
    <input type="submit" name="sb" value="Three">
</form>

The alert always shows One even if i click button Two or Three. But the url change with clickable parameter. How to alert the value which is in the clickable submit button?

Note: I want a solution with out JQuery

EDIT: I change the code bit which the onsubmit call the submitForm(this); The problem is even use document.forms[0].sb.value its undefined because document.forms[0].sb return a node list of all submit buttons as its same as with document.getElementById('sb')

score 2 · Answer 1 · answered Sep 15 '19 at 14:21

Here is what I think is a simpler solution to this problem. It does not require any extra events.

<script>
function submitForm(form) {
    console.log(document.activeElement.value);
    if (document.activeElement.value == 'One') {
       console.log("Have one.");
       return false;
    }
    return true;
}

</script>


<form action="" method="get" onsubmit="return submitForm(this);">
    <input type="submit" name="sb" value="One">
    <input type="submit" name="sb" value="Two">
    <input type="submit" name="sb" value="Three">
</form>

jsfiddle

What I would like an answer to is how the form is getting the query set to "?sb={value}".

score 1 · Answer 2 · answered Mar 19 '13 at 09:45

1

I would suggest you to use buttons, instead of multiple submit buttons. In the onclick attribute of the buttons, submit the form using javascript.

answered Mar 19 '13 at 09:45

A human being

1,220
8
18

score 1 · Answer 3 · answered Oct 15 '14 at 11:51

You can try like this,

    <form>
        <input class="myButton" type="submit" name="sb" value="One">
        <input class="myButton" type="submit" name="sb" value="Two">
        <input class="myButton" type="submit" name="sb" value="Three">
    </form>

    <script type="text/javascript">
        $(".myButton").on('click', function() {
        alert($(this).val());
        });
    </script>

score 0 · Answer 4 · answered Mar 19 '13 at 09:46

0

you can try with jquery something like :

$(":submit").live('click', function() {
    alert($(this).val());
})

answered Mar 19 '13 at 09:46

Francois Borgies

2,378
31
38

score 0 · Accepted Answer · answered Mar 19 '13 at 09:53

Continuing the answer above:

<script>
function m(value) {
alert(value);
}
</script>

<input type="button" value="One" onClick="m(this.value)">
<input type="button" value="Two" onClick="m(this.value)">
<input type="button" value="Three" onClick="m(this.value)">

You can of course see what's the id:

<input type="button" id='myId' value="Three" onClick="m(this.id)">

score 0 · Answer 6 · edited Dec 11 '15 at 10:00

0

I'm a bit new to javascript; please forgive me if I'm wrong on this. Wouldn't it make a difference if your if statement had a 3rd = sign?

Should it be:

if (document.getElementById('sb').value === "One") {
  //Do something
}
return true;

edited Dec 11 '15 at 10:00

Anders

8,307
9
56
88

answered Dec 11 '15 at 06:48

brehma

206
1
11

score 0 · Answer 7 · answered Jan 12 '21 at 01:45

This is a non-jquery, simple solution for detecting which submit button was clicked.

    <script>
function submitForm(form) {
    console.log(document.getElementById('btn_clicked').value);
    if (document.getElementById('btn_clicked').value === 'One') {
       console.log("Have one.");
       return false;
    }
    return true;
}
</script>

<form action="" method="get" onsubmit="return submitForm(this);" ;">

    <input type="hidden" name="btn_clicked" id="btn_clicked" value="">
    <input type="submit" name="sb" value="One" onclick="document.getElementById('btn_clicked').value='One';">
    <input type="submit" name="sb" value="Two" onclick="document.getElementById('btn_clicked').value='Two';">
</form>

score 0 · Answer 8 · answered May 24 '23 at 23:04

The modern way is to use the submitter property of the submit event:

submitter

An HTMLElement object which identifies the button or other element which was invoked to trigger the form being submitted.

Example:

myForm.addEventListener('submit', (event) => {
  event.preventDefault();
  console.log('You pressed', event.submitter.value);
})

<form id="myForm">
  <button value="One">One</button>
  <button value="Two">Two</button>
  <button value="Three">Three</button>
</form>

Supported by all modern browsers (IE is not modern)

Identify the value of clicked submit button with multiple submit buttons

8 Answers8