How best to make a link submit a form

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()" />


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.


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


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

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.