HTML anchor to send post data on click

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!

---

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.

---

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

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

---

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/

---

Something like this probably comes closer:

$(a.submitLink).click(function () {
  $.post({data: values});

  $.post({data2: values2});

  return false;
});

The key here is that returning false prevents the default behavior for the link. If you need to do additional processing based on the results of the post you'll do that inside a callback function. There's no reason you can't issue several AJAX calls inside the function bound to your anchors, but you need to make sure the link doesn't function as a link as well.

---

One quick thought why don't you try using

<button type="submit" class="footer" >Signup</button>
instead of
<input type=submit>

This gives you flexibility of styling your button whatever way you want and have text in it as well. Besides you do not have to do all the hard work of creating custom button and posting it back.

Just give it a thought.