Skip to main content
FIFE
FIFE
Participant
May 21, 2016
Answered

form field auto color/data change based on input on different page

  • May 21, 2016
  • 1 reply
  • 2003 views

Hello!

I have recently recieved help on the forums and was able to write javascript to change the form fill and border based on an individuals input(thank you!).  I am now encountering issues as I continue working on this document.  I drew a picture that illustrates 3 different outcomes, its located above.  To explain what i need, heres how the form is supposed to work:

1. a user inputs the status of pieces of equipment on page 2, I need to ensure that only AAA, BBB, CCC, or N/A are acceptable inputs.  Each value changes the form field as illustrated above and N/A makes no change to the field at all. 

2. Based on the user inputs on page 2, I am trying to get a read only form field on page one "Overall Status" to change color, and change its value based on those inputs. 

The three columns above illustrate 3 potential outcomes of the overall status on page 1, ie:

     1: AAA [return key] date from Date1 field on page 2. (all user entries were AAA (N/A which is not factored in))

     2: BBB [return key] date from Date1 field on page 2. (the user's entry contained one or more of BBB or CCC values)

     3: CCC [return key] date from Date1 field on page 2. (all user entries were CCC)

I am making this form at work, and do not have adobe Adobe Acrobat XI ver: 11.0.13 at home.  Thanks for the help and if my description or picture is confusing let me know and I can try to explain it differently.  Each column is a potential document, the document itself does not have 3 columns.

J

This topic has been closed for replies.
Correct answer Karl Heinz Kremer

Let's see if I understand this correctly:

1. The user enters "AAA", and the field background/stroke color turns green.

2. The user enters "BBB", and the field background/stroke color turns yellow.

3. The user enters "CCC", and the field background/stroke color turns red.

4. The user enters "N/A", and the default color (looks like teal) will be used

4. If all entries on page 2 are of the same color or set to "N/A", that color will be used for the field on page 1

5. If all entries on page 2 are not of the same color or set to "N/A", the color "yellow" will be used for the field on page 1

Does that describe the behavior of the form?

I would use a document level function to handle both the input validation and the color selection. The first part of the function (validation) is fairly straight forward. The second part (setting the current field color) is something you should already know how to do. The third part, determining the color of the overall status field is a bit more tricky. I would - in a loop - look at all fields that are not the current field (because you can just do a Doc.getField() call), and then take the current field information from the event object in the validation script and determine what the output status should be (and then set the color accordingly).

Something like this should work: 

function ValidateStatus() {
    // is the data entered either "AAA", "BBB", "CCC", or "N/A"?
    if (event.value == "AAA") {
        event.target.fillColor = color.green;
        event.target.strokeColor = color.green;
    } else if (event.value == "BBB") {
        event.target.fillColor = color.yellow;
        event.target.strokeColor = color.yellow;
    } else if (event.value == "CCC") {
        event.target.fillColor = color.red;
        event.target.strokeColor = color.red;
    } else if (event.value == "N/A" || event.value == "") {
        event.target.fillColor = color.cyan;
        event.target.strokeColor = color.cyan;
    } else {
        event.rc = false;
        app.alert("Only the values 'AAA', 'BBB', 'CCC', or 'N/A' are allowed");
        return;
    }
    // set the field on page 1
    var fields = ["Status1", "Status2", "Status3", "Status4"];
    var theStatus = "N/A";
    for (var i in fields) {
        var v;
        if (fields != event.target.name) {
            v = this.getField(fields).value;
        }
        else {
            v = event.value;
        }
        if (v == "N/A" || v == "") {
            continue;
        }
        else if (theStatus == "N/A") {
            theStatus = v;
        }
        else if (theStatus != v) {
            theStatus = "BBB";
        } 
    }
    var msg = theStatus + "\n" + this.getField("Date1").value;
    var theColor;
    if (theStatus == "CCC") {
        theColor = color.red
    } else if (theStatus == "BBB") {
        theColor = color.yellow;
    } else if (theStatus == "AAA") {
        theColor = color.green;
    } else {
        theColor = color.cyan;
    }
    var f = this.getField("OverallStatus");
    f.value = msg;
    f.fillColor = f.strokeColor = theColor;
}

You would then call this from the four fields as custom validation script:

ValidateStatus(event);

1 reply

Karl Heinz Kremer
Community Expert
Karl Heinz KremerCommunity ExpertCorrect answer
Community Expert
May 22, 2016

Let's see if I understand this correctly:

1. The user enters "AAA", and the field background/stroke color turns green.

2. The user enters "BBB", and the field background/stroke color turns yellow.

3. The user enters "CCC", and the field background/stroke color turns red.

4. The user enters "N/A", and the default color (looks like teal) will be used

4. If all entries on page 2 are of the same color or set to "N/A", that color will be used for the field on page 1

5. If all entries on page 2 are not of the same color or set to "N/A", the color "yellow" will be used for the field on page 1

Does that describe the behavior of the form?

I would use a document level function to handle both the input validation and the color selection. The first part of the function (validation) is fairly straight forward. The second part (setting the current field color) is something you should already know how to do. The third part, determining the color of the overall status field is a bit more tricky. I would - in a loop - look at all fields that are not the current field (because you can just do a Doc.getField() call), and then take the current field information from the event object in the validation script and determine what the output status should be (and then set the color accordingly).

Something like this should work: 

function ValidateStatus() {
    // is the data entered either "AAA", "BBB", "CCC", or "N/A"?
    if (event.value == "AAA") {
        event.target.fillColor = color.green;
        event.target.strokeColor = color.green;
    } else if (event.value == "BBB") {
        event.target.fillColor = color.yellow;
        event.target.strokeColor = color.yellow;
    } else if (event.value == "CCC") {
        event.target.fillColor = color.red;
        event.target.strokeColor = color.red;
    } else if (event.value == "N/A" || event.value == "") {
        event.target.fillColor = color.cyan;
        event.target.strokeColor = color.cyan;
    } else {
        event.rc = false;
        app.alert("Only the values 'AAA', 'BBB', 'CCC', or 'N/A' are allowed");
        return;
    }
    // set the field on page 1
    var fields = ["Status1", "Status2", "Status3", "Status4"];
    var theStatus = "N/A";
    for (var i in fields) {
        var v;
        if (fields != event.target.name) {
            v = this.getField(fields).value;
        }
        else {
            v = event.value;
        }
        if (v == "N/A" || v == "") {
            continue;
        }
        else if (theStatus == "N/A") {
            theStatus = v;
        }
        else if (theStatus != v) {
            theStatus = "BBB";
        } 
    }
    var msg = theStatus + "\n" + this.getField("Date1").value;
    var theColor;
    if (theStatus == "CCC") {
        theColor = color.red
    } else if (theStatus == "BBB") {
        theColor = color.yellow;
    } else if (theStatus == "AAA") {
        theColor = color.green;
    } else {
        theColor = color.cyan;
    }
    var f = this.getField("OverallStatus");
    f.value = msg;
    f.fillColor = f.strokeColor = theColor;
}

You would then call this from the four fields as custom validation script:

ValidateStatus(event);
FIFE
FIFEAuthor
Participant
May 22, 2016

You're absolutely correct!  I was so excited about this, I went ahead and purchased the pro version for my home computer so I could go ahead and try it out without having to wait till tomorrow at work.  Here's what I found

Yes, that is how the form should work, and implementing your script it does exactly that.  I am now encountering a couple small issues such as the date not populating on the overall status unless the Date1 field had a value before a status field is used.  I am assuming this is because the date field does not have a validation script so when the status field is used it will validate with whatever is in the date field even if it has no value.  When this happens, I figured out I needed to enter the date and then re-input a value into a status field to prompt the validation script to re-run and have the overall status reflect the color/value/and date.

If a user enters the date first, and then fills out the status boxes, there is no issue and it works perfectly.  But, how can I protect against someone filling the form out in a different order?  I have tried creating a validation script for the Date1 field but I cannot get it to work without loosing the functionality of the validation script you provided.  Thanks so much for the help!

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices