Jump to content

Question

Posted

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.

[CODE]
<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

9 answers to this question

  • 0

Posted

Is there no jQuery plugin for this?

Share this post


Link to post
Share on other sites
  • 0

Posted

[quote name='nik louch' timestamp='1350992505' post='595266131']
Is there no jQuery plugin for this?
[/quote]

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

just managed to work it out

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

Share this post


Link to post
Share on other sites
  • 0

Posted

I've run into another problem,

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

[CODE]
$('#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
  • 0

Posted

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
  • 0

Posted

[quote]
a full plugin for what technically should be a couple of lines of code?
[/quote]

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
  • 0

Posted

[quote name='nik louch' timestamp='1351000155' post='595266357']
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.
[/quote]

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

Share this post


Link to post
Share on other sites
  • 0

Posted

$('#settings :checked') should get you the value you want.

http://api.jquery.com/checked-selector/

Share this post


Link to post
Share on other sites
  • 0

Posted

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
  • 0

Posted

[quote name='lunamonkey' timestamp='1351003786' post='595266467']
When you force the attribute to checked, do you have to unforce the previously checked one?

Not going to check myself for free..... :p
[/quote]

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  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.