One form, multiple submit buttons and submit links

Question

Hi,

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>

My question is how do I also distinguish between the links being used as submit buttons?

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

Answer 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.

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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>