Submit a form using anchor element, without javascript

Question

How to replace the submit button with a link without using javascript ? is there any way to add the submit attribute to a link ? because the form will not be sent by a simple link without "submit".

<form:form action="/getPage" >
     <div class="buttons">

         <a class="link" href=""> 
           <img src="icon.png" />
         </a>

     </div>         
</form:form>

I work in an application web so if i use javascript the link will not be mapped by the server ..

http://stackoverflow.com/questions/1367409/how-to-make-button-look-like-a-link — Sanath, Jun 13 '13 at 02:18
If you make your *button* a link, make sure Google and other search engines don't go through your page. You don't want a *delete link* triggered by the search engines. — Eric Jablow, Jun 13 '13 at 02:21
The real question is: why must you use `` to submit the form? What's wrong with `` or ` — d-_-b, Jun 13 '13 at 02:30

d-_-b · Answer 1 · 2013-06-13T02:28:50.820

30

You can not submit a form using an <a> tag alone. You will need some type of javascript to assist, if you insist on using the <a> tag:

<a href="#" onclick="$(this).closest('form').submit()">Submit the Form</a>

or

<a href="#" onclick="document.getElementById('form-id').submit()">Submit the Form</a>

or super hack:

<a href="backendPage.php?param1=yes&param2=no">Submit the Form</a>, then on backendPage.php you can use $_GET requests to process information, and redirect the visitor to the intended page. But that's a horrible idea haha

edited Jun 13 '13 at 02:28

answered Jun 13 '13 at 02:22

d-_-b

21,536
40
150
256

Hay hello man, I used this method and it worked fine, but didnt work when I changed href value to empty string (href=" ") can you tell me what is the significance of the #.... – fazkan Sep 29 '16 at 00:06
Hi @fazkan, the`href="#whatever"` tells the browser to change the hash in the URL, which usually means no page reload (excluding angular, etc.). An empty `href` attribute will be the same as pointing to the current page which will reload the page. Alternatively, you could remove the `href` attribute completely and use CSS `cursor:pointer` to make the mouse hover look like a link. – d-_-b Sep 29 '16 at 04:37

score 22 · Accepted Answer · answered Jun 13 '13 at 02:20

22

Try this:

CSS

button {
    background:none!important;
    border:none; 
    padding:0!important;
    /*border is optional*/
    border-bottom:1px solid #444; 
}

HTML

<button>your button that looks like a link</button>

answered Jun 13 '13 at 02:20

Omar Wagih

8,504
7
59
75

score 8 · Answer 3 · answered Jun 22 '17 at 07:39

8

This can achieve the same effort and it looks like <a>

Note: btn btn-link comes from bootstrap

<button class="btn btn-link" type="submit"><img src="icon.png" /></button>

answered Jun 22 '17 at 07:39

Angelina

141
2
5

Manpreet Singh Dhillon · Answer 4 · 2018-08-10T18:31:27.387

0

There is an another way out. Using this method you can use any element to submit a form. Following is an example:

<span onclick="$('#submit').trigger('click')" style="cursor:pointer;">
     anything
</span>

Add a hidden submit button:

 <input style="display:none;" type="submit" id="submit"/>

This will behave exactly as actual submit button.

edited Aug 10 '18 at 18:31

answered Aug 10 '18 at 02:38

Manpreet Singh Dhillon

833
11
17

Submit a form using anchor element, without javascript

4 Answers4

Linked