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')

Answer 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.

Answer 2

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>

Answer 3

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;

Answer 4

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}".