Question

Javascript/Jquery to Populate Radio Button Value AND the Other Textbox Value In a Collection Using

Forms Version 11 Classic Form Designer

Updated March 20, 2023

asked on March 17, 2023 • Show version history

Hi all,

Here's a fun one. I need to loop through a collection on my form that contains a radio button that includes an Other option with textbox and set both the selected radio option AND set the textbox value if "Other is selected. Also, my radio button field has a class name set on it. Any brilliant Javascript/JQuery people out there that has a code example to accomplish this?

Eric

0 0

Answer

SELECTED ANSWER

replied on March 17, 2023

Okay, I think I understand. And I think you were really close with your function.

I have the following working in a test with Version 11.0.2212.30907 Classic Designer.

Here's the updated Javascript:

  function SetRadioButtonInCollection(LOADFieldClass, LOADOtherFieldClass, collectionClass, RadioButtonFieldClass)
  {
    
    $('.' + collectionClass + ' .kx-repeatable > div').each(function ()
    {   
      var LOADValue = $(this).find('.' + LOADFieldClass + ' input').val();
      var LOADOtherValue = $(this).find('.' + LOADOtherFieldClass + ' input').val();
      
      if(LOADOtherValue != '')
      {
        // The RadioButton control has an OTHER option.
        $(this).find('.' + RadioButtonFieldClass + ' input[value="_other"]').prop('checked', true).trigger('change');
        $(this).find('.' + RadioButtonFieldClass + ' input.otherchoice').val(LOADOtherValue);
      }
      else
      {
        // The RadioButton control has an option that is not OTHER.
        $(this).find('.' + RadioButtonFieldClass + ' input[value="' + LOADValue + '"]').prop('checked', true).trigger('change');
      }
    
    });  // End of collection loop.
  
  }  // End of function SetRadioButtonInCollection.

Here's what I have in the database it is populating from:

When the form loads, but has not run the function yet, I can't see anything because it's only populated the hidden fields in the collection:

But then after I trigger the function, it populates all of the radio buttons and their other fields, based on the contents of those hidden single line fields:

0 0

Replies

replied on March 17, 2023 • Show version history

This doesn't need JavaScript. You can use a formula such as the following to fill the text field only when "Other" is selected, where "Radio_Button" is the name of the column in your collection", "Other" is the value of the radio button selection, "Yes" is the value you want the text field to be when "Other" is selected, and "No" is the value you want the text field to be when "Other" is not selected:

=IF(INDEX(Collection.Radio_Button,ROW())="Other","Yes","No")

I'm unclear on how you want the radio button to be filled. What is the source?

0 0

replied on March 17, 2023

I'd be happy to help with a Javascript example.

But I am a little confused about your question. Can you clarify a couple points?

When do you want the loop to be triggered?
In what cases are you wanting the radio button to be marked to Other?
Is the textbox for Other the default option that is added when you select the Other option on the Layout Page - or is it a regular single line field that you have set-up via Field Rules to be shown/hidden based on the radio button selection?
What value do you want populated into the Other textbox?
What is the class name(s) you are using for your field(s)?

0 0

replied on March 17, 2023 • Show version history

Apologies for the vague description. I'm populating a collection from a database table that contains saved values from a previously submitted form's collection, essentially re-creating the collection that was previously submitted on another form. So, after the form loads and lookup rules have been executed, the JavaScript runs to re-populate the collection. Each collection entry has a radio button field with several possible values. One of those values is the Other option which is (as you know) built into LF forms. Along with the radio button field there are 2 corresponding hidden single line (text) fields (also in the collection entry) that contain the previously selected radio button option value AND the value entered in the "Other" textbox if "Other" was selected as a radio button value. So, the collection loop is iterating through the collection and using those 2 text values to select the proper radio button value AND populate the "Other" textbox field. Clear as mud? LF help shows this as the syntax for setting the "Other" text value

$('#Field6_other_value').val()

but I can't hardcode the field reference, it needs to be the reference for the current collection entry in the loop. The following function is kind of where I'm trying to head with this idea

0 0

SELECTED ANSWER

replied on March 17, 2023

Okay, I think I understand. And I think you were really close with your function.

I have the following working in a test with Version 11.0.2212.30907 Classic Designer.

Here's the updated Javascript:

  function SetRadioButtonInCollection(LOADFieldClass, LOADOtherFieldClass, collectionClass, RadioButtonFieldClass)
  {
    
    $('.' + collectionClass + ' .kx-repeatable > div').each(function ()
    {   
      var LOADValue = $(this).find('.' + LOADFieldClass + ' input').val();
      var LOADOtherValue = $(this).find('.' + LOADOtherFieldClass + ' input').val();
      
      if(LOADOtherValue != '')
      {
        // The RadioButton control has an OTHER option.
        $(this).find('.' + RadioButtonFieldClass + ' input[value="_other"]').prop('checked', true).trigger('change');
        $(this).find('.' + RadioButtonFieldClass + ' input.otherchoice').val(LOADOtherValue);
      }
      else
      {
        // The RadioButton control has an option that is not OTHER.
        $(this).find('.' + RadioButtonFieldClass + ' input[value="' + LOADValue + '"]').prop('checked', true).trigger('change');
      }
    
    });  // End of collection loop.
  
  }  // End of function SetRadioButtonInCollection.

Here's what I have in the database it is populating from:

When the form loads, but has not run the function yet, I can't see anything because it's only populated the hidden fields in the collection:

But then after I trigger the function, it populates all of the radio buttons and their other fields, based on the contents of those hidden single line fields:

0 0

replied on March 20, 2023

Yeah, that was it! Thank you and to everybody that replied. JavaScript syntax can be really challenging.

1 0

replied on March 20, 2023

I'm really glad it worked for you.

0 0

You are not allowed to follow up in this post.

Question

Question

Javascript/Jquery to Populate Radio Button Value AND the Other Textbox Value In a Collection Using

Answer

Replies

Sign in to reply to this post.