Question

populate radio button with javascript

Forms

Updated July 27, 2023

asked on March 24, 2021

I have 2 radio buttons. From a selection on the first, I would like to populate the second. The script I have works the first time through, but if I change my mind, it doesn't go back through.

Here is my script:

$(document).ready(function() {

var $radio = $('#q14');

// Change Radio Button 2 - Read only based on radio button
$($radio).on('change', function () {

if($('input[value="1"]').is(':checked'))
{
   $('.radio2').find($('input[value="choice 1"]')).attr('checked', true);
}
else if($('input[value="2"]').is(':checked'))
   {
   $('.radio2').find($('input[value="choice 2"]')).attr('checked', true);
   }
else if($('input[value="3"]').is(':checked'))
{
$('.radio2').find($('input[value="choice 3"]')).attr('checked', true);
}
});
});

0 0

Answer

SELECTED ANSWER

replied on March 24, 2021 • Show version history

You can see this when using the Browser's inspect element functionality, but after you apply the checked attribute to one of the radio buttons, it doesn't actually get removed when you apply it to another. So as you click different options, and the attribute is applied to the others, if you try to go back to one that was previously applied, nothing changes, because that attribute already exists.

There are a couple solutions for this. For either of these, I'm providing some streamlined code that assumes your first radio button has radio1 as a class name and your second radio button has radio2 as a class name - and that the values on both fields are the same.

~~1. You can remove the checked attribute from the alternate options when it applies to the new option:~~

$(document).ready(function() {

// Change radio2 based on selection on radio1
$('.radio1').change(function () {
var radio1Value = $('.radio1 input:checked').val();
$('.radio2 input[value="' + radio1Value + '"]').attr('checked', true);
$('.radio2 input[value!="' + radio1Value + '"]').attr('checked', false);
});

});

2. Because LFForms uses JQuery, you can use the checked property instead of the checked attribute:

$(document).ready(function() {
 
  // Change radio2 based on selection on radio1 
  $('.radio1').change(function () {
    var radio1Value = $('.radio1 input:checked').val();
    $('.radio2 input[value="' + radio1Value + '"]').prop('checked', true);  
  });
  
});

Edit: I struckout option 1 because it still doesn't work visually even if it does clear the attribute as expected in the Inspect Element view. Option 2 (using checked property instead of checked attribute) just works - use that.

3 0

replied on March 25, 2021

This is the one that worked. Thank you.

1 0

replied on March 25, 2021 • Show version history

Glad it worked for you ~~- please consider marking your question as answered if everything is resolved. Have a great day!~~

0 0

replied on December 7, 2022 • Show version history

Worked for me today, too! Thanks, Matthew!

$(document).ready(function () {
$('.setYes input[value='Yes']').prop('checked', true);
});

1 0

Replies

replied on March 24, 2021 • Show version history

Hello Katy

Try the following:

$(document).ready(function () {

    let fromRadio = $('.fromRadio .choice');

    $(fromRadio).on('change', function () {

      let newVal = $(this).find(':checked').val();
      $('.toRadio .choice [value="'+newVal+'"]').prop('checked', true).change();
      
    })
      
    })
    
});

In this case, I'm using classes on the fields instead of their IDs -- makes it easier to make changes to the Form in the future without updating the code.

I should warn you though: using Forms Read-only will cause Forms to ignore any value in that field regardless of using a change event, and the value will be ignored when you submit the Form. You will need to use JS to make the field either appear read-only, or apply read-only with JS and remove it on Form submit. If both fields are always going to have the same value, I should think that you don't need the second field.

Thank you

1 0

replied on March 24, 2021

I think you beat me posting by mere seconds. haha

1 0

replied on March 24, 2021

I love that are solutions are so similar!

1 0

replied on July 26, 2023

How do you do this in Modern Forms?

0 0

replied on July 27, 2023

I was going to suggest you post that as a new question - but I think you already did that with this post.

0 0

You are not allowed to follow up in this post.

Question

Question

populate radio button with javascript

Answer

Replies

Sign in to reply to this post.