Number of Fields Dependent On Value

[kpcollier]

I apologize for the bad title - not too sure what to name this one. 

I have one dropdown field "Number of Employees:" where the user can select the numbers 1-8. 

I have 8 other text fields: Employee1, Employee2, Employee3...Employee8.

I am trying to figure out a way to show the same number of Employee fields as the value of Number Of Employees. 

In Example, if the user set the Number Of Employees dropdown to 1, I would want 1 of the Employee text fields to show, and the other 7 to be hidden. If they selected 4, I would only want 4 to show and the other 4 to be hidden. If 8 was chosen, all 8 are shown. 

I've been trying to tinker with standard features such as Rules but I don't think I can get it going. Any help is appreciated!

[CoopperBackpack]

Hello @kpcollier,

If I got your inquiry correctly then you need to have a dynamic dropdown based on another dropdown. 

This requires a rather bulky JS solution as I understand. 

Did you consider using a Cascading dropdown on the DataPage? 

You just need to have a well-structured lookup table (please refer to this example on the screenshot)

So, the first field is dropdown and the second one is the Cascading dropdown (https://howto.caspio.com/datapages/datapage-components/cascading-elements/)

 

Is this solution right for you?

[SinJunYoung]

On 1/8/2021 at 3:17 PM, kpcollier said:

I apologize for the bad title - not too sure what to name this one. 

I have one dropdown field "Number of Employees:" where the user can select the numbers 1-8. 

I have 8 other text fields: Employee1, Employee2, Employee3...Employee8.

I am trying to figure out a way to show the same number of Employee fields as the value of Number Of Employees. 

In Example, if the user set the Number Of Employees dropdown to 1, I would want 1 of the Employee text fields to show, and the other 7 to be hidden. If they selected 4, I would only want 4 to show and the other 4 to be hidden. If 8 was chosen, all 8 are shown. 

I've been trying to tinker with standard features such as Rules but I don't think I can get it going. Any help is appreciated!

I did this one last year  https://c1abz415.caspio.com/dp/8c4b6000a85530fe3c4c4440a562

If this is what you wanted to achieve, then yes, this can be done by rules. You may have a lot of Rules Actions but the key is to do a reverse and instead do them from the criteria. Here's how I did it:

1. Pulled up the n number of fields. Make sure that there is a selector, in this case a virtual field that were divided from the rest of the fields via section. 

 

2. From the Rules tab, create a rule. Remember that the number of rules will depend on the number of fields that will be dynamically hidden

3. Set each of the rule's criteria by setting the value selected to every number. From the example below, If virtual value is matches from numbers 1-5, the logic's action is to hide the 6th field. Repeat until the last rule. 

  

 

I hope this helps. @kpcollier

[kpcollier]

@CoopperBackpack I appreciate the help, but that is not quite what I was going for. I think I will use this in another application I have, though! Thanks.

[kpcollier]

@SinJunYoung This is exactly what I am going for. Thank you for all of the help!

[FaeFaeFae]

Just in case somebody prefers JS over rules, you can try the following code too. You need to add Header&Footer for your DataPage Elements and paste this to the Footer (with HTML Editor disabled on the Advanced tab).
This code will also hide all of the 8 fields until something is selected from the dropdown. If you want them all to be initially shown, just remove the 2 lines that say "//hide all fields on page load''.
 

<script type="text/javascript">
function hide(fields){
   fields.forEach(el => el.style.cssText = "display: none;");
}
document.addEventListener('DataPageReady', function (event) {
   var employeeFields = Array.from(document.querySelectorAll('[id^="InsertRecordEmployee"]'));
   var employeeLabels = Array.from(document.querySelectorAll('label[for^="InsertRecordEmployee"]'));
   hide(employeeFields); //hide all fields on page load
   hide(employeeLabels); //hide all fields on page load
   document.getElementById("cbParamVirtual1").onchange= function(){
      hide(employeeFields);
      hide(employeeLabels);
      var num = document.getElementById("cbParamVirtual1").value;
      for (let i = 0; i < num; i++){
         employeeFields[i].style.cssText = "display: inline-block;";
         employeeLabels[i].style.cssText = "display: inline-block;";
      }
  }
  });
</script>

 

Note:

('[id^="InsertRecordEmployee"]'))
('label[for^="InsertRecordEmployee"]'))

Here, "Employee" is the beginning of the database field names (like Employee1, Employee2 etc) so it should match your table design.