Hide fields conditionally on the Submission from

[Alison]

Hi,

I am trying to create a workflow where the fields are shown or hidden by the selection in the dropdown. I have tried using Rules, however, they are limited in reusing fields in Action. Can someone point me to the right direction on how to achieve this?
For example, I have a dropdown with the Number of children, it can be 1, 2, 3, 4  and 5. And I want to show input fields below based on that selection in the dropdown. So, if I choose 1 in the dropdown, only first input is shown. If I choose 2, the first and the second inputs are shown and so on.

[ParkLoey]

Hi @Alison! I struggles with this not too long ago as well, but rules can still be used to achieve it! What you have to do is reverse the logic!

 

Instead of:

CRITERIA         ACTION

If field = 1          Hide field 2, 3, 4, and 5

You can do it like this:

CRITERIA                                     ACTION

If field is not equal to 1          Hide field 1

If field is not equal to 2          Hide field 2

If field is not equal to 3          Hide field 3

If field is not equal to 4          Hide field 4

If field is not equal to 5          Hide field 5

 

I hope this helps!! 

[Alison]

Hi @ParkLoey, thank you for the suggestion, however, it will show either first, or second, or third inputs. However, what I want is to show one input, then 2 inputs, 3 inputs and so on. I suppose it can be done with the customn JS using Switch case, but I cannot come up with the solution.

[Volomeister]

Hi @Alison

You can add the next script to the header of your DataPage:

 

<script>
document.addEventListener('DataPageReady', () => {

  
const NumberToLabel = {"1": ['Label 1', 'Label 2'],
                       "2": ['Label 1', 'Label 2', 'Label 3', 'Label 4'],
                       "3": ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5', 'Label 6'],
                       "4": ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5', 'Label 6', 'Label 7', 'Label 8']}

const numberPicker = document.querySelector('#InsertRecordSomeNumberField')

const allLabels = Array.from(document.querySelectorAll('label[for*="InsertRecord"]'))
const getElementByLabel = (label, HTMLLablesArray) => {
let element;
for (let i=0; i< HTMLLablesArray.length; i++) {
if(HTMLLablesArray[i].innerText.toLowerCase()==label.toLowerCase()) {
element=HTMLLablesArray[i]
break}}
return element;
}

const showBlock = (label) => {
let LabelContainer = getElementByLabel(label, allLabels).parentElement
LabelContainer.style.display = 'block'
LabelContainer.nextElementSibling.style.display = 'block'
}

const hideBlock = (label) => {
let LabelContainer = getElementByLabel(label, allLabels).parentElement
LabelContainer.style.display = 'none'
LabelContainer.nextElementSibling.style.display = 'none'
}

const hideMultipleBlocks = (arrayOfLabels) => {
arrayOfLabels.forEach(label=>{
hideBlock(label)
})
}



const numberPickerOnChange = (e) => {
  if(e.target.value == '') {
return
}
let selectedNumber = numberPicker.value
hideMultipleBlocks(NumberToLabel[Object.keys(NumberToLabel)[Object.keys(NumberToLabel).length - 1]])
NumberToLabel[selectedNumber].forEach(label=>{showBlock(label)})
}

const main = (HTMLSelectElement, OnchangeHanlder, NumberToLabelObject) => {
hideMultipleBlocks(NumberToLabelObject[Object.keys(NumberToLabelObject)[Object.keys(NumberToLabelObject).length - 1]])
HTMLSelectElement.addEventListener('change', OnchangeHanlder)
}

main(numberPicker, numberPickerOnChange, NumberToLabel)

})

</script>

 

In NumberToLabel variable, you map which inputs should be shown based on chosen number.
In the example below,  number 1 is mapped to  inputs with labels named "Label 1" and "Label 2". It means when choosing 1,  inputs with "Label 1" and "Label 2" will be shown
When choosing 2,  inputs with labels named "Label 1", "Label 2", "Label 3", "Label 4" will be shown and so on.

const NumberToLabel = {"1": ['Label 1', 'Label 2'],
                       "2": ['Label 1', 'Label 2', 'Label 3', 'Label 4'],
                       "3": ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5', 'Label 6'],
                       "4": ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5', 'Label 6', 'Label 7', 'Label 8']}

To adapt this script to your use case, you need to change "Label 1", "Label 2"... and so on, to label names of your respective inputs.

Also, you need to change the CSS selector in the next code snippet:

 

const numberPicker = document.querySelector('#InsertRecordSomeNumberField')

Instead of "#InsertRecordSomeNumberField", it must be selector of your drop-down input where you choose a number. You can find it in the source code of your page. For example, "Guests Number" input in this case has id "#InsertRecordGuests_Number":



Hope this helps

[ParkLoey]

@Alison oh! sorry about that. if that's the case, you can replace "not equal" to "less than"  

I'll be providing the sample here in case someone who wants to use rules stumbles upon this forum post hehe

https://c1hce373.caspio.com/dp/2ddab000f10e4dac72154f0a91b6