HTML anchor to send post data on click

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.

Answer 2

In the click handler for the link, return false to stop the default action.

I also would just use the click() function, not live.

Answer 3

Your click event needs to either return false, or prevent default.

Using AJAX is Asynchronous so you wont be returning the value, you'll have to find the value in the complete callback.

http://api.jquery.com/jQuery.post/