How Do I Hide a Drop Down in a Form if No Results Found?

I am building an order form, and some products will have add-ons available to upgrade with.

For example, someone will be ordering a TV/Phone/Internet bundle deal, and have the option to upgrade their Internet speed.

 

I have all of that working great since I am filtering add-ons by type, but I want to be able to hide drop downs that do not have add-ons found for that type.

 

So, an example, would be that a product gives the user the option to add-on Internet service, but I also have drop downs for Phone add-ons, Cable add-ons, etc that are blank.

Anyone have a quick javascript code that will hide a drop down field in a form if there are no results under the Select option?

 

Thanks

Jason

Ok, I have been trying really hard to get this to work.

 

I tried the following, but in my Chrome console, it keeps saying "Uncaught (in promise) TypeError: Cannot read property 'length' of undefined"

 

Here is my code

 

$(document).on('knack-scene-render.scene_79', function (event, view, data) {
$("#kn-input-field_380").chosen().change(function () {
var CheckOptions = $("#connection-picker-chosen-field_380").find("option");
if (CheckOptions.length == 0) {
$("#connection-picker-chosen-field_380").parent().parent().hide();
}

else
{
$("#connection-picker-chosen-field_380").parent().parent().show();
}
});
});

Sunny, I am trying to get this to work, but I am not sure what to put in place of the parent and child drop down ID's

 

I put in the div ID for the drop down for both, but that just broke the page.

Here is what I tried:

$(document).on('knack-scene-render.scene_79', function (event, view, data) {
$("#view_371_field_374_chzn").chosen().change(function () {
var CheckOptions = $("#view_371_field_374_chzn").find("option");
if (CheckOptions.length == 0) {
$("#view_371_field_374_chzn").parent().parent().hide();
}

else
{
$("#view_371_field_374_chzn").parent().parent().show();
}
});

 

Here is the page if you don't mind taking a look.

https://gearheart.knack.com/gearheart-broadband-structure-1#service-areas/buy/5b2212537f67c03d97807ccb/customize/5b2212567f67c03d97807de9/

Hello Jason,

 

yes one for each dropdown. 

 

Regards,

Sunny Singla

Thanks Sunny! Will I need one of those code blocks for each drop downs that I have in the form, or will I just need one?

I am not real familiar with JavaScript, but I know enough to use the Chrome Inspect tool to find the ID's, scenes, and fields that I need.

 

Didn't know I could add a filter to the sum and count fields. I will go find out how to do that now. Thanks! I will follow up on my findings. 

 

 

Hello Jason,

 

Try below code 

 

 

$("#parentDropDownID").chosen().change(function () {
var CheckOptions = $("#ChildDropDownID").find("option");
if (CheckOptions.length == 0) {
$("#ChildDropDownID").parent().parent().hide();
}

else
{
$("#ChildDropDownID").parent().parent().show();
}
});

 

Regards,

Sunny Singla

ssingla1985@gmail.com

+919855089359

`that should be OK - but you'll need 3 fields - with the sum, count etc fields you can add a filter.

I think I understand what you are saying.

 

The issue I am having, is when I add the count field, I can count the number of 'add-ons' that I have for a product, but the issue comes into play when I have multiple connections to the same object, but filtering them on a page based on 'add-on type' to only show the add-ons of a particular type per drop down.

I hope that makes sense.

I have an Orders object, that has 3 connections back to the Add-Ons Object. That way, when I make the form, I can add each of those Connections, then put in a filter that just shows that add-on type for the drop down.

So, I will have a drop down called Cable Add-Ons, that only shows the add-ons that have the 'Cable' type...and I will have another drop down from Phone Add-Ons, that only shows the add-ons that have the 'Phone' type, etc.

But they all link back to the same Add-Ons Object.

Then, if a Product only has add-ons of the 'Cable' type, I want to be able to hide the other 2 drop downs, so that the user doesn't see just a blank drop down.

 

 

I've done this a few times - how depends on the data structure and whether it's an add or edit form. You could have a count field in the records your linking to (in a parent dropdown) which counts the number of linked records for your second dropdown - this is then brought into your record using an equation field and if it's zero hide the second drop down.

This is fairly easy if the screen is an edit one because the calculated fields can have the values available to you to use. But, in an add form its more difficult - what I've done a couple of times is have a simple new record form which simply asks for the parent dropdown value and then this uses a submit rule to redirect to an edit for for the new record.

Hope this helps?