How can I implement a JavaScript that submit this form according to the clicket button?

Question

I have the following problem that I can't solve:

I have this form into an HTML table:

<th width = "8.33%">
    <form id="actionButton" action="salwf.do?serv=1" method="post">
        <button name="accept" value="Accept" type="submit" class="acceptButton">ACCEPT ICON BUTTON</button>
        <button name="cancel" value="Cancel" type="submit" class="cancelButton">CANCEL ICON BUTTON</button>
        <button name="sap" value="SAP" type="submit" class="sapButton">SAP ICON BUTTON</button>
        <input id="testId" name="test" type="hidden">
    </form>
</th>

As you can see this form contains three jQuery button elements and an hidden input tag.

I need to create a JavaScript that do the following operations: when the user click on one of the previous three buttons it take the value of the clicked button (Accept or Cancel or SAP) and submit it (in a POST request).

Can I do something like this using JavaScript? How can I implement it?

Why do you need it? Clicked button will be available in POST parameters anyway along with its value. — dfsq, Dec 01 '14 at 15:11
Why do you need JavaScript? The form *already does that*! (And those are HTML buttons, not jQuery buttons). — Quentin, Dec 01 '14 at 15:18
a `
` inside ``..? Your table's heading are ``'s.? strange... — T J, Dec 01 '14 at 16:08
@Quentin judging the the `jquery-ui` tag he probably means this [buttons](http://jqueryui.com/button/) — T J, Dec 01 '14 at 16:13

Abhitalks · Answer 1 · 2014-12-01T15:20:21.710

I need to create a Javascript that do the following operations: when the user click on one of the previous 3 buttons it take the value of the clicked button (Accept or Cancel or SAP) and submit it (in a POST request).

The value is submiited along with the request by itself. You have different names, so check the presence of that name while processing your form request in post parameters.

Accept:Accept
Cancel:Cancel
SAP:SAP

Alternatively, what you can do is, to give your buttons different id but same name.

<button id="accept" name="ctrl" value="Accept" type="submit" class="acceptButton">ACCEPT</button>
<button id="cancel" name="ctrl" value="Cancel" type="submit" class="cancelButton">CANCEL</button>
<button id="sap" name="ctrl" value="SAP" type="submit" class="sapButton">SAP</button>

Then you can check the form request which will contain your value with the same key:

ctrl:Accept
ctrl:Cancel
ctrl:SAP

If you have different names, you will have a different key for every button.

How can I implement a JavaScript that submit this form according to the clicket button?

1 Answers1

Linked