jQuery with HTML radio button forms

[Shiro-6]

Hi,
I have a problem running a simple jQuery script. This is what I'd like
to do:

- Select from a list of radio button
- Each radio button will show a hidden dropdown list

The jQuery snippet I use is as follows:

$("#wrapper_almond").hide();

$("#flavors input[name=cakes]").click(function(){

                if ($("#almond_cake:checked").val() == 'on') {
                        $("#wrapper_almond").show();

                } else {
                        $("#wrapper_almond").hide();

                };

});

And the HTML I use is as follows:

<fieldset id="flavors">
   <input type="radio" id="almond_cake" name="cakes" /></input>
    <label >Almond Cake - White cake baked with freshly toasted
almonds</label>
</fieldset>

<div id="wrapper_almond">
  <div align="left">Almond Cake Fillings:</div></td>
  <div align="left"><input type="hidden" name="on2" value="Cake
Filling" />
    <select name="os2" id="os2"  onchange="updatetotal()">
      <option value="Almond cream" selected="selected">Almond cream</
option>
    </select>
  </div>
</div>

Now the problem is anytime I insert a value="x" into the <input> type,
the jQuery ceases to work. For example:

<input type="radio" id="almond_cake" name="cakes" values="x" /></
input>

Is there a way around this? Thanks!

[Bharat Ruparel]

Can you try the change event instead of click?
Bharat

[Shiro-6]

Hi,
I changed it to the following:

$("#flavors input[name=cakes]").change(function(){

                if ($("#almond_cake").is(':checked')) {

                        $("#wrapper_almond").show();
                        $("#pic_almond").show();
                } else {
                        $("#wrapper_almond").hide();
                        $("#pic_almond").hide();
                };

There are more types of 'cakes' listed besides that the one there and
this works perfectly fine in Mozilla firefox. However, the ever nasty
Internet explorer gave me some problems. Clicking on almond cake radio
button is supposed to show the wrapper_almond div, chocolate cake
radio button shows wrapper_chocolate div, etc. But in IE, whenever I
click on almond cake, nothing happens, and I click on chocolate cake,
it shows almond cake instead! There seems to be a delay in clicks
somehow. I either have to double click the radio button, or right
click after selecting the radio button. Is there a way around this?
Any help greatly appreciated!

Sincerely,
Westley

On Jul 2, 6:00 am, Bharat <bcrupa...@...> wrote:
> Can you try the change event instead of click?
> Bharat

[James-279]

Here:
$("#almond_cake:checked").val() == 'on')

You're checking for the value 'on', but you're setting value="x"?

If you're using that condition, your HTML should look like this:
<input type="radio" id="almond_cake" name="cakes" value="on" />

See if that works.

(And you don't need a closing </input> tag. It's not valid HTML.)


On Jul 2, 7:45 am, Shiro <nimro...@...> wrote:

> Hi,
> I changed it to the following:
>
> $("#flavors input[name=cakes]").change(function(){
>
>                 if ($("#almond_cake").is(':checked')) {
>
>                         $("#wrapper_almond").show();
>                         $("#pic_almond").show();
>                 } else {
>                         $("#wrapper_almond").hide();
>                         $("#pic_almond").hide();
>                 };
>
> There are more types of 'cakes' listed besides that the one there and
> this works perfectly fine in Mozilla firefox. However, the ever nasty
> Internet explorer gave me some problems. Clicking on almond cake radio
> button is supposed to show the wrapper_almond div, chocolate cake
> radio button shows wrapper_chocolate div, etc. But in IE, whenever I
> click on almond cake, nothing happens, and I click on chocolate cake,
> it shows almond cake instead! There seems to be a delay in clicks
> somehow. I either have to double click the radio button, or right
> click after selecting the radio button. Is there a way around this?
> Any help greatly appreciated!
>
> Sincerely,
> Westley
>
> On Jul 2, 6:00 am, Bharat <bcrupa...@...> wrote:
>
> > Can you try the change event instead of click?
> > Bharat
>
>

[Shiro-6]

Hi James,
I changed the code from:

$("#almond_cake:checked").val() == 'on')

to:

if ($("#almond_cake").is(':checked'))

to check to see if the radio button is checked. This works in firefox
but in IE it takes a second click for it to work for some reason.

Thanks!



On Jul 2, 12:49 pm, James <james.gp....@...> wrote:

> Here:
> $("#almond_cake:checked").val() == 'on')
>
> You're checking for the value 'on', but you're setting value="x"?
>
> If you're using that condition, your HTML should look like this:
> <input type="radio" id="almond_cake" name="cakes" value="on" />
>
> See if that works.
>
> (And you don't need a closing </input> tag. It's not valid HTML.)
>
> On Jul 2, 7:45 am, Shiro <nimro...@...> wrote:
>
> > Hi,
> > I changed it to the following:
>
> > $("#flavors input[name=cakes]").change(function(){
>
> >                 if ($("#almond_cake").is(':checked')) {
>
> >                         $("#wrapper_almond").show();
> >                         $("#pic_almond").show();
> >                 } else {
> >                         $("#wrapper_almond").hide();
> >                         $("#pic_almond").hide();
> >                 };
>
> > There are more types of 'cakes' listed besides that the one there and
> > this works perfectly fine in Mozilla firefox. However, the ever nasty
> > Internet explorer gave me some problems. Clicking on almond cake radio
> > button is supposed to show the wrapper_almond div, chocolate cake
> > radio button shows wrapper_chocolate div, etc. But in IE, whenever I
> > click on almond cake, nothing happens, and I click on chocolate cake,
> > it shows almond cake instead! There seems to be a delay in clicks
> > somehow. I either have to double click the radio button, or right
> > click after selecting the radio button. Is there a way around this?
> > Any help greatly appreciated!
>
> > Sincerely,
> > Westley
>
> > On Jul 2, 6:00 am, Bharat <bcrupa...@...> wrote:
>
> > > Can you try the change event instead of click?
> > > Bharat

[James-279]

What if you change the whole thing to:

$("#almond_cake").click(function() {
    if ($(this).is(':checked'))
        // do something
    else
        // do something else
});

On Jul 2, 10:00 am, Shiro <nimro...@...> wrote:

> Hi James,
> I changed the code from:
>
> $("#almond_cake:checked").val() == 'on')
>
> to:
>
> if ($("#almond_cake").is(':checked'))
>
> to check to see if the radio button is checked. This works in firefox
> but in IE it takes a second click for it to work for some reason.
>
> Thanks!
>
> On Jul 2, 12:49 pm, James <james.gp....@...> wrote:
>
> > Here:
> > $("#almond_cake:checked").val() == 'on')
>
> > You're checking for the value 'on', but you're setting value="x"?
>
> > If you're using that condition, your HTML should look like this:
> > <input type="radio" id="almond_cake" name="cakes" value="on" />
>
> > See if that works.
>
> > (And you don't need a closing </input> tag. It's not valid HTML.)
>
> > On Jul 2, 7:45 am, Shiro <nimro...@...> wrote:
>
> > > Hi,
> > > I changed it to the following:
>
> > > $("#flavors input[name=cakes]").change(function(){
>
> > >                 if ($("#almond_cake").is(':checked')) {
>
> > >                         $("#wrapper_almond").show();
> > >                         $("#pic_almond").show();
> > >                 } else {
> > >                         $("#wrapper_almond").hide();
> > >                         $("#pic_almond").hide();
> > >                 };
>
> > > There are more types of 'cakes' listed besides that the one there and
> > > this works perfectly fine in Mozilla firefox. However, the ever nasty
> > > Internet explorer gave me some problems. Clicking on almond cake radio
> > > button is supposed to show the wrapper_almond div, chocolate cake
> > > radio button shows wrapper_chocolate div, etc. But in IE, whenever I
> > > click on almond cake, nothing happens, and I click on chocolate cake,
> > > it shows almond cake instead! There seems to be a delay in clicks
> > > somehow. I either have to double click the radio button, or right
> > > click after selecting the radio button. Is there a way around this?
> > > Any help greatly appreciated!
>
> > > Sincerely,
> > > Westley
>
> > > On Jul 2, 6:00 am, Bharat <bcrupa...@...> wrote:
>
> > > > Can you try the change event instead of click?
> > > > Bharat
>
>

[Bobby Jack-2]

I've identified the exact same problem today. Although this could, in
theory, be moved to a click event, this will reduce accessibility
support - e.g. keyboard users will no longer see the same behaviour.

- Bobby

On Jul 3, 12:42 am, James <james.gp....@...> wrote:

> What if you change the whole thing to:
>
> $("#almond_cake").click(function() {
>     if ($(this).is(':checked'))
>         // do something
>     else
>         // do something else
>
> });
>
> On Jul 2, 10:00 am, Shiro <nimro...@...> wrote:
>
> > Hi James,
> > I changed the code from:
>
> > $("#almond_cake:checked").val() == 'on')
>
> > to:
>
> > if ($("#almond_cake").is(':checked'))
>
> > to check to see if the radio button is checked. This works in firefox
> > but in IE it takes a second click for it to work for some reason.
>
> > Thanks!
>
> > On Jul 2, 12:49 pm, James <james.gp....@...> wrote:
>
> > > Here:
> > > $("#almond_cake:checked").val() == 'on')
>
> > > You're checking for the value 'on', but you're setting value="x"?
>
> > > If you're using that condition, your HTML should look like this:
> > > <input type="radio" id="almond_cake" name="cakes" value="on" />
>
> > > See if that works.
>
> > > (And you don't need a closing </input> tag. It's not valid HTML.)
>
> > > On Jul 2, 7:45 am, Shiro <nimro...@...> wrote:
>
> > > > Hi,
> > > > I changed it to the following:
>
> > > > $("#flavors input[name=cakes]").change(function(){
>
> > > >                 if ($("#almond_cake").is(':checked')) {
>
> > > >                         $("#wrapper_almond").show();
> > > >                         $("#pic_almond").show();
> > > >                 } else {
> > > >                         $("#wrapper_almond").hide();
> > > >                         $("#pic_almond").hide();
> > > >                 };
>
> > > > There are more types of 'cakes' listed besides that the one there and
> > > > this works perfectly fine in Mozilla firefox. However, the ever nasty
> > > > Internet explorer gave me some problems. Clicking on almond cake radio
> > > > button is supposed to show the wrapper_almond div, chocolate cake
> > > > radio button shows wrapper_chocolate div, etc. But in IE, whenever I
> > > > click on almond cake, nothing happens, and I click on chocolate cake,
> > > > it shows almond cake instead! There seems to be a delay in clicks
> > > > somehow. I either have to double click the radio button, or right
> > > > click after selecting the radio button. Is there a way around this?
> > > > Any help greatly appreciated!
>
> > > > Sincerely,
> > > > Westley
>
> > > > On Jul 2, 6:00 am, Bharat <bcrupa...@...> wrote:
>
> > > > > Can you try the change event instead of click?
> > > > > Bharat