Show/Hide Fields Based on Drop Down Selection

[EmmePGN]

Hello all,

I am hoping someone can help me with a javascript and figure out how to hide/show  fields based on user selection from a drop down field.

I tried the rules section for this and it is not serving what I need.  I also searched the forum to see if there is something I could use. But can't find any that I could understand.

 

I have an UpdateForm.

My field name for the drop down  is 'Credentials'

My other two fields are 'Frequency 1' and 'Frequency2'

There are 2 choices in the drop down field:    Certificate and  Licensure

If the user chooses 'Certificate'  I would like the  'Frequency 2' to be hidden  and 'Frequency 1' to be a required field.

If the user chooses 'Licensure'  the 'Frequency 1' should be hidden and 'Frequency 2'  should be a required field.

 

Please help.

Thank you so much in advance.

 

 

 

 

 

 

 

 

 

 

[Hastur]

Hello @EmmePGN

You can implement such a logic using both Rules and JS.
Use Rule to make appropriate fields as required.

Here is the example of the code you may add to the footer of the DataPage:

<script>
function hideFieldsHandler(event) {
 let targetInput = document.getElementById("EditRecordDropdown_Name"); 
 let firstField = document.getElementById("EditRecordField_Name").parentNode.parentNode;
 let secondField = document.getElementById("EditRecordField_Name").parentNode.parentNode;
 if (event.target.value == '1') {
  firstField.style.display = "none";
  secondField.style.display = "";
 } else if (event.target.value == '2') {
  secondField.style.display = "none";
  firstField.style.display = "";
 }
}

function changeHandler() {
 document.getElementById('EditRecordDropdown_Name').addEventListener('change', hideFieldsHandler);
 let firstField = document.getElementById("EditRecordField_Name").parentNode.parentNode;
 let secondField = document.getElementById("EditRecordField_Name").parentNode.parentNode;
 firstField.style.display = "none";
 secondField.style.display = "none";
 document.removeEventListener('DataPageReady', changeHandler);
}

document.addEventListener('DataPageReady', changeHandler);
</script>

Parts needs to be changed:
1. Dropdown_Name and Field_Name parts according to the names of the fields you use in your DataPage.
2. "1" and "2" values in the IF statement according to values of your Dropdown field.
Also, you need to disable the HTML editor of the footer before you insert the code.

You can find the Example here.

[EmmePGN]

Hi Andrew,

Thank you so much for helping me.  The code didn't work for my page. I am showing below what I have (including the  parts that I changed).

Can you please check where I'm going wrong?

<script>
function hideFieldsHandler(event) {
 let targetInput = document.getElementById("EditRecordCertification");
 let firstField = document.getElementById("EditRecordFrequencyA").parentNode.parentNode;
 let secondField = document.getElementById("EditRecordFrequencyB").parentNode.parentNode;
 if (event.target.value = 300) {
  firstField.style.display = "none";
  secondField.style.display = "";

 } else if (event.target.value = 500) {
  secondField.style.display = "none";
  firstField.style.display = "";
 }
}

function changeHandler() {
 document.getElementById('EditRecordCertification').addEventListener('change', hideFieldsHandler);
 let firstField = document.getElementById("EditRecordFrequencyA").parentNode.parentNode;
 let secondField = document.getElementById("EditRecordFrequencyB").parentNode.parentNode;
 firstField.style.display = "none";
 secondField.style.display = "none";
 document.removeEventListener('DataPageReady', changeHandler);
}

document.addEventListener('DataPageReady', changeHandler);
</script>

[EmmePGN]

I need to add that that the event.target.value is numeric, not text.

[Hastur]

Hello @EmmePGN

You should use double equal character in if statement to compare:

<script>
function hideFieldsHandler(event) {
 let targetInput = document.getElementById("EditRecordCertification");
 let firstField = document.getElementById("EditRecordFrequencyA").parentNode.parentNode;
 let secondField = document.getElementById("EditRecordFrequencyB").parentNode.parentNode;
  
 if (event.target.value == 300) {
  firstField.style.display = "none";
  secondField.style.display = "";
 } else if (event.target.value == 500) {
  secondField.style.display = "none";
  firstField.style.display = "";
 }
}

function changeHandler() {
 document.getElementById('EditRecordCertification').addEventListener('change', hideFieldsHandler);
 let firstField = document.getElementById("EditRecordFrequencyA").parentNode.parentNode;
 let secondField = document.getElementById("EditRecordFrequencyB").parentNode.parentNode;
 firstField.style.display = "none";
 secondField.style.display = "none";
 document.removeEventListener('DataPageReady', changeHandler);
}

document.addEventListener('DataPageReady', changeHandler);
</script>

 

[EmmePGN]

Hello @Hastur

Thank you so much for the help. I am going to try to get the Element of the target input by Name instead of by ID.  Because it's still not working for me.

I'll try a different approach, if the getElementbyName('Certification')[0]; doesn't work.

Many thanks. I'll keep you posted.

 

[SinJunYoung]

Hello @EmmePGN,

I think you need custom JavaScript if you are trying to achieve the initial question. You can simply sandwich the fields using section. Here's what I did:

1. Configure the fields based from your requirements and added the necessary section:

2.) Rule 1 should look like this:

3.) Rule 2 should be like this:

This is my DataPage: https://c1abz415.caspio.com/dp/8c4b60004a5c4be1405d4d928e4f

[EmmePGN]

Hi SinJunYoung,

Thank you so much for helping me.  I have played with Caspio's resident functionality of "rules" many times over.  The added issue is that I need the fields "FrequencyA", and "FrequencyB" hidden by default.  Either one of them would show only when the user chooses either one.  With your recommendation it would mean that FrequencyA and FrequencyB would be visible by default, which runs contrary from what I need.

Thank you so much for helping.

[SinJunYoung]

19 hours ago, EmmePGN said:

Hi SinJunYoung,

Thank you so much for helping me.  I have played with Caspio's resident functionality of "rules" many times over.  The added issue is that I need the fields "FrequencyA", and "FrequencyB" hidden by default.  Either one of them would show only when the user chooses either one.  With your recommendation it would mean that FrequencyA and FrequencyB would be visible by default, which runs contrary from what I need.

Thank you so much for helping.

Hello @EmmePGN,

You're welcome! You can invert the configurations of the logic that I previously created by changing it to 'Not Equal to'. In that case, if they are not the value that is being asked by the Criteria, then they will not be shown by default. 

Rule 1 should be:

And Rule 2 should be:

Again, this is the DataPage link for reference: https://c1abz415.caspio.com/dp/8c4b60004a5c4be1405d4d928e4f

[SinJunYoung]

Just to add, you can find the list of Rules limitation at this HowTo for reference: https://howto.caspio.com/datapages/forms/conditional-forms/