Jump to content



Photo

Radio button image replacement, select with jquery?

jquery

  • Please log in to reply
9 replies to this topic

#1 Uplift

Uplift

    Just below average Joe

  • Tech Issues Solved: 1
  • Joined: 07-May 04
  • Location: England

Posted 23 October 2012 - 11:24

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>

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?


#2 +Nik L

Nik L

    Where's my pants?

  • Tech Issues Solved: 1
  • Joined: 14-January 03

Posted 23 October 2012 - 11:41

Is there no jQuery plugin for this?

#3 OP Uplift

Uplift

    Just below average Joe

  • Tech Issues Solved: 1
  • Joined: 07-May 04
  • Location: England

Posted 23 October 2012 - 11:45

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);
});


#4 OP Uplift

Uplift

    Just below average Joe

  • Tech Issues Solved: 1
  • Joined: 07-May 04
  • Location: England

Posted 23 October 2012 - 13:28

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();
});

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

#5 lunamonkey

lunamonkey

    Ten years on Neowin.

  • Joined: 28-May 03
  • Location: Swindon, England

Posted 23 October 2012 - 13:44

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.

#6 +Nik L

Nik L

    Where's my pants?

  • Tech Issues Solved: 1
  • Joined: 14-January 03

Posted 23 October 2012 - 13:49

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.

#7 OP Uplift

Uplift

    Just below average Joe

  • Tech Issues Solved: 1
  • Joined: 07-May 04
  • Location: England

Posted 23 October 2012 - 14:23

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.

#8 threetonesun

threetonesun

    Neowinian Senior

  • Tech Issues Solved: 1
  • Joined: 26-February 02

Posted 23 October 2012 - 14:31

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

http://api.jquery.co...ecked-selector/

#9 lunamonkey

lunamonkey

    Ten years on Neowin.

  • Joined: 28-May 03
  • Location: Swindon, England

Posted 23 October 2012 - 14:49

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

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

#10 OP Uplift

Uplift

    Just below average Joe

  • Tech Issues Solved: 1
  • Joined: 07-May 04
  • Location: England

Posted 23 October 2012 - 14:56

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.



Click here to login or here to register to remove this ad, it's free!