Jump to content

Hide fields conditionally on the Submission from


Recommended Posts

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.

Link to comment
Share on other sites

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!! :D

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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":

image.thumb.png.7b38244e79f3a5a4270882baade8dd68.png

Hope this helps

Link to comment
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
Reply to this topic...

×   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...
 Share

×
×
  • Create New...