CODEWITHSUNDEEP
jqueryhtml
Tyug
Tyug

Reputation: 443

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!

Upvotes: 7

Views: 15032

Answers (5)

Pranav Kaushik
Pranav Kaushik

Reputation: 203

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.

Upvotes: 0

Brad Mace
Brad Mace

Reputation: 27886

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.

Upvotes: 23

Hollister
Hollister

Reputation: 3908

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

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

Upvotes: 3

g.d.d.c
g.d.d.c

Reputation: 47978

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.

Upvotes: 1

zzzzBov
zzzzBov

Reputation: 179046

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/

Upvotes: 2

Related Questions