Conditionally Hide Field/Element On Datapage

[RonAnderson]

Hi, I have a datapage submission form on which I want to hide a dropdown box IF the response on another dropdpwn box is "No". Here's the code snippet I picked up earlier but it doesn't work for me.

<script type= "text/javascript">
var v = document.getElementById("InputRecordDropdownBox_1").value;

if v =="No"
{
document.getElementById("InputRecordDropdownBox_2").style.display = "none";
}
</script>

I also want this to be replicated on a report datapage and understand the keyword "InputRecord" needs to be changed to "EditRecord"?

As always, your help is greatly appreciated.

Ron

[CoopperBackpack]

Hi @RonAnderson,

kpcollier provided the correct solution. To hide the field we need to listen for the value change in the Cascading Text field (eventListener is needed).

I just wanted to add that if the Refrigerant field is a Cascading dropdown it is an input tag but not the select, so we need to reference it in a slightly different way.

The code should work on the Submission form if you select elements with the prefix 'InsertRecord':

<script>
  document.addEventListener('DataPageReady', hideDropdownHandler);
  
  let  yesNoField = document.querySelector('input[id^="InsertRecordRefrigerant"]');
  
  function hideDropdownHandler(){
    yesNoField.addEventListener('change', hideField);
    document.removeEventListener('DataPageReady', hideDropdownHandler);
  }
  
  function hideField() {
  
    const refrigerantLabel = document.querySelector('label[for="InsertRecordRefrigerant_Gas"]');
    refrigerantLabel.style.display = (yesNoField.value === "No") ? "none" : "block";
  
    const refrigerant = document.querySelector('select[id^="InsertRecordRefrigerant_Gas"]');
    refrigerant.style.display = (yesNoField.value === "No") ? "none" : "block";
  }
</script>

And on the Details page if you select elements with the prefix 'EditRecord':
 

<script>
  document.addEventListener('DataPageReady', hideDropdownHandler);
  
  let  yesNoField = document.querySelector('input[id^="EditRecordRefrigerant"]');
  
  function hideDropdownHandler(){
    yesNoField.addEventListener('change', hideField);
    document.removeEventListener('DataPageReady', hideDropdownHandler);
  }
  
  function hideField() {
  
    const refrigerantLabel = document.querySelector('label[for="EditRecordRefrigerant_Gas"]');
    refrigerantLabel.style.display = (yesNoField.value === "No") ? "none" : "block";
  
    const refrigerant = document.querySelector('select[id^="EditRecordRefrigerant_Gas"]');
    refrigerant.style.display = (yesNoField.value === "No") ? "none" : "block";
  }
</script>

 

[kpcollier]

@RonAnderson,

It is InsertRecord you are looking for, not InputRecord. 

If DropdownBox_1 and DropdownBox_2 are the ID's of your elements, then it'd be like this:

var v = document.getElementById("InsertRecordDropdownBox_1").value;

if v =="No"{
  document.getElementById("InsertRecordDropdownBox_2").style.display = "none";
}

Keep in mind, if you are using any kind of 'special' elements (like calc value, cascading elements, etc.) it won't work like this. You'd need to use querySelector.

var v = document.querySelector("#InsertRecordDropdownBox_1").value;

if (v === "No") {
  document.querySelector("#InsertRecordDropdownBox_2").style.display = "none";
}

You are correct that for EditRecord for report pages.

[kpcollier]

First, if you can do this with Rules, it is much easier to set up and to deal with later. A lot of times you can combine rules so that you can use the same field for multiple Actions, if you've already used that field in a Rule. If Refrigerant = No, Hide Refrigerant_Gas (or the section that field is in). I think you should still be able to use Refrigerant in multiple Rule Criterias if it's already being used. If Refrigerant_Gas isn't being used in a Rule Action, I'm not sure why this wouldn't be possible.

If you want to stay the JS route for whatever reason, try this below. I think we were having multiple problems - first not selecting the dropdown values correctly, and second not listening to changes in the Refrigerant dropdown. This should hide the Refrigerant_Gas dropdown if Refrigerant = No, and reappear if it is changed to Yes.

document.addEventListener('DataPageReady', function() {
  hideDropdown();
});

var yesNoField = document.querySelector('select[id^="EditRecordRefrigerant"]');
yesNoField.addEventListener('change', function() {
  hideDropdown();
});

function hideDropdown() {

  var refrigerantLabel = document.querySelector('label[for="EditRecordRefrigerant_Gas"]');
  refrigerantLabel.style.display = (yesNoField.value === "No") ? "none" : "block";

  var refrigerant = document.querySelector('select[id^="EditRecordRefrigerant_Gas"]');
  refrigerant.style.display = (yesNoField.value === "No") ? "none" : "block";
}

 

[RonAnderson]

Hi @kpcollier and thanks for your response and pointing out my basic error on the use of "input" instead of "insert". I applied your code snippets but unfortunately I couldn't make it work. The elements I have are a cascading text field, which holds the variable of "Yes" or "No". If the value is No then the dropdown box should be hidden. In the code below I've entered the field names as they appear in the data table.

I tried the 2 snippets of code as you supplied but  they didn't work so I tried a combination, as follows

<script type= "text/javascript">
var v =  document.querySelector("#InsertRecordRefrigerant").value; //CascadingTextField
if (v === "No") {
  document.getElementById("InsertRecordRefrigerant_Gas").style.display = "none"; //Dropdown
}
</script>

and it too, didn't work. In all attempts the elements I want hidden just won't hide.

The "Refrigerant" element has been included in a rule. Could this impact on what I'm trying to achieve?

Kind regards

Ron

[RonAnderson]

Hi again @CoopperBackpack and thanks for your advice. I have this working now with a suggestion from @kpcollier . You'll no doubt have concluded that I'm still a novice when it comes to JS but I am improving and for that I'm studying your code too. I now realise that there are different ways to handle different kinds of event as you've pointed out.

So thank you loads, I greatly appreciate it

[Kronos]

Hi everyone,  sharing this Howto article in case it might help others:

Conditional Forms

 

Cheers!