Question

I basically have two forms, one for Male and another for Female. The code below works for the male form, but when I modify my code to do the same thing for Female page it doesn't work. I've found that if the code for the Male form is first it will work but not for the Female form. And if I put the female code first it will work but the Male form/code wont work. So it works, but I think jqtouch/jquery can't differentiate between the two groups of radio buttons even when I have change the name of the radio buttons.

$("input[name=AxMale]:radio").click(function() {
    var x;
    x = parseFloat($("#MalePred").val())
    if ($(this).val() == '0') {
        parseFloat($('#prePredMale').val(x));
    }
    else if ($(this).val() == '1') {
        parseFloat($('#postPredMale').val(x));
    }
    else if ($(this).val() == '2') {
        parseFloat($('#MalePred').val(''));
        parseFloat($('#cmMale').val(''));
        parseFloat($('#kgMale').val(''));
        parseFloat($('#ageMale').val(''));
        $(this).attr('checked', false);

    }

});
return false;

this is the html

<li><input type="radio" name="AxMale" value="0" title="Initial Assessment" /></li>
 <li><input type="radio" name="AxMale" value="1" title="Exit Assessment" /></li>
<li><input type="radio" name="AxMale" value="2" title="Do Another Calculation" /></li>

if also tried the solutions on this link JQuery and multiple radio button groups problem

$("input:radio").click(function() {
  if (this.name == "group_1") {
    // group 1 clicked
  } else if (this.name == "group_2") {
    // group 2 clicked
  }
});

but no success, any help would be great.


just to be more specific:

when i have this code for the female form...

$("input[name=AxFemale]:radio").click(function() {
    var x;
    x = parseFloat($("#FemalePred").val())
if($(this).val() == '0') 
{
parseFloat($('#prePredFemale').val(x));
}
else if($(this).val() == '1')
{
parseFloat($('#postPredFemale').val(x));
}
else if($(this).val() == '2')
{
parseFloat($('#FemalePred').val(''));
parseFloat($('#cmFemale').val(''));
parseFloat($('#kgFemale').val(''));
parseFloat($('#ageFemale').val(''));
$(this).attr('checked', false);

}

});
return false;

this works...but only when it is placed before the male code.

so on the same html (because I am using jqtouch) i have a group of radio buttons named AxFemale

<li><input type="radio" name="AxFemale" value="0" title="Initial Assessment" /></li>
 <li><input type="radio" name="AxFemale" value="1" title="Exit Assessment" /></li>
 <li><input type="radio" name="AxFemale" value="2" title="Do Another Calculation" /></li>
Was it helpful?

Solution

Try

$("input:radio").click(function() {
  if ($(this).attr('name') == "group_1") {
    // group 1 clicked
  } else if ($(this).attr('name') == "group_2") {
    // group 2 clicked
  }
});

Update

Just as notice: In your HTML example the there is only a group with name "AxMale"

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top