Copy link to clipboard
Copied
Hello Everyone,
I looking for one Drop-Down with multiple bits of data sent to different fields.
Example:
Vehicle 1 (the drop-down selection)
Stats about the vehicle: 3000 pds, 2 axels, & Red
I am looking for the different stats, to go to different fields after the seletion from the drop down is done.
Any assistance would be great, and thank you in advance.
Copy link to clipboard
Copied
+++ EDITED REPLY - CORRECTED TYPO IN THE SCRIPT
this line : var selectedName = event.value; is missing the full variable declaration
it should read var f4 = selectedName = event.value;
++ Adding to the topic,
Hi @ShifftyGuy ,
It looks like you might be rushing a bit; if I'm not mistaken, the part that turns the wheels and supports your vehicle's weight is called an 'axle,' not 'axel.'
I'm mentioning this not to criticize your spelling in your code, but to emphasize how crucial it is to use the correct syntax in programming.
Each programming language has its own rules for building expressions, which are made up of operators, constants, and variables. These can include one or more operands or operators to produce a value. Every punctuation mark, symbol, or operand has a specific role in programming.
In the case of Acrobat JavaScript, especially concerning your objective, you need to write a script that uses a Mouse Event action to fill in values in specific text field objects.
The solution that @Nesa Nurani shared, which is also found in the script that @Tariq Ahmad provided have particular syntax that seems to be missing in your version.
For example, you should look into the errors that pop up when you run the script in the console. By pressing 'CTRL' + 'J', you can open the JavaScript console to check for any errors. You will probably see that the first error message says something like 'Red is not defined.'
So, if you compare your copied script with Tariq's, the JavaScript console is telling you that you missed the necessary quotes in the object literals that should be defined in the variable "cList"
See how you expressed it below:
"Vehicle 1": { color: Red, axel: 2, weight: 2050 },
The object literals such as Red, 2 and 2050 must be in between quotes (""), like this:
"Vehicle 1": { color: "Red", axel: "2", weight: "2050" },
Also, since you are executing the Mouse Event script from the event target field itself (the dropdown menu field object) , you must express variable 'selectedName" as event.target.value instead of 'event.value' :
this line right here ===>> var selectedName = event.value;
change to ===== >>> var selectedName = event.target.value
NOTE: or you can express that variable selectedName using the full name of the dropdown field as shown in Tariq's script like so:
change to ===== >>> var selectedName = this.getField("Name of the dropdwon menu here").value
Now, take a Look at these lines below :
f3.value = cList[selectedName].axel;} <<< ===== you don't need curly braces here
f4.value = cList[selectedName].weight;}
else {
That said, I've noticed that Vehicle 1 and Vehicle 2 have the same weight , 2050? Is this correct? As for Vehicle 3, it has 3 axles... is this also correct? (just want to make sure).
In any case, Below is the refined version of your script with corrections made, leaving the word "axel" spelled as is in your current script:
var cList = {
"Vehicle 1": { color: "Red", axel: "2", weight: "2050" },
"Vehicle 2": { color: "Yellow", axel: "2", weight: "2050" },
"Vehicle 3": { color: "Black", axel: "3", weight: "7452" }
};
var f1 = this.getField("color");
var f2 = this.getField("axel");
var f3 = this.getField("weight");
var f4 = selectedName = event.target.value;
if (cList[selectedName]) {
f1.value = selectedName;
f2.value = cList[selectedName].color;
f3.value = cList[selectedName].axel;
f4.value = cList[selectedName].weight;
} else {
f1.value = "";
f2.value = "";
f3.value = "";
}
Copy link to clipboard
Copied
Use this as validate script of dropdown field:
var vehicleData = {
"Vehicle 1": { WeightField: "3000 lbs", AxleField: "2", ColorField: "Red" },
"Vehicle 2": { WeightField: "4000 lbs", AxleField: "3", ColorField: "Blue" },
"Vehicle 3": { WeightField: "2500 lbs", AxleField: "1", ColorField: "Green" }
};
var data = vehicleData[event.value] || { WeightField: "", AxleField: "", ColorField: "" };
this.getField("WeightField").value = data.WeightField;
this.getField("AxleField").value = data.AxleField;
this.getField("ColorField").value = data.ColorField;
Copy link to clipboard
Copied
You will find solution in this post:
Copy link to clipboard
Copied
Thank you. I will take a look at this also.
Copy link to clipboard
Copied
Hi @ShifftyGuy,
You can absolutely achieve this in Adobe Acrobat using JavaScript. The idea is to use a dropdown menu (for example, listing vehicles), and then use a script to populate other fields (like weight, axles, and color) based on the selected value.
Note: Adobe doesn't provide support for JavaScript unless you have a developer support contract.
Name it something like VehicleDropdown
Add options like:
Vehicle 1
Vehicle 2
Vehicle 3
WeightField
AxleField
ColorField
Right-click on the dropdown > Properties
Go to the Format tab and select None
Go to the Actions tab:
Select Run a JavaScript on On Blur
Click Add… and paste this example script:
var vehicleData = {
"Vehicle 1": { weight: "3000 lbs", axles: "2", color: "Red" },
"Vehicle 2": { weight: "4000 lbs", axles: "3", color: "Blue" },
"Vehicle 3": { weight: "2500 lbs", axles: "2", color: "Green" }
};
var selected = this.getField("VehicleDropdown").value;
if (vehicleData[selected]) {
this.getField("WeightField").value = vehicleData[selected].weight;
this.getField("AxleField").value = vehicleData[selected].axles;
this.getField("ColorField").value = vehicleData[selected].color;
} else {
this.getField("WeightField").value = "";
this.getField("AxleField").value = "";
this.getField("ColorField").value = "";
}
Note:
Make sure the field names match exactly (case-sensitive).
You can add more vehicles and stats by extending the vehicleData object.
Use the On Blur event or On Mouse Exit to trigger the logic after selection.
~Tariq
Copy link to clipboard
Copied
Thank you very much for the quick reply, perfect break down and step by steps.
I applied everything you gave me and it only worked on one vehicle sometimes. Here is the code I used. Did I make a mistake somewhere?
var cList = {
"Vehicle 1": { color: Red, axel: 2, weight: 2050 },
"Vehicle 2": { color: Yellow, axel: 2, weight: 2050 },
"Vehicle 3": { color: Black, axel: 3, weight: 7452 }
};
var f1 = this.getField("color");
var f2 = this.getField("axel");
var f3 = this.getField("weight");
var selectedName = event.value;
if (cList[selectedName]) {
f1.value = selectedName;
f2.value = cList[selectedName].color;
f3.value = cList[selectedName].axel;}
f4.value = cList[selectedName].weight;}
else {
f1.value = "";
f2.value = "";
f3.value = "";}
Copy link to clipboard
Copied
+++ EDITED REPLY - CORRECTED TYPO IN THE SCRIPT
this line : var selectedName = event.value; is missing the full variable declaration
it should read var f4 = selectedName = event.value;
++ Adding to the topic,
Hi @ShifftyGuy ,
It looks like you might be rushing a bit; if I'm not mistaken, the part that turns the wheels and supports your vehicle's weight is called an 'axle,' not 'axel.'
I'm mentioning this not to criticize your spelling in your code, but to emphasize how crucial it is to use the correct syntax in programming.
Each programming language has its own rules for building expressions, which are made up of operators, constants, and variables. These can include one or more operands or operators to produce a value. Every punctuation mark, symbol, or operand has a specific role in programming.
In the case of Acrobat JavaScript, especially concerning your objective, you need to write a script that uses a Mouse Event action to fill in values in specific text field objects.
The solution that @Nesa Nurani shared, which is also found in the script that @Tariq Ahmad provided have particular syntax that seems to be missing in your version.
For example, you should look into the errors that pop up when you run the script in the console. By pressing 'CTRL' + 'J', you can open the JavaScript console to check for any errors. You will probably see that the first error message says something like 'Red is not defined.'
So, if you compare your copied script with Tariq's, the JavaScript console is telling you that you missed the necessary quotes in the object literals that should be defined in the variable "cList"
See how you expressed it below:
"Vehicle 1": { color: Red, axel: 2, weight: 2050 },
The object literals such as Red, 2 and 2050 must be in between quotes (""), like this:
"Vehicle 1": { color: "Red", axel: "2", weight: "2050" },
Also, since you are executing the Mouse Event script from the event target field itself (the dropdown menu field object) , you must express variable 'selectedName" as event.target.value instead of 'event.value' :
this line right here ===>> var selectedName = event.value;
change to ===== >>> var selectedName = event.target.value
NOTE: or you can express that variable selectedName using the full name of the dropdown field as shown in Tariq's script like so:
change to ===== >>> var selectedName = this.getField("Name of the dropdwon menu here").value
Now, take a Look at these lines below :
f3.value = cList[selectedName].axel;} <<< ===== you don't need curly braces here
f4.value = cList[selectedName].weight;}
else {
That said, I've noticed that Vehicle 1 and Vehicle 2 have the same weight , 2050? Is this correct? As for Vehicle 3, it has 3 axles... is this also correct? (just want to make sure).
In any case, Below is the refined version of your script with corrections made, leaving the word "axel" spelled as is in your current script:
var cList = {
"Vehicle 1": { color: "Red", axel: "2", weight: "2050" },
"Vehicle 2": { color: "Yellow", axel: "2", weight: "2050" },
"Vehicle 3": { color: "Black", axel: "3", weight: "7452" }
};
var f1 = this.getField("color");
var f2 = this.getField("axel");
var f3 = this.getField("weight");
var f4 = selectedName = event.target.value;
if (cList[selectedName]) {
f1.value = selectedName;
f2.value = cList[selectedName].color;
f3.value = cList[selectedName].axel;
f4.value = cList[selectedName].weight;
} else {
f1.value = "";
f2.value = "";
f3.value = "";
}
Copy link to clipboard
Copied
Hello @ls_rbls,
Thank you for the information. I wouldn't programmer but I'm learning what I need to, to make this PDF work. I will apply what you have shared and try it again.
TY!
Copy link to clipboard
Copied
You're very welcome @ShifftyGuy
Copy link to clipboard
Copied
I'm still trying to make this work, sadly...
I read though your info a couple times, and checked around on-line a bit before coming back as I really want to understand what I did wrong. I updated the field names so its make a little more sense.
I'm starting with these field fake fields to get the hang of things, because in the end there will be 20+ fields, with 50+ vehicles of information. So I want to make this work so I can use the actual information in the future.
So on my last attempt, The data came back as undefined. Can you assist please?
var vehicleData = {
"Vehicle 1": { WeightField: "3000 lbs", AxleField: "2", ColorField: "Red" },
"Vehicle 2": { WeightField: "4000 lbs", AxleField: "3", ColorField: "Blue" },
"Vehicle 3": { WeightField: "2500 lbs", AxleField: "1", ColorField: "Green" }
};
var selectedName = this.getField("VehicleDropdown").value;
if (vehicleData[selected]) {
this.getField("WeightField").value = vehicleData[selected].weight;
this.getField("AxleField").value = vehicleData[selected].axles;
this.getField("ColorField").value = vehicleData[selected].color;
} else {
this.getField("WeightField").value = "";
this.getField("AxleField").value = "";
this.getField("ColorField").value = "";
}
Copy link to clipboard
Copied
Shouldn't if (vehicleData[selected]) be if (vehicleData[selectedName])?
Copy link to clipboard
Copied
Copy link to clipboard
Copied
Use this as validate script of dropdown field:
var vehicleData = {
"Vehicle 1": { WeightField: "3000 lbs", AxleField: "2", ColorField: "Red" },
"Vehicle 2": { WeightField: "4000 lbs", AxleField: "3", ColorField: "Blue" },
"Vehicle 3": { WeightField: "2500 lbs", AxleField: "1", ColorField: "Green" }
};
var data = vehicleData[event.value] || { WeightField: "", AxleField: "", ColorField: "" };
this.getField("WeightField").value = data.WeightField;
this.getField("AxleField").value = data.AxleField;
this.getField("ColorField").value = data.ColorField;
Copy link to clipboard
Copied
This was extremly helpful and I have been able to create the additional vehicles by their names and variables. So far so good. I will let you know how it goes!
Copy link to clipboard
Copied
Hello!
I hope you are doing well, and we're glad to know that the suggestions from our community product expert worked for you. Feel free to reach out if you need any further assistance.
Thanks,
Anand Sri.
Copy link to clipboard
Copied
Video tutorial:
Copy link to clipboard
Copied
I love that tutorial @PDF Automation Station , freaking amazing!!!
Find more inspiration, events, and resources on the new Adobe Community
Explore Now