CODEWITHSUNDEEP
javascripthtml
Piedpiper Malta
Piedpiper Malta

Reputation: 153

Convert a HTML for submit button into a link HTML?

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>

Upvotes: 4

Views: 10758

Answers (4)

Trott
Trott

Reputation: 70075

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.

Upvotes: 5

Wouter
Wouter

Reputation: 1987

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;
}

Upvotes: 0

Alex Reynolds
Alex Reynolds

Reputation: 6352

Using Jquery you can do it as follows

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

Upvotes: 0

Opi
Opi

Reputation: 1308

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

Upvotes: 1

Related Questions