Populating textboxes based on content in dropdown boxes

[sw777]

I'm pretty new to JavaScript so I have very little idea how to achieve this. But I'm learning. 🙂

I have three (3) dropdown boxes on a PDF form where the user can select a series of courses. All dropdown boxes contain the same list of courses, for example...

Course A - Design widgets

Course B - Assemble widgets

Course C - Test widgets

Course D - Paint widgets

Course E - Pack widgets

When a selection is made in one of the dropdowns (Course1) an adjacent textbox (NominalHours_Course1) needs to display the number of hours that the course typically runs for (e.g. 5, 8, 12, 15, etc.). This is a predetermined value for each course and needs to be retrieved from a table... (I assume stored somewhere in the document?).

I'm after the same sort of functionality as the MS Excel VLOOKUP function.

Reading some of the posts on this forum, it looks like the relationship between course and hours should be in a document level script, allowing the "Nominal Hours" values to be referenced by any of the dropdown boxes and textboxes. This would also make it easier to change values if required since the changes would only need to be made in the one location.

I have no idea where to start with this. I have tried working through the JavaScript Tutorials on w3schools.com but I think I might be trying to bite off more then I can chew (being such a beginner at JavaScript).

Hoping someone can help.

[try67]

There's no real need for an if-statement, because if the field is empty it will evaluate as zero when converted to a number, which suits the calculation just fine.

So you can do it like this:

event.value = (this.getField("Unit_1_Nom_Sess").value * 90) - Number(this.getField("Unit_1_Req_Sess").value);

[sw777]

Unfortunately that doesn't achieve the desired outcome.

If the nominal sessions are 9, and the user does not elect reduced training, the cost of the unit is to be 9 * 90 = $810

If the user selects only 5 sessions, the result must be 5 * 90 = $450

I'm sure the syntax is wrong, but this is kind of what I'm after...

if (this.getField("Unit_1_Req_Sess").value == 0),

     this.getField("Unit_1_Nom_Sess").value * 90,

     else (this.getField("Unit_1_Req_Sess").value * 90

[try67]

Just multiply the field's value by 90, then:

event.value = (Number(this.getField("Unit_1_Nom_Sess").value) * 90) - (Number(this.getField("Unit_1_Req_Sess").value) * 90);

[sw777]

This would be OK if the user was entering how many sessions they wanted to reduce the original sessions by (e.g. by entering 2 they would reduce the original sessions from 9 to 7).

But the user is entering the number of sessions they will attend, so it needs to be an alternate calculation to determine the alternate fee.

[try67]

Ah OK, I get it now... Use this, then:

var altValue = Number(this.getField("Unit_1_Req_Sess").value) * 90;

if (altValue==0) event.value = Number(this.getField("Unit_1_Nom_Sess").value) * 90;

else event.value = altValue;

[sw777]

Perfect. You're a genius.

Thanks so much for your help through this process. Not only have I now got a working form but you've also helped me to understand a little more of the fundamentals of JavaScript.

Thanks again.

Regards, Steve

[sw777]

Still one minor problem discovered with further testing.

The "Unit_Fee" is displayed as soon as the user enters a number in the "Unit_1_Req_Sess" field, even if a Unit has not been selected in the "Unit_1" dropdown field.

It would be better if the fee was not displayed until after a Unit was selected in the "Unit_1" dropdown field.

[try67]

if (this.getField("Unit_1").value!=this.getField("Unit_1").defaultValue) {
    event.value = (Number(this.getField("Unit_1_Nom_Sess").value) * 90) - (Number(this.getField("Unit_1_Req_Sess").value) * 90);
} else event.value = "";

[sw777]

That fixes the display issue but part of the code is the old version that resolved the difference.

I tried to adapt the new info from Post 32 with the old info from Post 29 but couldn't get it to work.

Here's what I tried...

var altValue = Number(this.getField("Unit_1_Req_Sess").value) * 90;

    if (this.getField("Unit_1").value!=this.getField("Unit_1").defaultValue) && (altValue==0) {

    event.value = (Number(this.getField("Unit_1_Nom_Sess").value) * 90);

}   else event.value = altValue;

[try67]

Add an extra set of brackets around the entire if-condition...

[sw777]

Added brackets as below and no longer throws an error, but doesn't prevent a fee being displayed when "Unit_1" field is empty...

var altValue = Number(this.getField("Unit_1_Req_Sess").value) * 90;

    if ((this.getField("Unit_1").value!=this.getField("Unit_1").defaultValue) && (altValue==0)) {

    event.value = (Number(this.getField("Unit_1_Nom_Sess").value) * 90);

}   else event.value = altValue;

[try67]

I'll need to see the actual file to help you further.

[sw777]

Hi try67.

Your help with the above code has worked like a charm for the past 12 months.

But after I recently made a change to the fees in the form I'm now getting an error when the form is saved, closed and then re-opened.

The person submitting the form thinks everything is OK. It's only when we receive the form and open it that we get the error below and then find the drop down boxes have gone blank.

Hopefully it's something simple I've inadvertently introduced while editing.

A point in the right direction would be much appreciated.

Regards, Steve

[try67]

Can you post the current code you're using for the calculation of that field?

[sw777]

event.value = Number(this.getField("Unit_1_Fee").value) + Number(this.getField("Unit_2_Fee").value) + Number(this.getField("Unit_3_Fee").value) + Number(this.getField("Unit_4_Fee").value) + Number(this.getField("Unit_5_Fee").value) + Number(this.getField("Unit_6_Fee").value) + Number(this.getField("Unit_7_Fee").value) + Number(this.getField("Unit_8_Fee").value);

[try67]

OK, and what are the values of all of these fields? It might be easier if you could share the actual file with us (using Dropbox, Google Drive, etc.).

[sw777]

Registration Form - UEE11 Unit Based Enrolment - COMMERCIAL.pdf - Google Drive

[try67]

Works fine for me... What did you select to make that error message appear?

[sw777]

In Section C of the form I selected the first item in the drop down box (UEENEEA113A - ....).

Then I changed the required sessions to 5.

Everything OK for now.

Then I saved the form (as the user would do).

When I re-open the form I get the error, and the item I selected in the drop down box is removed (box blank).

[try67]

Yes, I see it now. I would disable the code that populates the drop-down

fields when the document is loaded. It seems to cause these issues.

[sw777]

Won't that prevent the fields from being available to the person initially filling in the form?

[try67]

No. The values are already there. There's no real need to re-apply them each time the file is opened.

[sw777]

OK. I'm a little lost. The drop down fields are populated via the Options tab in the Dropdown Properties.

Not sure how I stop them from being re-applied.

It's been a long time since I put this form together and I don't work with JavaScript all that much so I'm having to relearn a lot of this.

[try67]

Go to the doc-level script called "unitData" and remove this code:

var items = [""]; 

for (var i in unitData) 

    items.push(i); 

for (var i=1; i<=8; i++) { 

    var f = this.getField("Unit_"+i); 

    var oldValue = f.valueAsString; 

    f.setItems(items); 

    try { 

        f.value = oldValue; 

    } catch (e) { 

        console.println("Can't apply the old value \"" + oldValue + "\" to the field: " + f.name); 

    } 

}

[sw777]

Now works perfect. Thanks for that.

That code was added so the dropdowns could be populated from the "unitData" Document JavaScript.

Not sure this was ever implemented.

Just means if I ever add any units I will need to add them to all eight dropdowns.

Thanks again.

Regards, Steve