Have you ever wanted to pre-populate a few form fields in a PDF file without using a server tool like the FDF Toolkit; just something quick and dirty? Well – with a clever use of Acrobat JavaScript, the URL property of the doc object you can do just about anything including fill form fields based on a URL’s query string.
JavaScript for Acrobat can be placed at a variety of levels: Document Level, Page Level, Folder Level, Field Level… the list goes no and on. If you place some JavaScript at the document level and you don’t wrap it in a function, the JavaScript will run when the document first opens and before the user gets control of it. By capturing the URL of the PDF file and parsing the query string, your JavaScript can pick up the parameters and then do something interesting… like set the value of a form field.
The following URL’s query string contains key/value pairs. For each key, the script below will add a value to each field in the PDF file with the same name as the key. The whiteList array in the code will allow you to limit which fields can be populated; more on this later.
The URL:
http://pdfdevjunkie.host.adobe.com/pdf/AquoITSurveyFormII.pdf?Name=Joel%20Geraci
The Script:
//only run the script if the PDF file is being viewed in a browser window
if (this.external)
{
//The whiteList defines which fields are permitted to be changed by the URL.
//If you want all fields to be changed, leave the array empty as in "[]"
whiteList = ["Name", "Address", "City", "State", "ZipCode"]
//get the parameters portion of the URL and unescape it so we get the spaces and punctuation back
parametersString = this.URL.substring(this.URL.indexOf("?")+1)
//only run the script if there are parameters
if (parametersString.length > 0)
{
//create an array of key/value pairs
parameters = parametersString.split("&")
//loop through the array...
for each (parameter in parameters)
{
//create a 2 element array for each parameter as [key, value]
kvPair = parameter.split("=")
//set the field named "key" to "value"
fieldName = unescape(kvPair[0])
if (whiteList.length > 0)
{
if (whiteList.indexOf(fieldName) > -1)
{
this.getField(fieldName).value = unescape(kvPair[1])
}
}
else
{
this.getField(fieldName).value = unescape(kvPair[1])
}
}
}
}
Examples:
Link to PDF file without Parameters
Link to PDF file pre-populated for Conrad Simms
Link to PDF file pre-populated for Alex Pink
In practice, you’d probably want a Cold Fusion, PHP script or similar technology to automate the link creation rather than have it hard coded into the HTML but you get the idea.
The examples above are AcroForms but the concept works the same with XFA forms. If you are using an XFA based form, the technique is the same but the script will be slightly different. Rather than using a document level JavaScript, in the XFA case, use the docReady event (the last event to fire before the user gets control).
A couple words of warning.
Once you’ve added such a script to your PDF file. Anyone who can link to the file can populate field values from a URL. I can think of several applications where you don’t want that to be the case. To help in these situations, the script contains a whiteList array. The whiteList array determines which fields can be pre-populated by the values in the query string. The script then checks the whiteList array before modifying the field value. If you want to disable the whiteList and make all fields able to be pre-populated, just leave the array empty. In the Conrad Simms example above, the URL contains values for "phone" and "’mobile" but because of the whiteList, those fields do not get changed.
Additionally, you won’t want to use this for long forms. Different browsers have different maximum lengths for a URL, you may bump up into them sooner than you think.


Display Linked URL inside the PDF
Hello,
I have a situation where it would be desirable to embed a url into a display frame on the pdf so that when the user opens the pdf, it always updates and refreshes the most recent content in the url at the particular moment the pdf was opened. The user could then print out the pdf with the most recent content from the url.
Is this possible?
Thanks
Joel,
Thanks for writing this. However, as a newbie to javascript with PDFs, how do I place this javascript at the Document Level?
Good question, thank’s for reminding me that my readers have a wide range of experience with Acrobat. I’ve been doing this since 1993 so sometimes I forget to start at the beginning.
To create or access document level scripts in Acrobat, select Advanced > Document Processing > Document JavaScript, which enables you to add, modify, or delete document level scripts.
When you add a document level script, Acrobat will wrap it in a function by default. If you want your script to run when the document opens, move your code out of the function and it’ll execute before the first page is rendered.
For a full explanation – go to the link below.
http://livedocs.adobe.com/acrobat_sdk/9.1/Acrobat9_1_HTMLHelp/wwhelp/wwhimpl/js/html/wwhelp.htm?&accessible=true
There are a couple of ways you could accomplish this. If the “frame” – think Text box filled with RTF text – is text only, then you can do this with PDF forms, just set the field to Read-Only and your good to go. However, if you want text and images, you might think about using a SWF annotation.
Thanks Joel. It wil help me in future. Need to learn javascript a little bit
Hi,
Thanks for a very useful article. Just what I was looking for, but are you aware of any way for this to work in Google Chrome?
It works fine for me in IE9 & FF5.
Even works on Safari 5.1 & Opera 11.50
You’re probably using the native PDF viewer in Chrome. You can disable the native viewer and use Reader as a plug-in by following the steps here -> http://blogs.adobe.com/pdfitmatters/2010/12/adobe-reader-and-google-chrome.html
Hi Guys, I’m not seeing this work at all. I click on http://pdfdevjunkie.host.adobe.com/pdf/AquoITSurveyFormII.pdf?Name=Joel%20Geraci and I end up with just the PDF with nothing populated. I’m on Mac OSX Lion, and I’ve tried on FF, Chrome, Safari. I’ve even turned off the internal PDF option in Chrome. Any suggestions? I was really banking on using this technique for some business applications. Thank you.
This only works if Adobe Reader or Acrobat are what’s running in the browser. I’m on Mountain Lion and it’s working fine.
I have a form built that I simply open from my desktop. It does not open through or available by web browser. I have 5 fields. I want to enter a “stock number” based on my inventory and the other four fields to auto populate based on information pertaining to that particular stock number. I want to use the internet for this data, not a file on a server, or database etc. The stock number represents a Vehicle, I am with an auto dealer. When I enter the stock number into the field, I want the folling fields to populate without me doing anything else. The other fields will be: Year, Make, Model, Bodytype, Color. Am I foolish to think this is possible? I understand the techniques to make a combo box with multiple exports for this process but my inventory changes daily so I don’t want to creat and import a new list into the pdf everyday. I also understand that a server with the inventory file would be ideal? But I know nothing of servers. All I have is some access to the website that lists the cars… can anyone point me in the right direction?
I think you’re looking for a LiveCycle Forms solution.
I’m getting a ‘PAGE CANNOT BE FOUND’ whenever I try and pass a querystring to a PDF.
Am I missing something simple?
Do you mean in reference to this article or in general?