You are viewing limited content. For full access, please sign in.

Question

Question

Forms 10.1 - autofill radio button field when a different radio button field is filled

asked on April 28, 2017 Show version history

Hello - 

I have a 2 column single row table that uses radio button fields:

I would like to have the To column autofill when a user selects a choice in the From column, so that if From = On Light Duty, To is filled with Off Light Duty (and vice-versa). Can someone help me out with the javascript necessary?

Thanks - Jim

0 0

Answer

SELECTED ANSWER
replied on April 30, 2017

Try this code.  I've used myTable as the CSS Class Name of the Table, and column1 and column2 as the CSS Class Names of the From and To Radio Buttons - change to your class names as appropriate.

$(document).ready(function () {

  $('.myTable').on('change', '.column1 input', function() { 
    if ($(this).val() == 'On Light Duty') { 
      $(this).closest("tr").find('.column2 input[value="Off Light Duty"]').prop('checked', true);
    }
    else if ($(this).val() == 'Off Light Duty') { 
      $(this).closest("tr").find('.column2 input[value="On Light Duty"]').prop('checked', true);  
    }
  });
  
  $('.myTable').on('change', '.column2 input', function() { 
    if ($(this).val() == 'On Light Duty') { 
      $(this).closest("tr").find('.column1 input[value="Off Light Duty"]').prop('checked', true);
    }
    else if ($(this).val() == 'Off Light Duty') { 
      $(this).closest("tr").find('.column1 input[value="On Light Duty"]').prop('checked', true);  
    }
  });
  
});

 

1 0
replied on May 1, 2017

Matthew - 

This works perfectly - thanks so much for taking the time to help!

1 0
replied on May 1, 2017

You're welcome.  Enjoy.

0 0
replied on May 1, 2017

By the way, you mentioned that it was a single row table, but I wrote the code so that it would work on any row of the table.  It works either way, is what I mean.  smiley

0 0
replied on July 2, 2020

Matthew, I'm doing something similar, where I'm filling hidden fields in a table with a lookup, then I want to set radio button values based on that.  Could this code be used in that manner?  Please note that I have very little experience with Javascript, so I need clear instructions on implementing the code.  One question I have about this code is applying the CSS classes.  Do you mean that you have to create those CSS classes in the CSS section, or just put that CSS class name in the field properties on the form?

Thanks ahead of time for your assistance!

0 0
replied on July 15, 2020

It would probably work, just need some tweaking to match your scenario.

On the Layout page, when you add fields to your form, in the settings, you can give them a CSS Class Name (or multiple names separated by spaces).  That is what I mean by giving the CSS Class Names to the table and radio button fields.

This script just says:

  1. When there is a change to the first set of radio buttons on the table then:
    • Check the selected value of the first set of radio buttons (either "On Light Duty" or "Off Light Duty") and based on that selected value, change the selected value of the second set of radio buttons to be the opposite.
  2. When there is a change to the second set of radio buttons on the table then:
    • Check the selected value of second set of radio buttons (either "On Light Duty" or "Off Light Duty") and based on that selected value, change the selected value of the first set of radio buttons to be the opposite.

 

Good luck.

1 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.