Dropdown selection based on fields?

[chriss59216024]

I'm not 100% percent sure how to word this, but I need a dropdown menu to show only a certain selection based on a field.

I will explain what i'm doing. I have a form with three fields. One is Manufacturer, One is Product, and the third is Product color. The Manufacturer and Product field automatically are populated based on a checkbox selection I have of products. So based on what they click on the checkbox, I want the drop-down to only display product colors based on the Product that was chosen.

Is there a way to do this? Maybe some sort of script? I am open to all ideas or better alternative on how to approach this.

I inserted screen shots of the form I have to give you a better idea.

[George_Johnson]

Yes, that's certainly possible using JavaScript. It might be easiest to set up a hidden text field who's sole purpose it to provide a convenient location to place the script, a calculation script in particular. A field's calculate event is triggered whenever the value of any field changes, so whenever either the manufacturer or product field values change, the calculate script of the hidden text field would get triggered.

The script would be programmed to look at the value of each input field, and determine the list items for the dropdown, and then populate the dropdown with this updated list. If you provide more information, including some examples of different inputs, I bet someone here will help get you started on the script.

[chriss59216024]

Could you show me an example of what that would look like? I am really new to javascript. A lot of what I have learned has been through copying other peoples script and tweaking it to work for me.

[MatLac]

you need to use the setItems() method.  It will set the items of your dropdown lists based on the value choosen in another dropdown list.

Supposed you have manufacturer A and B, product 1 and 2 for the first and 3 and 4 for the second

if (this.getField("manufacturer").value == "A") this.getField("product").setItems([" ", "1", "2"])

else if (this.getField("manufacturer").value == "B") this.getField("product").setItems([" ", "3", "4"])

repeat the same process for colors, according to product and be sure to put such a script as a custom validate script, not calculate or it will constantly change the values of your fields

[chriss59216024]

So this is what a wrote:

if (this.getField("manufacturer").value == "CertainTeed") this.getField("Landmark").setItems([" ", "Moire Black", "Sunset Gold"])

else if (this.getField("manufacturer").value == "CertainTeed") this.getField("Landmark Premium").setItems([" ", "Walnut", "Teak"])

So I check the box, it populates CertainTeed for manufacturer and Landmark for the product. How I am reading the code, is based on that information, it will provide the following colors. so to continue, I just use that "else if" line as I did above?

Also for the javascript, you said don't put it in calculate. So I put it in the "Actions" tab and run as javascript? Do I make a dropdown-menu for each manufacturer?

[MatLac]

not exactly.  In your example, you used the same value in the if and the esle if.

if (this.getField("manufacturer").value == "CertainTeed") this.getField("Landmark").setItems([" ", "Moire Black", "Sunset Gold"])

else if (this.getField("manufacturer").value == "CertainTeed") this.getField("Landmark Premium").setItems([" ", "Walnut", "Teak"])

I thought you were looking for the kind of behavior where you have Dropdown3 to display choices based on choices of dropdown2, based on values of dropdown 1.

From what I understand, this would be more appropriate:

if (this.getField("manufacturer").value == "CertainTeed"){

    this.getField("Landmark").setItems([" ", "Moire Black", "Sunset Gold"])

    this.getField("Landmark Premium").setItems([" ", "Walnut", "Teak"])

}

else if (this.getField("manufacturer").value == "some other choice"){

    this.getField("Landmark").setItems([" ", "other color A", "other color B"])

    this.getField("Landmark Premium").setItems([" ", "other color C", "other color D"])

}

is this right?

[chriss59216024]

I believe so. Here is a link to the file if you want to get a better idea of how it works. I see your code, but since i'm pretty knew to JavaScript, so I dont know 100% if that is exactly what I am talking about. I think if you tried it hands on, maybe you will get a feel for what I am trying to do.

Dropbox - Composition Job Package updated 5-18-2018.pdf

[chriss59216024]

the section is on the fourth and fifth page.

[MatLac]

I looked at the file.  first, profile_color needs to be a dropdown list, not a text field.  Then, are the colors based on the choice of manufacturer or the choice of profile?

I see only certain teed as a choice of manufacturer.  There is no way of selecting Owens Corning or GAF.  it will come later?

[chriss59216024]

Color will be based on profile. So if I change the profile field into a drop-down, will the information from the checkbox still populate in that field?

And yes, the other two manufacturers will be coming later. I only got to CertainTeed so far.

[MatLac]

Not the profile field, the color_profile field.  These are two separate fields in your file.

By looking at your file, it is not clear what you are trying to achieve.  Will you be placing checkboxes besides each choices for each manufacturer

OR

Does the checkbox accounts for the complete line across the document and the customer gets to select the manufacturer on page 5?

Because this calls for a completely different behavior and I wish to provide the best one for your needs.

[chriss59216024]

so on page four, you see three categories/manufacturers (imagine all fields are there for the categories). I set it up that when they pick a profile, the manufacturer is tied in with that product. So when looking at the sheet, you see yourself clicking the checkbox next to the product, but not seeing it, I've tied the manufacturer to that product as well. I will have this for each manufacturer.

Did that answer your question? Would it help if I added the fields for the other manufacturers?

[MatLac]

I understand.  But there are lots of things that are not optimised on your project which makes it hard to conceptualise.  It is understandable as you are not familiar Javascript.  I will try to optimize it with you.  You created boxes named "box1", "box2", etc and added the same mouseUp action to each of them, with only minor changes to the code.  This is not the correct way to implement such a behavior.

By using checkboxes, you give the opportunity for the user to select more than one option at the same time which, in return, is in conflict with the behavior you coded.  Depending on the order the boxes are checked will have a different outcome:  only the last box checked will carry its value to page 5.

Before anything else, are checkboxes the right type of field required for the task?  How about radio buttons?  Radio buttons look exactly like checkboxes but only one boxe of the same group can be checked at a time.  Also, once a choice is made, it can be changed but it cannot be completely removed leaving no choice made at all.

[chriss59216024]

When I first started, I was going to mention that only one can be selected. But radio buttons would be even better now that I think about it.  That's a great idea! Can I use the JavaScript in my check-boxes for the radio buttons?

[MatLac]

Yes you could.  But if you are going that route, I would advise to do the following, in order to simplify the code afterwards:

-Instead of putting the code in each button with a slight variation, put your code inside a document-level function and call it from the button.  That way, you type it only once and in the event you need to change part of it, it becomes much easier to do so

//at document-level

function manProdColor(){

//put your code here

}

//and you call it from the action of the button

manProdColor()

-Since you need to output 2 values from the buttons, the manufacturer and the product selected, I suggest using export values that contain both information such as "Certain Teed.Landmark" ,  "Certain Teed.Landmark Premium" ,  etc.  By doing so, you will later be able to use the split() method of the String object to remove the "." and separate both values to export it in according fields

function manProdColor(){

var myValue = event.value                 //assign the String "Certain Teed.Landmark" to myValue

var aMyValue = myValue.split(".")      //Creates an array of Strings ["Certain Teed", "Landmark"]

var manufacturer = aMyValue[0]        //Isolate the Strings

var product = aMyValue[1]                 //Isolate the Strings

this.getField("manufacturer").value = manufacturer

this.getField("product").value = product

}

-Since you have about thirty different products with 30 different color profiles (althought some might be the same), you could use a switch to handle the setItems() method or simple if statements.  If more than one product share the same color profile, instead of using if()&&()&&()&&() which becomes rapidly unreadable, place all those product in an array and use the indexOf() method of the array object to determine if product reside in one group or another.  indexOf() returns the 0-based position of a value inside an array.  If the value is not in the array, it returns -1.

function manProdColor(){

var myValue = event.value                 //assign the String "Certain Teed.Landmark" to myValue

var aMyValue = myValue.split(".")      //Creates an array of Strings ["Certain Teed", "Landmark"]

var manufacturer = aMyValue[0]        //Isolate the Strings

var product = aMyValue[1]                 //Isolate the Strings

this.getField("manufacturer").value = manufacturer

this.getField("product").value = product

var prodGroup1 = ["Landmark", "Landmark Premium"]

var profile1 = [" ","Black","Red","Blue"]

var prodGroup2 = ["Landmark PRO", "Landmark TL"]

var profile2 = [" ","Yellow","Green"]

if (prodGroup1.indexOf(product) != -1)  this.getField("profile color").setItems(profile1)

if (prodGroup2.indexOf(product) != -1)  this.getField("profile color").setItems(profile2)

}

[chriss59216024]

First of all, how do I get to document-level function? And does all of this goes on their? Or just the first part, then the rest on the radio buttons?

[MatLac · Accepted solution]

On the right pane: tools/javascript

Create a name for your script (use the name of the function you are about to create) and click "add"

then it shows like this:

you created a document level function

you call that function whenever you need the code to "run" simply with this line:

manProdColor()

You can call the function from the validate or the calculate event, from another function, etc.  So instead of having to copy the same script to a bunch of fields, you create a function and call that function from those fields.  If you need to change something inside the function, you make the change only once instead of having to go into each individual fields.

here is a simple example:

function hello(){

     app.alert("hello world")

}

hello()  //Calling the function hello() from a button will launch the alert.

If you have a tousand buttons of such and want to change the string to "hello universe", you better wish you used a function instead of hardcoding the same thing 1000x.

You can also pass values as arguments to a function and return a value from a function:

function doubleMe(x){

     return x * 2

}

var a = 10

var b = doubleMe(a)  //b = 20

[chriss59216024]

Got it. I will give it a shot and get back to you with the results.

[MatLac]

Since the value of "manufacturer" is determined but a the checkboxes, you don't need to create a dropdown for it.  As for the script, it is not in the action tab, it is in the validation tab of the "manufacturer" field, under custom validation.