CODEWITHSUNDEEP
phpjqueryhtml
sucharitha
sucharitha

Reputation: 25

Dynamic radio button values change by clicking another radio button

I have same div multiple times.If I click on 'Mr' radio button in first div field should change last div radio button value as 'male' Here my code.It is changing all div values as 'male'.How do I change related form Gender radio button value when clicking the title radio button.Please anybody help me.

<?php
    for($i=1;$i<=$totalchilds;$i++){
    ?>
        <div class="primary Applicant-details">
          <h3>Tourist Details </h3>
            <div>
              <label>Title : </label>
              <input type="radio" class="gender" name="c_genderinfo_<?=$i?>" value="Mr" checked>
              Mr
              <input type="radio" class="gender1" name="c_genderinfo_<?=$i?>" value="Mrs">
              Mrs </div>
            <div>
              <label for="fname">Name</label>
              <input type="text" name="c_name_<?= $i ?>" placeholder="child name">  
            </div>
            <div>
              <label for="lname">Age</label>
              <input type="text"  name="c_age_<?=$i?>" placeholder="Enter child age">
            </div>
            <div>
              <label>Gender : </label>
              <input type="radio" class="gender" name="c_gender_<?=$i?>" value="M" checked>
              Male
              <input type="radio"  class="gender1" name="c_gender_<?=$i?>" value="F">
              Female </div>
        </div>

    <?php }?>

enter image description here

Upvotes: 0

Views: 1307

Answers (2)

Adersh
Adersh

Reputation: 598

You can use jQuery. There are different methods to achieve this. This is one of them. Pass your id and value from html like this:

<div>
    <label>Title : </label>
    <input onclick="changeGender(<?=$i?>, 'M')" type="radio" class="gender" name="c_genderinfo_<?=$i?>" value="Mr" checked>
    Mr
    <input onclick="changeGender(<?=$i?>, 'F')" type="radio" class="gender1" name="c_genderinfo_<?=$i?>" value="Mrs">
    Mrs 
</div>

And in script:

function changeGender(id, value)
{
    $("input[name=c_gender_"+id+"][value=" + value + "]").prop('checked', true);
}

Upvotes: 1

ST2OD
ST2OD

Reputation: 725

To change the gender radio button in the same div use this code:

$('.gender').click(function(){
    $(this).closest('.Applicant-details').find('.gender').prop('checked',true);
});
$('.gender1').click(function(){
    $(this).closest('.Applicant-details').find('.gender1').prop('checked',true);
});

The structure of the code isn't very optimal. Rename the title from gender to title. Naming the radio buttons gender and gender1 isn't any better. Besides, from a usability perspective, having both selections that have the same value doesn't make a lot of sense.

Upvotes: 1

Related Questions