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.

  • Link 1
  • Link 2
  • Link 3

    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 © 1999-2011, JavaScripter.net.