Convert a HTML for submit button into a link HTML?

Question

I have the following submit button in HTML:

<input name="submit" type="submit" value="Sign In" />

I would like to convert it to an HTML link, by using this method:

<a  href="#" onclick="document.getElementById('formname').submit()">Sign In</a>

but the form does not submit.

Thanks.

The full code is as follows:

<form id="form_freeuser" action="login.php" method="post" name="form_freeuser">
            <div class="label"><label>Free User</label></div><input id="name" name="name" readonly="readonly" type="text" value="test" />
            <input id="user_email" name="email" readonly="readonly" type="password" value="test" />
            <input name="submit" type="submit" value="Sign In" />

        </form>

why would you do that? the JS approach won't work for users with JS disabled.. on the other hand you can style the input anyhow you want - even to mimic an `` — Zoltan Toth, Jul 28 '12 at 00:25
Also you probably don't want to use a link. You could use a span tag and style it any way you want. — Erin, Jul 28 '12 at 00:48

Trott · Answer 1 · 2014-04-02T15:21:00.557

5

Make sure the id attribute is set to whatever you are sending to getElementById().

<form id="formname" action="/foo" method="get">
    <a  href="#" onclick="document.getElementById('formname').submit()">Sign In</a>
</form>

That will fix your code, which is the question you are asking. As a meta point, though, I wouldn't recommend using a link to submit a form. A user expects a button to submit a form, not a link. Don't mess with the semantics like this. You'll confuse and annoy users.

You can also use CSS to style a button to look like a hyperlink. It has the exact same issue of breaking conventions.

edited Apr 02 '14 at 15:21

answered Jul 28 '12 at 00:23

Trott

66,479
23
173
212

it's better not to use JavaScript to do this. See my new answer. – Wouter Apr 01 '14 at 08:00
The original posters question wasn't "What is the best way to do this?" It was (paraphrasing) "Here's my code, why doesn't it do what I expect it to do?" This answers that question. – Trott Apr 01 '14 at 21:47
True enough. But for anyone not requiring the JS-method explicitly for some reason, the HTML method provides more benefits. It's not asked explicitly, but implied. Both answers are useful, depending on the purpose. If you like, feel free to combine them into one answer. – Wouter Apr 02 '14 at 07:22

score 1 · Answer 2 · answered Jul 28 '12 at 00:24

By clicking on the link your browser will try to take you away from the page so you lose all your data. You can:

<a  href="#" onclick="document.getElementById('formname').submit();return false">Sign In</a>

Also is "formname" the id of the form or the name of the form?

For that code to work you need:

<form id="formname">

Instead of

<form name="formname">

Otherwise you can use

document.formname

As well

score 0 · Answer 3 · edited Jul 28 '12 at 03:07

0

Using Jquery you can do it as follows

$(document).ready(function(){
    $('a').click(function(e){
        $('form').submit();
    });
});

edited Jul 28 '12 at 03:07

The Alpha

143,660
29
287
307

answered Jul 28 '12 at 00:23

Alex Reynolds

6,264
4
26
42

score 0 · Answer 4 · edited May 23 '17 at 12:08

In this post: How to make button look like a link?
@odedbd provides a great solution: http://jsfiddle.net/zYCN9/1/

His code turns a button into a normal-looking hyperlink.
The benefit over the JS solution, is, that you are not using JS. Hence, users with JS disabled can still use your form. It seems a much more elegant, and HTML-conform way to do this.

I've copied the code below in case the link goes down:

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

button {
    background:none!important;
     border:none; 
     padding:0!important;

    /*optional*/
    font-family:arial,sans-serif; /*input has OS specific font-family*/
     color:#069;
     cursor:pointer;
}
button:hover{
         text-decoration:underline;
}

Additionally, you will not want -all- submit buttons to have this style. So i suggest doing this:

<input type="submit" class="submit_hyperlink" value="submit this form"/>

input.submit_hyperlink {
    background:none!important;
     border:none; 
     padding:0!important;

    /*optional*/
    font-family:arial,sans-serif; /*input has OS specific font-family*/
     color:#069;
     cursor:pointer;
}

input.submit_hyperlink:hover{
         text-decoration:underline;
}

Convert a HTML for submit button into a link HTML?

4 Answers4