Question

Is it possible to make an anchor tag behave like a .submit (with certain post characteristics?) Reason why I have an anchor tag, because I dislike the submit button look and wanted a CSS button.

Here’s what I’m doing right now (and it’s not working)

html file

<div class="footer"><a href="#" id = "test_btn" class="button"><strong>Sign Up</strong></a></div>

<div class="footer"><a href="#" id = "test2_btn" class="button"><strong>Sign Up</strong></a></div>

the .js file

<script type="text/javascript">

$("#test_btn").live("click",function(){
    var post_data = {'account_type':"Free"}
    return $.post("www.someplacehere.com/user_sign_up/1/", post_data);
}); 

$("#test2_btn").live("click",function(){
    var post_data = {'account_type':"Premium"}
    return $.post("www.someplacehere.com/user_sign_up/1/", post_data);
}); 
</script>

I get a proper response, but it doesn’t send me to the POST data page just redirects back to the top of the page (due to the anchor). Any ideas how to make it direct me to the right place (html page) with the POST data pre-filled on that html page? As you notice, it’s not a simple .submit().
Right now probably going to go with a hidden field and then do a .submit(), but wondering if there’s an easier way to get the page since the POST could be done properly.

Thanks!

Answer 1

Everyone stop re-inventing buttons. They already exist, and they can be styled too.

button[type=submit] {
    background-color: transparent;
    border: none;
    border-bottom: solid blue 1px;
    color: blue;
    font-weight: bold;
    padding: 0px;
    cursor: pointer;
}

demo’d here: http://jsfiddle.net/MZbLW/

---

I should also point out that everyone in the world is going to be looking for the traditional button at the end of the form, and making it look completely different may not be the greatest idea from a usability standpoint.