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.

alt text

Any ideas?

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. — Anton S, Nov 26 '10 at 15:22
i second that, unfortunately these isnt an easy way w/o javascript — benhowdle89, Nov 26 '10 at 15:23
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: http://www.tripwiremagazine.com/2009/06/24-essential-submit-button-enhancements.html — dnagirl, Nov 26 '10 at 15:43

Jan Sverre · Accepted Answer · 2020-01-18T15:20:56.540

208

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;".

edited Jan 18 '20 at 15:20

answered Nov 26 '10 at 15:24

Jan Sverre

4,617
1
22
28

73

Aaaaaaaand here's a reference for how to style a button as a link: http://stackoverflow.com/questions/1367409/how-to-make-button-look-like-a-link – flipchart Jul 11 '13 at 12:23
3

note that `form.submit()` will not work without JavaScript – baptx Aug 11 '16 at 22:46
3

@baptx even old smart phones have enabled javascript – Mahdi Jazini Oct 22 '16 at 18:41
2

@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. – baptx Oct 22 '16 at 19:56
3

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 `` – Jan Sverre Oct 24 '16 at 08:39
This will refresh the page if you use Ajax to submit even with the event.preventDefault()... – Warface Apr 04 '17 at 15:14
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. – Chloe Nov 08 '18 at 01:25
If using jQuery you should do this: `Submit` – TheStoryCoder Dec 13 '19 at 13:53
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. – Jan Sverre Jan 18 '20 at 15:19

score 97 · Answer 2 · answered Nov 26 '10 at 15:28

97

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.

answered Nov 26 '10 at 15:28

JonVD

4,258
24
24

2

and dear visitors... don't forget to set the >>> id="my_form" it's id not name :D – Mahdi Jazini Oct 22 '16 at 18:53
This should be the best and explicit answer, thanks! – yehanny Apr 27 '20 at 17:57

Serj Sagan · Answer 3 · 2021-04-18T01:26:57.803

34

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

edited Apr 18 '21 at 01:26

answered Apr 24 '13 at 16:31

Serj Sagan

28,927
17
154
183

just for the record: you should select the appropriate `input` element using CSS selectors without attaching a class to the HTML element. – Erik Kaplun Jul 06 '14 at 13:37
Although your comment is the preferred way, this is not always possible – Serj Sagan Jul 07 '14 at 05:17
Why is that the preferred way? – Mark Nov 06 '15 at 20:12
It's a semi-established coding practice, generally leaves behind cleaner html... but it's not a huge deal – Serj Sagan Nov 06 '15 at 21:14
2

This answer doesn't depend on javascript either which is one less thing to worry about – Matthew Lock Jan 20 '17 at 02:16
See also here http://stackoverflow.com/questions/1367409/how-to-make-button-look-like-a-link?noredirect=1&lq=1 – Matthew Lock Jan 20 '17 at 02:22

score 11 · Answer 4 · answered Nov 26 '10 at 15:27

11

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

answered Nov 26 '10 at 15:27

ThiefMaster

310,957
84
592
636

1

...or a ` – DanMan Apr 28 '14 at 11:12
Here's the MDN link for this in case anyone else wanted a source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image – Sam Aug 12 '16 at 09:27

RobertO · Answer 5 · 2010-11-26T15:36:09.047

5

use:

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

or:

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

plus some CSS

edited Nov 26 '10 at 15:36

answered Nov 26 '10 at 15:28

RobertO

2,655
1
20
18

score 1 · Answer 6 · edited Aug 15 '17 at 05:19

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>

@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. — Paulo Buchsbaum, Aug 15 '17 at 13:50

score 0 · Answer 7 · answered Nov 23 '17 at 12:33

0

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

answered Nov 23 '17 at 12:33

Sameh Helaly

29
4

Use a normal link to submit a form

7 Answers7

Linked

Related