Jump to content

Number of Fields Dependent On Value


Recommended Posts

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!

Link to post
Share on other sites

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)

j4d5Rph.png

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

nxk6YXk.png

 

Is this solution right for you?

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

image.thumb.png.dea27ebbd4446d9642c53a9288fb629a.png

 

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 hiddenimage.png.5e28a9bafbdf1a530240d0eaa9403b42.png

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. 

image.png.84355c81c33dde19b558a50ae7f9eca2.png  image.png.9034f6badc51ccbbc910b2e33cb277ff.png

image.png.3c20e8d88298ddccfa70c2634a52f568.png

 

I hope this helps. @kpcollier

Link to post
Share on other sites
  • 2 weeks later...

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.

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
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...
×
×
  • Create New...