Products Technologies Demo Docs Blog Support Company

Generating Interactive PDF Forms by Injecting JavaScript

Using TX Text Control, it is possible to export documents with form fields to fillable PDFs. This article shows how to inject JavaScript to add interaction to form fields.

Generating Interactive PDF Forms by Injecting JavaScript

TX Text Control provides a way to create documents with fillable form elements, such as form text boxes, check box fields and drop-down elements. Documents with form elements can be created similar to mail merge templates and dynamically pre-completed with known values. This helps to generate custom forms where some fields are already completed with known values to accelerate the completion process and to improve the user experience.

Using TX Text Control, PDF documents can be easily created, shared and collected in business applications. PDF forms with fillable form elements can be created and collected by reading the completed documents in order to analyze and store the data.

In various applications, it might be be useful to add interaction to form fields in the PDF document. Consider a text field that should contain the current date at the time the document is opened. TX Text Control is able to export the PDF documents with those fillable form fields including additional JavaScript to control the interaction between fields. Technically, any document level JavaScript can be embedded using the SaveSettings class and the DocumentLevelJavaScriptActions property.

The following code loads a JavaScript code text file in order to embed it to a PDF document:

string jsAction = File.ReadAllText("script.js");

SaveSettings saveSettings = new SaveSettings { 
  DocumentLevelJavaScriptActions = new string[] { jsAction } 
};

textControl1.Save("test.pdf", StreamType.AdobePDF, saveSettings);

JavaScript API Reference

You can download the full Adobe JavaScript API Reference directly from Adobe.

acrobatsdk_jsapiref.pdf

Use Cases

In the following use cases, typical scenarios are explained where JavaScript can be used to add logic and interaction to form fields.

Populating Form Text Fields

Consider a form text field that should be populated with the current date at the time the user is opening this document.

Fillable Forms with Text Control

The following JavaScript is populating the form text field with the name MyDateField with the current (client-side) date string. Additionally, the required property makes this field mandatory.

var date = new Date();

var dateField = this.getField('MyDateField');
dateField.required = true;
dateField.value = util.printd('m/d/yyyy', date);

When opening this document in Acrobat Reader (or any other PDF viewer), the form text field contains the current date:

Fillable Forms with Text Control

Adding Events

In the next example, the value of a form text field should be changed when the state of a checkbox is changed. The following screenshot shows a template with 2 checkboxes and 2 form text fields:

Fillable Forms with Text Control

In the following JavaScript code, the MouseUp event is attached to both checkboxes to call the function validate. The MouseUp is not only fired for mouse actions, but keyboard actions as well. In the attached event handler, the value of the associated form text field is changed depending on the check state.

var checkBox1 = this.getField('CheckBox1');
var checkBox2 = this.getField('CheckBox2');

checkBox1.setAction('MouseUp', 'validate(checkBox1, "FormText1")');
checkBox2.setAction('MouseUp', 'validate(checkBox2, "FormText2")');

function validate(field, formTextField) {
        if (field.isBoxChecked(0)) {
                this.getField(formTextField).value = 'Checked';
        }
        else {
                this.getField(formTextField).value = 'Not Checked';
        }
}

Fillable Forms with Text Control

Conditional Changes

In this scenario, a form text field is enabled in case a specific value of a drop-down box is selected (Other in this case). The following JavaScript is adding the conditional logic to the associated form fields:

var dropDown = this.getField('MyDropDown');
var formText = this.getField('MyFormText');
formText.readonly = true;

dropDown.setAction('MouseUp', 'validate(dropDown, formText)');
dropDown.setAction('OnBlur', 'validate(dropDown, formText)');

function validate(field, textField) {
        if (field.value === 'Other') {
                textField.value = '[ Enter a value here ]';
                textField.readonly = false;
                app.alert('Please enter a value', 1, 0, 'Text Control PDF');
        }
        else {
                textField.value = '';
                textField.readonly = true;
        }
}

Fillable Forms with Text Control

Conclusion

Using TX Text Control, it is possible to create and deploy forms with additional logic. These forms can be deployed using the DocumentEditor, the DocumentViewer or using a PDF to collect user form data. Using embedded JavaScript code, it is possible to add workflows, logic and validation to form fields in PDF documents.

Stay in the loop!

Subscribe to the newsletter to receive the latest updates.

Related Posts

ASP.NETWindows FormsWPF

Deploying Forms with TX Text Control

TX Text Control can be used to create sophisticated, smart forms to collect data from users in different ways. This article gives an overview of various ways to deploy forms using TX Text Control.


ASP.NETWindows FormsWPF

Extract Text and Data from PDF Documents in C#

TX Text Control can be used to create and edit Adobe PDF documents programmatically. But it is also possible to import PDF documents to read, extract and manipulate them. This article shows…


ASP.NETWindows FormsWPF

Creating PDF Files using TX Text Control .NET in C#

TX Text Control allows developers to create PDF files programmatically using C#. This article shows various ways to create Adobe PDF documents.


ASP.NETWindows FormsWPF

Form Field Handling in PDF Documents

Since TX Text Control supports form fields, it is possible to either export form fields in the PDF document or to flatten the form fields to export text only without the field functionality. This…


ASP.NETJavaScriptWindows Forms

Auto-Sizing Tables Proportionally

This article shows how to resize a table to fit the complete page by adjusting each column proportionally.