How best to make a link submit a form.

Question

What's the best way to get a regular anchor (<a href="...">) to submit the form it is embedded in when clicked?

<form>
    <ul>
        <li>
            <p>
                The link could be <span>embedded <a href="" onclick="?">at any level</a></span>
                in the form, so "this.parentNode.parentNode..." is no good. :(
            </p>
        </li>
    </ul>
</form>

I know that the easiest way using jQuery would be

$('#myLink').click(function() {
    $(this).parents('form:first').submit();
});

...but I'm trying to find a way to do this without using a library.

---

Edit: I'm really trying to find a method which doesn't require knowledge of the form (eg: its name, id, etc). This would be similar to how you could put this on an input element: <input onclick="this.form.submit()" />

Answer 1

Why don't you use an <input> or <button> element and just tweak it with CSS? Then it works without Javascript and is therefore more reliable.

Answer 2

The simplest way to do that would be use something like this:

<a href="#" onclick="document.formName.submit();">

Answer 3

Vinny's answer is correct. The question supports a comment I made some time ago -- using frameworks is a great convenience but it is really better programming to do it the hard way until you understand what the framework is doing. Just grabbing stuff off the web and using it is dangerous. Do you know the security implication of what you are doing, if you don't know what it is really doing? What if the functionality breaks due to other script on your page or a browser upgrade? Can you fix it then?

Answer 4

best way is

<a href="#" onclick="document.forms[0].submit();return false;">Submit Form</a>

however you probably DON'T want to do that as it will make submitting impossible for users with JS disabled

Answer 5

loop through parent nodes until you find an element with tagname that indicates it's a form!

<form>
    <ul>
        <li>
            <p>
                The link could be <span>embedded <a href="" onclick="get_form(this).submit(); return false">at any level</a></span>
                in the form, so "this.parentNode.parentNode..." is no good. :(
            </p>
        </li>
    </ul>
</form>



<script type="text/javascript">
    //<![CDATA[
    function get_form( element )
    {
        while( element )
        {
            element = element.parentNode
            if( element.tagName.toLowerCase() == "form" )
            {
                //alert( element ) //debug/test
                return element
            }
        }
        return 0; //error: no form found in ancestors
    }
    //]]>
</script>

Answer 6

Similar solution to hasen j, but using a recursive function to traverse the document.

function findParentForm(element) {
    if (element.parentNode.tagName.toLowerCase() == 'html') {
     throw('No Parent Form Found');
    } else if (element.parentNode.tagName.toLowerCase() == 'form') {
     return element.parentNode;
    } else {
     return findParentForm(element.parentNode);
    }
}

And the form, of course...

<form>
    <ul>
     <li>
      <p>
       The link could be <span>embedded <a href="" onclick="findParentForm(this).submit(); return false;">at any level</a></span>
       in the form, so "this.parentNode.parentNode..." is no good. :(
      </p>
     </li>
    </ul>
</form>

Answer 7

Personally, I prefer to use the javascript: protocol in the href instead of using onclick event... If there is any issues with this, I would be happy to be corrected.

If you have only one form in the page, a quite common case, you can do simply:

<li><p><a href="javascript:document.forms[0].submit();">Click here to submit</a></p></li>

Otherwise, bubbling up the elements as above is a solution.

[EDIT] I keep the answer, even if it is downvoted, as a reference (the info given in comments is interesting).
Another drawback of the protocol technique: it doesn't generate an event object. Not a problem in the snippet I gave, but annoying when calling a handler.

Answer 8

You should use a button (and input or button of type submit) to submit a form.

If you need any additional features that a link has but input elements don't have (such as hover), then it is easier to implement those with javascript, than it is the submission of the form. It will also degrade more gracefully for people without javascript.

You can even solve this with MSIE specific code (and use :hover for other browsers):

<input type="submit" value="send" class="linkstyles"
       onmouseenter="this.className+=' hovered';"
       onmouseleave="this.className=this.className.replace(/(^|\s)hovered(\s|$)/g, '');" />

If you still really really want to do it backwards then here's how I wouldn't do it:

function submitByLink ( elm ) {
  // Move up domtree until we hit no parentNode or find a form
  while (elm) {
    elm = elm.parentNode;
    if (elm && elm.tagName == 'FORM') {
      // First chance we get, we submit the form and exit.
      // The return on the node it kills the event bubble by forwarding false to browser
      elm.submit(); 
      return false;
    }
  }
  // If we got here then there is no form parent and user will be sent to link href
}

And the HTML would look like this:

<a href="aPageExplainingWhyYouNeedJavascript.html" onclick="return submitByLink(this);">Send</a>

Answer 9

$(document).ready(function(){$('#submit').click(function(){$('#signup').submit();});});

Using Jquery, we check the document has loaded, then we wait for an anchor tag with an id of 'submit' to be clicked. It then submits the form with an id of 'signup'. Change 'submit' and 'signup' to suit.

Answer 10

Hi! I am using this now every time. Because the submit button in my project usually a link (by wrap an image or CSS), so I use this:

<a href="#" onclick="$(this).closest('form').submit(); return false;">Submit</a>

Don't forget it is using jQuery too.

You can wrap in your own function. So it always submit the parent element (form) on that link.

Answer 11

As long as the link is a direct child of the form, you can use this. You don't need to know the name of the form. Works in at least Firefox and Chrome.

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

quirksmode.org tells me x.parentNode works in all browsers, so this should work everywhere.