Can I set two values for a submit button?

Question

Note: This is a rewrite of an old post to clarify what was being asked.

Let's suppose I have a single form that displays a set of rows (for example, lines in an order), and I want to place a "delete" button besides each row, but unfortunately I can't create a single form for every row.

In addition let's say that the form goes to a "generic action route" that is the "editCart" controller.

For the sake of the example, let's assume in the form there are several other actions, like for example adding one to the quantity.

This has to be done with multiple submit buttons within the same form.

If it was only one single row, it is easy, just add a name/value to the button and boom! done!.

<form action="/process-edition" method="post">
    <div>My nice things</div>
    <button type="submit" name="subAction" value="delete">Delete</button>
    <button type="submit" name="subAction" value="addOne">+1</button>
</form>

This is saying "hey, controller of the action /process-edition, I'm going to make the subAction delete". Or "the subAction addOne".

But when we have multiple rows, you need to say something like "delete THIS product" or "add one of THIS product".

In this case you need that the button submits like two values: a) the subAction, b) the id of the product to be edited.

<form action="/process-edition" method="post">
    <ul>
        <li>
            Product 1234: 'orange'
            <button type="submit" name="subAction" value1???="delete" value2???=1234>Delete</button>
            <button type="submit" name="subAction" value1???="addOne" value2???=1234>+1</button>
        </li>
        <li>
            Product 6789: 'lemmon'
            <button type="submit" name="subAction" value1???="delete" value2???=6789>Delete</button>
            <button type="submit" name="subAction" value1???="addOne" value2???=6789>+1</button>
        </li>
    </ul>
</form>

I think in this case delete and addOne is what the original post was asking as a "statically assigned value" and the 1234 and 6789 would be the "hidden" values that come from the database. The button "knows" about the Id but does not display the Id itself.

Of course this could be resolved by setting multiple forms to several different controllers with hidden fields in each form. But let's assume you are constricted to a layout that already has the form and you cannot create several forms in it, thus forbidding you to isolate hidden fields to be sent or not sent.

ORIGINAL TEXT OF THE POST:

one value has to be hidden from the user and another has to be displayed.The hidden value is retrieved from the database and the displayed one is statically assigned value?

Answer 1

You can use data- attr

<button type="submit" name="buttonname" data-value="value2" value="Value1">value</button>

then use Element.getAttribute() live DEMO

var buttom = document.querySelector("button");
var dataValue = buttom.getAttribute("data-value");

alert(dataValue);

this way you can set as much value as you want just by add data-*

the best part is you can use

<input type="submit" name="buttonname" data-value3="value3" data-value="value2" value="Value1" />

Demo if you don't like button