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

Question

Question

Clearing comments field when a specific radio button selected with JavaScript

asked on February 21, 2024

I have a Travel Form that has a radio button field called Travel Approval and a Multi-line Comments field below it. 

When the "Approve" radio button is selected I need the Comments field cleared before submitting.  

 

Travel Approval (Radio Button Field)

  • Approve
  • Deny
  • Resubmit to Sender
  • Send back to Admin Asst
  • Send back to Secretary
     

Comments (Multi-line Field)

 

Has anyone written a JS to handle this scenario?


I am not a JS expert so I appreciate any suggestions.


Thank you!

Pete

 

Screenshot 2024-02-21 155011.jpg
0 0

Replies

replied on February 21, 2024 Show version history

Both of these scripts will change the value of field q285 to a blank when field q283 is changed and the change is to a value of "Approve".  These are both tested on Version 11.0.2311.50553

For the Classic Designer: 

$(document).ready(function() {
  $('#q283').change(function(){
    if($(this).find(':checked').val() == 'Approve') {
      $('#q285 textarea').val('');
    }
  });
});

 

For the New Designer: 

LFForm.onFieldChange(function() {
  var selectedValue = LFForm.getFieldValues({fieldId: 283}).value;
  if (selectedValue == 'Approve') {
    LFForm.setFieldValues({fieldId: 285}, "");
  }
}, {fieldId: 283});

 

1 0
replied on May 23, 2024 Show version history

Hello Mathew,

 

The above snippet of code has also been very helpful for me. Can you please help me do the same but if it were a checkbox instead of a radio button. I am not able to make it work for my checkbox field. I am also working on the new form designer.

 

 

Each time I select monitor I need it to have a valid number for the Number of Monitors. 

Thank you for helping.

0 0
replied on May 23, 2024

With radio buttons, the LFForm.getFieldValues function is returning a string, so that is what we are evaluating against (selectedValue == 'Approve').

But with checkboxes, the LFForm.getFieldValues function returns an array of values rather than a string.  So the code from before only works if only the single checkbox is marked, it doesn't work if more checkboxes are marked.
For comparison: ['Apple'] == 'Apple' should evaluate true,
but ['Apple', 'Orange', 'Banana'] == 'Apple' will evaluate as false.
Side note that using ['Apple'] === 'Apple' will evaluate as false because == does type conversion before comparison and === does not.  So when you use == with ['Apple'] it is actually converting it to 'Apple' before doing the comparison, but when you use === it doesn't do that, so the single value array won't evaluate as equal to the string.

In this case, instead of evaluating if the value is equal to a specific string, we should be able to evaluate if the array contains the expected string.  See the w3schools.com page about Javascript Array includes() function.

So we just need to rewrite line 3 of the code to evaluate if the array contains the string.  Like this: 

LFForm.onFieldChange(function() {
  var selectedValue = LFForm.getFieldValues({fieldId: 283}).value;
  if (selectedValue.includes('Approve')) {
    LFForm.setFieldValues({fieldId: 285}, "");
  }
}, {fieldId: 283});

 

2 0
replied on May 23, 2024

Thank you so much Matthew for this feedback. I was able to make it work and I do understand better now. I was trying to use contains instead of includes. I very much appreciate your help.  

1 0
replied on February 22, 2024

It worked!  Thank you Matthew!  

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

Sign in to reply to this post.