Jump to content
  • 0
Sign in to follow this  
EmmePGN

Show/Hide Fields Based on Drop Down Selection

Question

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.

 

 

 

 

 

 

 

 

 

 

Share this post


Link to post
Share on other sites

8 answers to this question

Recommended Posts

  • 0

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.

Share this post


Link to post
Share on other sites
  • 0

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>

Share this post


Link to post
Share on other sites
  • 0

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>

 

Share this post


Link to post
Share on other sites
  • 0

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.

 

Share this post


Link to post
Share on other sites
  • 0

Hello @EmmePGN,

I think you don't 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:

image.png.fc3a5a1ed6be0ce7a17723b7c04d3ca0.png

2.) Rule 1 should look like this:

image.png.cf0d6f9cd852b8efea705852aa3f4f52.png

3.) Rule 2 should be like this:

image.png.dc90f835578dd34a5a46ceed821d3f4a.png

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

Share this post


Link to post
Share on other sites
  • 0

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.

Share this post


Link to post
Share on other sites
  • 0
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:

image.png.fb2ee524ee870bafd634f21c3e26c65d.png

And Rule 2 should be:

image.png.f1e12686046c52500953afad89302f5d.png

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...