One form, multiple submit buttons and submit links

Question

Possible Duplicate:
Multiple submit buttons in an HTML form

I have web form with multiple submit buttons. To determine which button was pressed, each has a different name, like so:

<input type="submit" name="foo" value="Foo Foo">

On the form there are also normal links that act as submit buttons, like so:

<a href="" onclick="parentNode.submit();return false;">
Bar
</a>

How do I also distinguish between the links being used as submit buttons?

I am not sure if this is relevant:
Here is the start of the form

<form action="foobar" method="post" enctype="multipart/form-data">

I am using Flask (a micro-framework based on Werkzeug) which uses Python (2.6 in this case).

NOT a duplicate. Please read the full question before marking as duplicate. The other question purported as dupe is asking about default action when Enter is pressed in the case of multiple buttons. — Basel Shishani, Apr 12 '13 at 05:30

score 3 · Accepted Answer · answered Sep 20 '10 at 14:22

My first question would be to ask if you need that many distinct ways to submit the same form? This sounds like your design should be changed up to make it more simplistic for the user, which will in turn solve your issue.

If you absolutely HAVE to have all the different submit buttons/links and need to know which one was pressed, use something like:

<input type="hidden" id="submitClicked" />
<input type="submit" onclick="javascript:document.getElementById('submitClicked').value='linkName';return true;" id="linkName">Submit</input>

NOTE: I didn't test this code, it was just off the top of my head, and thus some modification may be needed.

Great, thanks for your answer. You're right, simplifying the form would probably simplify other things too - however on this occasion there is not enough time. Something to come back to later maybe. — Jon Cox, Sep 20 '10 at 14:36

score 1 · Answer 2 · answered Sep 20 '10 at 14:17

1

You can create a hidden input called submitSource, and set the value of that as you wish from the link or button onclick event handlers. Then you can check that value server-side.

answered Sep 20 '10 at 14:17

D'Arcy Rittich

167,292
40
290
283

RoToRa · Answer 3 · 2010-09-20T14:51:15.923

1

Another solution you should consider: Use <ìnput type="submit"> for "submit links" just like the normal submit buttons and use CSS to style them to look like links.

This has the two huge advantages that it will (a) work with out any extra code that could potentiality break and will (b) work on every single browser on this world.

edited Sep 20 '10 at 14:51

answered Sep 20 '10 at 14:34

RoToRa

37,635
12
69
105

+1 And (c) work even if JavaScript is disabled. Hard to argue with this answer, really. – T.J. Crowder Sep 20 '10 at 14:39
Again, thanks for yet another way to solve the problem :-) CSS is indeed very useful. – Jon Cox Sep 20 '10 at 14:40
I am missing the a:hover styling capabilities when using styled submit buttons, hence my preference for links with `onclick='getElementById("hiddenInput").value="action1";document.namedform.submit();'` – ajo Apr 03 '11 at 18:43
@ajo: I quite sure `:hover` works on buttons perfectly well, and even if not, you can do just the hover effect in JavaScript, so that the actual functionality isn't compromised. – RoToRa Apr 04 '11 at 08:52

score 0 · Answer 4 · edited May 23 '17 at 09:57

RedFilter's answer is certainly a solid way to go, but here's another option for you:

I normally use one name for all my submit buttons ("command" or similar), since of course only one of them is ever sent. Then my server-side code just looks at the value of that field to figure out what to do.

Your submit links could append a "command" parameter to the form's action, e.g.:

<a href="" onclick="parentNode.action += "?command=bar"; parentNode.submit(); return false;">

Even if you don't want to use just one name, the concept still holds, e.g.:

<a href="" onclick="parentNode.action += "?bar=bar+bar"; parentNode.submit(); return false;">

Of course, if you do either of the above and your form uses POST rather than GET (as most forms do), then whether you get the parameter value from the same source on the server will depend on what server-side mechanism you're using. For instance, Java's ServletRequest#getParameter method doesn't care, it looks in both the GET and POST data, whereas with some other technologies more of a distinction is drawn. Not a problem, you just have to be sure you're getting from the right place.

Thank you for an alternative solution. It's always useful (and more interesting) to have a variety of options at your disposal. — Jon Cox, Sep 20 '10 at 14:38

score 0 · Answer 5 · answered Sep 20 '10 at 14:42

I would recommend instead of using onclick="parentNode.submit();return false;" that you create a js function that all links call to perform the submit. Then you could use a hidden field or get variable or whatever to transfer the link's id.

function submitMe(linkID)
{
    document.getElementById("hfWhichButtonSubmittedMe").value = linkID;
    document.getElementById(linkID).parentNode.submit();
    return false;
}

...

<a href="" id="mySubmitLink1" onclick="return submitMe('mySubmitLink1');">blah blah</a>

One form, multiple submit buttons and submit links

5 Answers5