Sign in to follow this  

Radio button image replacement, select with jquery?

Recommended Posts

game_over    711

I have a form where user can select different currencies, i want to hide the radio buttons and replace them with images, when the image is clicked it will select the correct radio button.


<form method="POST" action="">
<label for="GBP">
<input type="radio" name="currency" value="GBP" class="toggle">
<div class="flag-GBP"><img src="/images/flags/GBP.jpg"></div>
</label>
<label for="USD">
<input type="radio" name="currency" value="USD" class="toggle">
<div class="flag-USD"><img src="/images/flags/USD.jpg"></div>
</label>
<label for="EUR">
<input type="radio" name="currency" value="EUR" class="toggle">
<div class="flag-EUR"><img src="/images/flags/EUR.jpg"></div>
</label>
<label for="JPY">
<input type="radio" name="currency" value="JPY" class="toggle">
<div class="flag-JPY"><img src="/images/flags/JPY.jpg"></div>
</label>
<label for="AUD">
<input type="radio" name="currency" value="AUD" class="toggle">
<div class="flag-AUD"><img src="/images/flags/AUD.jpg"></div>
</label>
<label for="CAD">
<input type="radio" name="currency" value="CAD" class="toggle">
<div class="flag-CAD"><img src="/images/flags/CAD.jpg"></div>
</label>
<input type="submit" value="Submit" name="submit_currency">
</form>
[/CODE]

So when the div or image is clicked, i want it's radio button to be checked, once i know it's doing this i can hide the radio button and just have clickable flag images but nothing seems to work.. any suggestions?

Share this post


Link to post
Share on other sites
Nefarious Trigger    6,774

Is there no jQuery plugin for this?

Share this post


Link to post
Share on other sites
game_over    711

Is there no jQuery plugin for this?

a full plugin for what technically should be a couple of lines of code?

just managed to work it out


$('img').click(function() {
$(this).parent().find(":radio").attr('checked', true);
});
[/CODE]

Share this post


Link to post
Share on other sites
game_over    711

I've run into another problem,

I want the form to submit automatically after an image is clicked so i've added


$('#settings img').click(function() {
$(this).parent().find(":radio").attr('checked', true);
$("#settings").submit();
});
[/CODE]

However, when i submit it this way it does not register the checked value, if i submit it using the submit button it does.

Share this post


Link to post
Share on other sites
lunamonkey    114

I thought "checked" was changed to a prop in jQuery instead of an attr. Not going to check... just a thought.

Also. WTF is #settings, it's not listed.

Share this post


Link to post
Share on other sites
Nefarious Trigger    6,774

a full plugin for what technically should be a couple of lines of code?

I no of course, but I missread, my bad. I thought you needed a replacement for checkboxes, which I've used an awesome plugin before.

Share this post


Link to post
Share on other sites
game_over    711

I no of course, but I missread, my bad. I thought you needed a replacement for checkboxes, which I've used an awesome plugin before.

Well thats pretty much right, it's just image replacements for radio buttons.

Share this post


Link to post
Share on other sites
lunamonkey    114

When you force the attribute to checked, do you have to unforce the previously checked one?

Not going to check myself for free..... :p

Share this post


Link to post
Share on other sites
game_over    711

When you force the attribute to checked, do you have to unforce the previously checked one?

Not going to check myself for free..... :p

lol it's not forcing it, when another is selected the previous deselects on it's own as they are part of the same group.

I've fixed that issue, it is now the issue with $(selector).submit(); .. when i submit the form this way it doesn't register a selection on the radio buttons, probably because jquery is asynchronous therefore it's submitting the form before it's captured the value.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.