this.form.submit() not working, but maybe it shouldn't..

[tomcatexodus]

Is using the onclick="this.form.submit();" method of form submission restricted to use only on other <input /> tags?

Is there a way to use this method on an <a> tag?

I'm trying to achieve something like this, but it's not working:

<form action="serverFile.php" method="post">
<!-- various input controls -->
<a onclick="this.form.submit();">Send</a>
</form>

I'm trying to find the least 'hardwired' manner of doing this, because yes, I am aware of:

<form name="myForm" action="serverFile.php" method="post">
<!-- various input controls -->
<a href="javascript:document.myForm.submit();">Send</a>
</form>

And I am trying not to use this if possible.

[techgnome]

what's wrong with that second method?

-tg

[tomcatexodus]

I just don't want to use that method. I'm trying to keep all elements independent of one another. Dynamically generated forms, etc., etc.

Most importantly, to see if it's possible.

[SambaNeko]

This would achieve what you want:

<form action="serverFile.php" method="post">
<!-- various input controls -->
<a href="#" onclick="this.parentNode.submit();return false;">Send</a>
</form>

Anchor elements don't seem to "register" as a link without the href attribute, so add that. "this" refers to the anchor element in the above context, so to say "this.form" would refer to the form element within "this" - there exists no such thing. Using "this.parentNode" refers to the parent element of the anchor, which is the form. If you put the anchor within a div or something, then its parent would no longer be the form, and this wouldn't work. Also, you want to return false to the onclick event or else the browser will try to process the link as normal (it'll submit the form, but then go to "#" (reload the current page, in effect)).

If you're really interested in unobtrusive Javascript, you should do two things: remove the inline script, as well as write the HTML with a standard submit input, and have the Javascript sniff out and replace that element on page load (this is so that if a user has Javascript disabled, they'll still be able to use the form with a normal submit button; if they have Javascript enabled, the link will replace the button).

[fjober]

<form id="form1" name="form1" method="post" action="file.php">
  <input type="text" name="textfield" id="textfield" />
</form>
<a href="#" onclick="document.form1.submit()">send</a>