javascript - Identify the value of clicked submit button with multiple submit buttons - Stack Overflow

admin管理员组

文章数量:1202334

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

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

• javascript
• web-applications

Share Improve this question Follow edited Mar 19, 2013 at 10:58 Harshana asked Mar 19, 2013 at 9:36 HarshanaHarshana 7,6473232 gold badges110110 silver badges182182 bronze badges

Add a comment  | 

8 Answers 8

Sorted by: Reset to default 4

Since 2021, 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:

document.getElementById('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)

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

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

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>

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

you can try with jquery something like :

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

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;

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>

本文标签： javascriptIdentify the value of clicked submit button with multiple submit buttonsStack Overflow