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.