Fill PDF form fields in JavaScript

This guide will walk you through how to programmatically fill out PDF form fields. You can also try it now with our form fill demo.

Filling widget values

You can fill widget values by using the WidgetAnnotation.setValue API. This also internally updates the associated field value.The following sample code shows how to clear the value of all widgets in a document.

JavaScript (SDK v8.0+)

WebViewer(...)
.then(instance => {
  const { documentViewer, annotationManager, Annotations } = instance.Core;

  documentViewer.addEventListener('annotationsLoaded', () => {
    const widgets = annotationManager.getAnnotationsList().filter(annotation => annotation instanceof Annotations.WidgetAnnotation);
    widgets.forEach((widget) => {
      widget.setValue('');
    });
  });
});

WidgetAnnotation.setValue DocumentViewer#annotationsLoaded

JavaScript (SDK v6.0+)

WebViewer(...)
.then(instance => {
  const { docViewer, annotManager } = instance;

  docViewer.on('documentLoaded', () => {
    docViewer.getAnnotationsLoadedPromise().then(() => {
      const fieldManager = annotManager.getFieldManager();
      const field = fieldManager.getField(fieldId);
      field.setValue('new value');
    });
  });
});

AnnotationManager#fieldChanged

Listening for widget events

Interacting with widget annotations causes a number of events to be fired. The following sample demonstrates how to respond to the ‘focus’ event.

JavaScript (SDK v8.0+)

WebViewer(...)
.then(instance => {
  const { documentViewer, annotationManager, Annotations } = instance.Core;

  const DEFAULT_VALUE = 'N/A';

  documentViewer.addEventListener('annotationsLoaded', () => {
    const textWidgets = annotationManager.getAnnotationsList().filter(annotation => annotation instanceof Annotations.TextWidgetAnnotation);
    textWidgets.forEach((widget) => {
      widget.addEventListener('focus', () => {
        if (!widget.getValue()) {
          widget.setValue(DEFAULT_VALUE);
          annotationManager.redrawAnnotation(widget);
        }
      });
    });
  });
});

WidgetAnnotation#events WidgetAnnotation.setValue DocumentViewer#annotationsLoaded

JavaScript (SDK v6.0+)

WebViewer(...)
.then(instance => {
  const { docViewer, annotManager } = instance;
  const DEFAULT_VALUE = 'N/A';

  docViewer.on('documentLoaded', () => {
    docViewer.getAnnotationsLoadedPromise().then(() => {
      const textWidgets = annotManager.getAnnotationsList().filter(annotation => annotation instanceof Annotations.TextWidgetAnnotation);
      textWidgets.forEach((widget) => {
        widget.addEventListener('focus', () => {
          if (!widget.getValue()) {
            widget.setValue(DEFAULT_VALUE);
            annotManager.redrawAnnotation(widget);
          }
        });
      });
    });
  });
});

AnnotationManager#fieldChanged

Filling field values

You can access and fill any form field by its field name. The following sample demonstrates how to get a field by its name and set a new value.

JavaScript (SDK v8.0+)

WebViewer(...)
.then(instance => {
  const { documentViewer, annotationManager } = instance.Core;

  documentViewer.addEventListener('annotationsLoaded', () => {
    const fieldManager = annotationManager.getFieldManager();
    const fieldName = ''; // Add field name here.
    const field = fieldManager.getField(fieldName);
    if (field) {
      field.setValue('new value');
    }
  });
});

DocumentViewer#documentLoaded AnnotationManager.getFieldManager FieldManager.getField FieldManager.setValue

JavaScript (SDK v6.0+)

WebViewer(...)
.then(instance => {
  const { docViewer, annotManager } = instance;

  docViewer.on('documentLoaded', () => {
    docViewer.getAnnotationsLoadedPromise().then(() => {
      const fieldManager = annotManager.getFieldManager();
      const fieldName = ''; // Add field name here.
      const field = fieldManager.getField(fieldName);
      if (field) {
        field.setValue('new value');
      }
    });
  });
});

DocumentViewer.getAnnotationsLoadedPromise DocumentViewer#documentLoaded AnnotationManager.getFieldManager FieldManager.getField FieldManager.setValue

Listening for field changes

The fieldChanged event is fired any time the value of a form field changes. The following sample shows how to listen to the event and log the changed field's name and value.

JavaScript (SDK v8.0+)

WebViewer(...)
.then(instance => {
  const { annotationManager } = instance.Core;

  annotationManager.addEventListener('fieldChanged', (field, value) => {
    console.log(`Field changed: ${field.name}, ${value}`);
  });
});

AnnotationManager#fieldChanged

JavaScript (SDK v6.0+)

WebViewer(...)
.then(instance => {
  const { annotManager } = instance;

  annotManager.on('fieldChanged', (field, value) => {
    console.log(`Field changed: ${field.name}, ${value}`);
  });
});

AnnotationManager#fieldChanged