Select a radio button automatically

Get Help
, , ,
22

Hi Michael. I think I have something workable for you. Here is the script:

<script>
  jQuery(document).ready(function($) {
    // field 3 in form 718 is my calculated field
    // when that changes:
    $('input#input_718_3').change(function () {
      // select a radio button in field 4 based on the total hours
      var hours = $("#input_718_3").val();
      $('input[name=input_4][value=' + hours + ']').attr('checked', true).change;
    });
  });
</script>

That worked for me for form 718. I have two number fields, and total them in field 3 of the form. The script watches field 3 for a change, and whatever the number is in that field is the radio button that is pre-selected in field 4 (my radio button field.)

Here’s a quick recording of how that works in my form: https://d.pr/i/ZdPHHj

There is an issue if you have a total which resulted in a radio button being checked, then you go back and edit the numbers, to come up with some total that is outside the range of radio buttons. The old radio button stays checked. You can see that at the end of the recording where I entered 15 and ended up with a total of 18. That could be improved with some error handling, but hopefully this is a good start for you.

Thanks @Dere for the shoutout.

I forgot to mention: that script can go into an HTML field you add to the form. Adjust the form ID and field IDs to match your requirements.

2 Likes
23

That’s awesome! :sunglasses:

1 Like
24

Hi Chris, thank you for your help. I’ve been trying to get this to work, but it’s not doing anything. I’m wondering if it’s because the values I have are not whole numbers (they’re actually 1.0, 1.5, 2.0, 2.5 and so on)?

25

Hi Michael. The script is just watching for a change, it does not matter what the value is. Do you have a link to the page on your site where we can see this in action?

26

Hi, the form is here: https://cleaning-express.com/form-test/

but it is not showing due to a javascript error:

<script>
  jQuery(document).ready(function($) {
    // field 282 in form 1 is my calculated field
    // when that changes:
    $('input#input_1_282').change(function () {
      // select a radio button in field 150 based on the total hours
      var hours = $("#input_1_282").val();
      $('input[name=input_150][value=' + hours + ']').attr('checked', true).change;
    });
  });
</script>

Uncaught Error: Syntax error, unrecognized expression: input[name=input_150][value=]