Submitting a form by link click

Question: Can I submit a form by clicking a link?

Answer: Yes. If JavaScript is enabled, you can do so by using a hyperlink with an

onclick
event handler that calls a
form.submit()
method. However, the form will not be submitted if the user has disabled JavaScript. (In addition, a
form.submit()
within an
onclick
event handler creates usability issues discussed below.)

Here is an example: click on any of the hyperlinks (Link 1, Link 2, or Link 3), and a form on this page will be submitted with value

v=Link1
,
v=Link2
,
v=Link3
, respectively.

The hyperlinks with

onclick
event handlers in the above example look like this:

<a href="#" 
   onclick="document.forms[0].v.value='Link1';
   document.forms[0].submit();">Link 1</a>
<a href="#"
   onclick="document.forms[0].v.value='Link2';
   document.forms[0].submit();">Link 2</a>
<a href="#" 
   onclick="document.forms[0].v.value='Link3';
   document.forms[0].submit();">Link 3</a>

<form name=f1 action="" method=GET target=_blank >
<input name=v type=hidden value=undefined>
</form>
Note that this example is a very unusual scenario. Typically, the users expect that
(A) clicking a link causes the browser to navigate to the link's destination URL;
(B) a form submission causes the browser to display the results produced by a server-side application located at the form's
action
URL.

Combining both actions (A) and (B) in a single click might confuse the user. Therefore, submitting a form by a link click is a usability problem and should be avoided. (In the above example, the form's action URL with the query string

v=LinkX
appears in a new browser window or tab, as specified in the form's optional
target
attribute. The link destination appears in the pre-existing browser window/tab.)

Copyright © 1996-2018, JavascriptFAQ.net.