Skip to main content
Participant
April 5, 2016
Question

change the border color based off a dropdown selection

  • April 5, 2016
  • 1 reply
  • 1224 views

I've been looking and haven't quite found what I am looking for.  I have been tasked with working on a form.  Why?  I don't know.  I am a graphics and video guy so someone thinks because its a PDF I know what to do. 

The form is used for several different personnel procedures and depending what it is used for some fields need to be filled out, and others don't.  What is being requested is that when an option is selected from a drop down menu (7 different options) that it would highlight (change the border color) of the fields that need to be filled out for that option. 

I do understand that this is javascript and I do understand javascript, I just never had to do this in a PDF before.

So from my ActionDrop  drop down menu you pick "New Hire" option all the fields that involve the new hire process are highlighted (change the border color from Black to Red), same goes for if you select "Separation" from the drop down.  Any help with this would be awesome.  Thanks

This topic has been closed for replies.

1 reply

Inspiring
April 5, 2016

The programming could be simplified if you used hierarchical field naming for all of the fields you want to control. For example, instead of using fields names of "employee_name" and "address", added a prefix of something like "HL", so the field names get changed to "HL.employee_name" and "HL.address". If you do this, the custom Validate JavaScript for the dropdown could be something like:

// Custom Validate script for dropdown

(function () {

    // Initialize some variables

    var i, aFields = [], f_prefix = "HL";

    // Create an object to associate an array of field names with each dropdown item

    var oFields = {};

    oFields["item1"] = ["field1", "field2", "field5", "field8", "field9"];

    oFields["item2"] = ["field1", "field3", "field4", "field7", "field10"];

    oFields["item3"] = ["field1", "field4", "field11", "field12", "field13"];

    oFields["item4"] = ["field1", "field2", "field3", "field4", "field5"];

    oFields["item5"] = ["field2", "field4", "field6", "field8", "field10"];

    oFields["item6"] = ["field1", "field3", "field5", "field7", "field9"];

    oFields["item7"] = ["field3", "field4", "field5", "field6", "field7"];


    // Start be resetting all of the HL field's border color to black

    getField("HL").strokeColor = color.black;


    // Set the aFields array to the array of fields corresponding to the selected dropdown item

    aFields = oFields[event.value];


    // Loop through the fields in the array and set their border color to red

    for (i = 0; i < aFields.length; i += 1) {

        getField(f_prefix + "." + aFields).strokeColor = color.red;

    }


})();




This could be improved in a number of ways, but it should get you started. Change "item1", "item2", etc, with the actual dropdown values, and "field1", "field2", etc. in each array with the field names (without the "HL" prefix) corresponding to each dropdown item.


Inspiring
April 5, 2016

Note that I corrected a few typos in the code above, so be sure to use the updated code.

Participant
April 5, 2016

George -

Thank you for the speedy reply.  Am I adding this code to the properties>actions of the drop down or into the format tab?  This javascript into a PDF is not making sense.  Thank you.