How to make form with two buttons submit a different value for each button?

Question

    <form action="here.php" method="POST">
    <input type="text" name="text">
    
    <div id="one">
       <input type="hidden" name="aaa" value="one">
       <input type="submit" value="Send">
    </div>
    
    <div id="two">
       <input type="hidden" name="aaa" value="two">
       <input type="submit" value="Send">
    </div>
    
    </form>

Clicking on Send of div one or div two, the POST data has $_POST['aaa'] = 'two'

Is it possible to make one form with two submit buttons that POST different values?

If I click on div one submit, I would like to receive $_POST['aaa'] = 'one' and if i click on div two submit I would like to receive $_POST['aaa'] = 'two'.

I'm using PHP and jQuery.

I don't want two forms. I don't want multiple <input type="text" name="text">

Lothar

Answer 1

Instead of using hidden inputs, e.g.,

<input type="hidden" name="aaa" value="one">

use a value attribute for each of the buttons, and assign a different value to each of them, e.g.,

<form action="demo_form.asp" method="get">
  Choose your favorite subject:
  <button name="subject" type="submit" value="fav_HTML">HTML</button>
  <button name="subject" type="submit" value="fav_CSS">CSS</button>
</form>

[reference]

Mall

It's usually recommended that the answer be included here, instead of just a link, in case the link no longer works (like for me right now). – Vaden

20 years in the industry and today I learned that a form submit button can have a value too! Thanks @dmon. – Boydboyden

This will work with a single value, but not if you have multiple values to vary. – Publicspirited

Answer 2

You'd need two different forms:

<div id="one">
   <form ...>
      <input type="hidden" name="aaa" value="one">
      <input type="submit" value="Send">
   </form>
</div>

<div id="two">
    <form ...>
       <input ...>
       <input ...>
    </form>
</div>

Standard practice is that when two fields have the exact same name, to use only the LAST value encountered in the form and submit that.

PHP does have a special-case notation (name="aaa[]") to allow submitting multiple values with the same name, but that wouldn't help you here, as that'd submit ALL of the aaa values, not just the one closest to the submit button.

---

HTML form:

<form ...>
<input type="text" name="textfield">

<div id="one">
   <input type="hidden" name="one_data" value="aaa" />
   <input type="submit" name="submit_one" value="Submit" />
</div>

<div id="two">
   <input type="hidden" name="two_data" value="bbb" />
   <input type="submit" name="submit_two" value="Submit" />
</div>
</form>

server-side:

if (isset($_POST['submit_two'])) {
    $data = $_POST['two_data'];
} else if (isset($_POST['submit_one'])) {
    $data = $_POST['one_data'];
} else {
    die("Invalid submission");
}

Abamp

this is OK, but i dont want showing two times on my page <input type="text" name="text"> – Lothar

You can alway use some javascript to copy that one input field's value into another hidden field in both forms when it's submitted. But as your form is structured right now, there's no way around this. There's OTHER tricks you can use, like giving each field unique names, and use that fact to detect which submit button was clicked, and then access only the appropriate value. – Abamp

thanks for edit (+1), but what if this submit button is for example 20? i must check this seperately? – Lothar

You mean 20 different submit buttons? Ouch, yes, you'll have to check each one. – Abamp

Answer 3

Alternatively, instead of two submit buttons, use a radio list with two options and one submit button.

Dzoba

Answer 4

Try this:

in html-

    <input id="PreviousButton" value="Previous" type="submit" />
    <input id="NextButton" value="Next" type="submit" />

    <input id="Button" name="btnSubmit"  type="hidden" />

in jOuery-

        $("#PreviousButton").click(function () {
            $("#Button").val("Previous");
        });

        $("#NextButton").click(function () {
            $("#Button").val("Next");
        });

then you can see in the form results - what "Button" contains.

Samaveda

Answer 5

Yes, you can achieve that. You could separate the fields you want to POST as separate fields and trigger a change on them before you submit:

function clickbutton() {
    let context = this.parentNode.parentNode;
    for (let element of this.parentNode.querySelectorAll("[data-content]")) {
        context.querySelector("[name=" + element.getAttribute('data-content') + "]").value = element.value;
    }
}

for (let btn of document.getElementById("my-form").querySelectorAll("input[type=submit]")) btn.addEventListener("click", clickbutton);

    <form action="here.php" method="POST" id="my-form" onsubmit="return false;">
    <input type="text" name="text">
    <input type="text" name="aaa">
    <div id="one">
       <input type="text" data-content="aaa" value="one">
       <input type="submit" value="Send">
    </div>
    
    <div id="two">
       <input type="text" data-content="aaa" value="two">
       <input type="submit" value="Send">
    </div>
    
    </form>

In the snippet above I did the following:

• created the clickbutton function
  • that will find the form and store it into a variable called context
  • loops the elements of the parent node of the button having an attribute for data-context
    • set the value of the form element whose name matches the value you have for data-content (aaa) to the one whose value is meant for it inside the section

This happens before the form is submitted. Now, I have made your elements text instead of hidden for illustrative purposes, you can change them back whenever you want. I have also made the form not to submit just to make the experiment easy to watch, you can remove the onsubmit event too.

Eventually your named element (name="aaa") will be submitted, but before that, it is being set to the value you expect it to have.

Publicspirited