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

Question

Question

Javascript to auto fill radio buttons in a table

Forms
Updated July 24, 2020
asked on July 2, 2020 • Show version history

I'm trying to do something similar to this post:
https://answers.laserfiche.com/questions/113339/Set-radio-button-value-based-on-a-field#113353

I have a lookup filling hidden columns in a table, and I want radio buttons in that table to fill based on the values from the lookup.  There are two hidden columns, each with a corresponding radio button: WFHText -> WFH (Yes or No), and LocationText -> Location (Home or Office).  Each radio button only has 2 options. The code there looks like it could work, but it's not meant for a table.  As I'm not great with Javascript, can someone give me instructions on adapting the code?

$(".levelhid").change(function(){
    var levelhid = $(".levelhid input").val();

    if (levelhid == "SENR"){
      $(".level input:check").val("Senior");
      }
    else if (levelhid == "ADJ"){
      $(".level input:check").val("Adjunct");
      }
    else if (levelhid == "MSTR"){
      $(".level input:check").val("Master");
      }
  });

Also, would this require any CSS?  If so, how would I implement it?

0 0

Answer

SELECTED ANSWER
replied on July 12, 2020 • Show version history

Ok, so you are running the lookup during the form load.  You can use the onloadlookupfinished event to then process your hidden values and populate the radiobuttons

$(document).ready(function () {
  // After lookup completes, process each row of table
  $(document).on("onloadlookupfinished", function () {
    // Iterate through each row in table
    $('.tableClass tbody tr').each(function (event) {
      var objRow = $(this)  // current row object
      // get hidden loaction text field from current row
      objRow.find('._LocationText input').each(function () {
        //console.log($(this).val());
        // only process WFH and On-Site values
        if ($(this).val() == 'WFH' || $(this).val() == 'On-Site'){
          // Set Work Location Radiobutton
          objRow.find('.Work_Location input:visible').val([$(this).val()]);
        }
      });
      // get hidden deployable text field from current row
      objRow.find('._DeployableText input').each(function () {
        // load hidden deployable text value into variable
        //console.log($(this).val());
        // only process Yes and No values
        if ($(this).val() == 'Yes' || $(this).val() == 'No'){
          // Set WFH Deployable Radiobutton
          objRow.find('.WFH_Deployable input:visible').val([$(this).val()]);
        }
      });
    });
  });
});

 

1 0

Replies

replied on July 2, 2020

Since it is in a table, you need to go through the rows of the table.  the below example assumes you have assigned the table a class of "tableClass" and my table is

$(document).ready(function(){
  $('.tableClass').on('change', rowUpdateRadio);
  
  function rowUpdateRadio() {
    $('.tableClass tbody tr').each(function () {
      var hidval;
      $(this).find('.levelhid input').each(function () {
        hidval = $(this).val();
      });
      if (hidval == 'SENR'){
        $(this).find($('input[value="Senior"]')).attr('checked', true);
      } else if (hidval == 'ADJ'){
        $(this).find($('input[value="Adjunct"]')).attr('checked', true);
      } else if (hidval == 'MSTR'){
        $(this).find($('input[value="Master"]')).attr('checked', true);
      }
        
    });
  }
});

 

1 0
View 8 previous replies
replied on July 6, 2020

Hey Bert!  Thanks for the reply!

One question on this: To assign the CSS class, do I just need to do that in the field properties on the advanced tab, or do I have to declare the class in the CSS section (on the CSS and Javascript tab) as well?

 

Thanks again for the help!

0 0
replied on July 6, 2020

Also, I'm assuming that your Hidden Field variable is 'levelhid', is that correct?

replied on July 10, 2020

Just set the CSS Class in the Advanced tab.

0 0
replied on July 10, 2020

Hey Bert,

I put this code in place after applying the CSS Class to 'tableClass' in the Advanced tab on the table:

$(document).ready(function(){
  $('.tableClass').on('change', rowUpdateRadio);
  
  function rowUpdateRadio() {
    $('.tableClass tbody tr').each(function () {
      var hidval;
      $(this).find('._LocationText input').each(function () {
        hidval = $(this).val();
      });
      if (hidval == 'WFH'){
        $(this).find($('.Work_Location input[value="WFH"]')).attr('checked', true);
      } else if (hidval == 'On-Site'){
        $(this).find($('.Work_Location input[value="On-Site"]')).attr('checked', true);
      }
        
    });
  }
});

The variable for the hidden field is "_LocationText" and the variable for the radio button field is "Work_Location".  The possible selections are "WFH" or "On-Site".

This is not working.  The hidden field is filling from the lookup, but the radio button is not selecting.  Could it be because the table is filling after a change to the form, rather than on form load?  Not sure what I'm doing wrong.

Thanks again for the assistance!

0 0
replied on July 10, 2020

Try taking out the ".Work_Location" so in the find it is only looking for the input value.

0 0
replied on July 10, 2020

Actually tried it that way first, then changed it to this when that didn't work.  Thought I had to tell it where to find that input value.  Long way to say "that didn't work either", I guess. :(

0 0
replied on July 10, 2020

Are the Work_Location and the _LocationText fields both in the same row of the table?

show a screenshot of the fields on your form

0 0
replied on July 10, 2020

Here's how it looks in the designer (column 3 is the one with the variable _LocationText):

 

Here's how it looks in the preview (Column 2 is _LocationText):

Column 6 is the other one I want to auto-fill based on the value of column 5.

0 0
SELECTED ANSWER
replied on July 12, 2020 • Show version history

Ok, so you are running the lookup during the form load.  You can use the onloadlookupfinished event to then process your hidden values and populate the radiobuttons

$(document).ready(function () {
  // After lookup completes, process each row of table
  $(document).on("onloadlookupfinished", function () {
    // Iterate through each row in table
    $('.tableClass tbody tr').each(function (event) {
      var objRow = $(this)  // current row object
      // get hidden loaction text field from current row
      objRow.find('._LocationText input').each(function () {
        //console.log($(this).val());
        // only process WFH and On-Site values
        if ($(this).val() == 'WFH' || $(this).val() == 'On-Site'){
          // Set Work Location Radiobutton
          objRow.find('.Work_Location input:visible').val([$(this).val()]);
        }
      });
      // get hidden deployable text field from current row
      objRow.find('._DeployableText input').each(function () {
        // load hidden deployable text value into variable
        //console.log($(this).val());
        // only process Yes and No values
        if ($(this).val() == 'Yes' || $(this).val() == 'No'){
          // Set WFH Deployable Radiobutton
          objRow.find('.WFH_Deployable input:visible').val([$(this).val()]);
        }
      });
    });
  });
});

 

1 0
replied on July 16, 2020

Hi Bert, 

Paul was working with me on this and we still are unable to get the radio buttons to populate. 

 

The part where we entered ._LocationText (see in bold), should that be the variable name of the single line field that has the "WFH" and "On-Site" values? 

// get hidden loaction text field from current row

08      objRow.find('._LocationText input').each(function () {

0 0
replied on July 16, 2020

_LocationText is the css class of the hidden single line field with "WFH" or "On-Site".

_DeployableText is the css class of the hidden single line field with "Yes" or "No"

2 0
replied on July 24, 2020

Bert, this worked perfectly once we added the CSS classes to the fields in question.  Thanks so much for your help and patience!

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

Sign in to reply to this post.

Details
Related Posts
Loading ...