Use a normal link to submit a form

Question

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?

Punctuate

use button and css it to display the image or use javascript, there's no real way to make simple href to submit a form without javascript. – Gudrin

i second that, unfortunately these isnt an easy way w/o javascript – Haploid

Your reason for doing this sounds like a false economy. Better to just come up with a standard css for submit buttons and use forms the way they were designed to be used. There are a pile of button css techniques describe here: tripwiremagazine.com/2009/06/… – Diencephalon

Answer 1

Two ways. Either create a button and style it so it looks like a link with css, or create a link and use onclick="this.closest('form').submit();return false;".

Hageman

Aaaaaaaand here's a reference for how to style a button as a link: #1367909 – Mincemeat

note that form.submit() will not work without JavaScript – Gavin

@Gavin even old smart phones have enabled javascript – Tibiotarsus

@MahdiJazini a lot of people disable JavaScript by default which can be intrusive and affect performance in some cases. If JavaScript fails, it can break the whole website (e.g. using a CDN without local fallback and the third-party domain is blocked). If there is an HTML error, you can still use the website. Developers should follow progressive enhancement principle instead. – Gavin

If you want to support users without javascript, do the first option described in this answer, style a button like a link. For instance input[type=submit].link { border: none; background: none; display: inline; color: blue; text-decoration: underline; } and <input type=submit class="link" /> – Hageman

This will refresh the page if you use Ajax to submit even with the event.preventDefault()... – Arondell

Anchor links do not have a .form property. Plus you have to return false or else the browser will follow the link instead of submit the form. – Soaring

If using jQuery you should do this: <a href="#" onclick="$(this).closest('form').submit();return false;">Submit</a> – Fatshan

jQuery should be used only when necessary. In this case, if the code is in another place and link is fetched by jQuery and using .on('click'), good. But in your example, it is better to leave jQuery. this.closest('form').submit();return false if faster and less code. – Hageman

Answer 2

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.

Superable

and dear visitors... don't forget to set the >>> id="my_form" it's id not name :D – Tibiotarsus

This should be the best and explicit answer, thanks! – Lachish

Answer 3

Just styling an input type="submit" like this worked for me:

.link-button { 
     background: none;
     border: none;
     color: #1a0dab;
     text-decoration: underline;
     cursor: pointer; 
}

<input type="submit" class="link-button" />

Tested in Chrome, IE 7-9, Firefox

Tricotine

just for the record: you should select the appropriate input element using CSS selectors without attaching a class to the HTML element. – Disillusion

Although your comment is the preferred way, this is not always possible – Tricotine

Why is that the preferred way? – Caesarean

It's a semi-established coding practice, generally leaves behind cleaner html... but it's not a huge deal – Tricotine

This answer doesn't depend on javascript either which is one less thing to worry about – Maxfield

See also here #1367909 – Maxfield

Answer 4

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

Trabeated

...or a <button> element with an <img/> element in it. – Shelton

Here's the MDN link for this in case anyone else wanted a source: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image – Show

Answer 5

use:

<input type="image" src=".."/>

or:

<button type="send"><img src=".."/> + any html code</button>

plus some CSS

Mockingbird

Answer 6

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>

Wurst

@Nathan, I do not have much practice of writing in Stackoverflow. I hope that your corrections help me to improve my style. My English is not good either. – Wurst

Answer 7

you can use OnClick="document.getElementById('formID_NOT_NAME').SUBMIT()"

Legislate