I want to submit a form. But I am not going the basic way of using a input button with submit type but a a link.
The image below shows why. I am using image links to save/submit the form. Because I have standart css markup for image links I don't want to use input submit buttons.
I tried to apply onClick="document.formName.submit()" to the a element but I would prefer a html method.
Any ideas?
you can use OnClick="document.getElementById('formID_NOT_NAME').SUBMIT()"
You are using images to submit.. so you can simply use an type="image"
input "button":
<input type="image" src="yourimage.png" name="yourinputname" value="yourinputvalue" />
Just styling an input type="submit"
like this worked for me:
.link-button { _x000D_
background: none;_x000D_
border: none;_x000D_
color: #0066ff;_x000D_
text-decoration: underline;_x000D_
cursor: pointer; _x000D_
}
_x000D_
<input type="submit" class="link-button" />
_x000D_
Tested in Chrome, IE 7-9, Firefox
You can't really do this without some form of scripting to the best of my knowledge.
<form id="my_form">
<!-- Your Form -->
<a href="javascript:{}" onclick="document.getElementById('my_form').submit(); return false;">submit</a>
</form>
Example from Here.
use:
<input type="image" src=".."/>
or:
<button type="send"><img src=".."/> + any html code</button>
plus some CSS
Definitely, there is no solution with pure HTML to submit a form with a link (a
) tag. The standard HTML accepts only buttons or images. As some other collaborators have said, one can simulate the appearance of a link using a button, but I guess that's not the purpose of the question.
IMHO, I believe that the proposed and accepted solution does not work.
I have tested it on a form and the browser didn't find the reference to the form.
So it is possible to solve it using a single line of JavaScript, using this
object, which references the element being clicked, which is a child node of the form, that needs to be submitted. So this.parentNode
is the form node. After it's just calling submit()
method in that form. It's no necessary research from whole document to find the right form.
<form action="http://www.greatsolutions.com.br/indexint.htm"
method="get">
<h3> Enter your name</h3>
First Name <input type="text" name="fname" size="30"><br>
Last Name <input type="text" name="lname" size="30"><br>
<a href="#" onclick="this.parentNode.submit();"> Submit here</a>
</form>
Suppose that I enter with my own name:
I've used get
in form method attribute because it's possible to see the right parameters in the URL at loaded page after submit.
http://www.greatsolutions.com.br/indexint.htm?fname=Paulo&lname=Buchsbaum
This solution obviously applies to any tag that accepts the onclick
event or some similar event.
this
is a excellent choice to recover the context together with event
variable (available in all major browsers and IE9 onwards) that can be used directly or passed as an argument to a function.
In this case, replace the line with a
tag by the line below, using the property target
, that indicates the element that has started the event.
<a href="#" onclick="event.target.parentNode.submit();"> Submit here</a>
Source: Stackoverflow.com