PDF Viewer Form Field events

14 Dec 202424 minutes to read

The PDF Viewer control provides the support to different Form Field events. The Form Field events supported by the PDF Viewer Control are:

Form Field events Description
formFieldAdd Event trigger when a form field is added.
formFieldClick Events trigger when the form field is selected.
formFieldDoubleClick Events trigger when the form field is double-clicked.
formFieldFocusOut Events trigger when focus out from the form fields.
formFieldMouseLeave Events trigger when the mouse cursor leaves the form field.
formFieldMouseOver Events trigger when the mouse cursor is over a form field.
formFieldMove Events trigger when a form field is moved.
formFieldPropertiesChange Events trigger when a property of form field is changed.
formFieldRemove Events trigger when a form field is removed.
formFieldResize Events trigger when a form field is resized.
formFieldSelect Events trigger when a form field is selected.
formFieldUnselect Events trigger when a form field is unselected.
validateFormFields Events trigger when validation is failed.

formFieldAdd event

The formFieldAdd event is triggered when a new form field is added, either programmatically or through user interaction. The event arguments provide the necessary information about the form field addition.

```html
    <div style="width:100%;height:600px">
         @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldAdd("formFieldAdded").Render()
    </div>
    <script>
       function formFieldAdded(args) {
            console.log('form field page number: ' + args.pageIndex);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
       }
    </script>
```
```html

    <div style="width:100%;height:600px">
         @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldAdd("formFieldAdded").Render()
    </div>
    <script>
       function formFieldAdded(args) {
            console.log('form field page number: ' + args.pageIndex);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
       }>
```

formFieldClick event

The formFieldClick event is triggered when a form field is clicked. The event arguments provide the necessary information about the form field click event.

```html
    <div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldClick("formFieldClicked").Render()
    </div>
    <script>
       function formFieldClicked(args) {
            console.log('Is form field cancel: ' + args.cancel);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
       }
    </script>
```
```html

    <div style="width:100%;height:600px">
         @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldClick("formFieldClicked").Render()
    </div>
    <script>
       function formFieldClicked(args) {
            console.log('Is form field cancel: ' + args.cancel);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
       }>
```

formFieldDoubleClick event

The formFieldDoubleClick event is triggered when a form field is double-clicked. The event arguments provide the necessary information about the form field double-click event.

```html
    <div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldDoubleClick("formFieldDoubleClicked").Render()
    </div>
    <script>
       function formFieldDoubleClicked(args) {
            console.log('Is form field cancel: ' + args.cancel);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
       }
    </script>
```
```html

    <div style="width:100%;height:600px">
         @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldDoubleClick("formFieldDoubleClicked").Render()
    </div>
    <script>
       function formFieldDoubleClicked(args) {
            console.log('Is form field cancel: ' + args.cancel);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
       }>
```

formFieldFocusOut event

The formFieldFocusOut event is triggered when a form field loses focus. The event arguments provide the necessary information about the form field focus out event.

```html
    <div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldFocusOut("FormFieldFocusOuted").Render()
    </div>
    <script>
       function FormFieldFocusOuted(args) {
            console.log('Is form field cancel: ' + args.cancel);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
       }
    </script>
```
```html

    <div style="width:100%;height:600px">
         @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldFocusOut("FormFieldFocusOuted").Render()
    </div>
    <script>
       function FormFieldFocusOuted(args) {
            console.log('Is form field cancel: ' + args.cancel);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
       }>
```

formFieldMouseLeave event

The formFieldMouseLeave event is triggered when the mouse leaves a form field. The event arguments provide the necessary information about the form field mouse leave event.

```html
    <div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldMouseLeave("FormFieldMouseLeaved").Render()
    </div>
    <script>
        function FormFieldMouseLeaved(args) {
            console.log('Is form field cancel: ' + args.cancel);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
       }
    </script>
```
```html

    <div style="width:100%;height:600px">
         @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldMouseLeave("FormFieldMouseLeaved").Render()
    </div>
    <script>
       function FormFieldMouseLeaved(args) {
            console.log('Is form field cancel: ' + args.cancel);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
       }>
```

formFieldMouseOver event

The formFieldMouseOver event is triggered when the mouse hovers over a form field. The event arguments provide the necessary information about the form field mouse over event.

```html
    <div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldMouseover("FormFieldMouseovered").Render()
    </div>
    <script>
       function FormFieldMouseovered(args) {
            console.log('form field page number: ', args.pageIndex);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
            console.log(' mouse over x position '+ args.X + ' mouse over y position '+ args.Y );
            console.log(' mouse over X position respect to the page '+ args.pageX + ' mouse over Y position respect to the page '+ args.pageY);
        }
    </script>
```
```html

    <div style="width:100%;height:600px">
         @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldMouseover("FormFieldMouseovered").Render()
    </div>
    <script>
       function FormFieldMouseovered(args) {
            console.log('form field page number: ', args.pageIndex);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
            console.log(' mouse over x position '+ args.X + ' mouse over y position '+ args.Y );
            console.log(' mouse over X position respect to the page '+ args.pageX + ' mouse over Y position respect to the page '+ args.pageY);
        }
    </script>
```

formFieldMove event

The formFieldMove event is triggered when the mouse moves inside a form field. The event arguments provide the necessary information about the form field mouse move event.

```html
    <div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldMove("FormFieldMoved").Render()
    </div>
    <script>
       function FormFieldMoved(args) {
            console.log('form field page number: ', args.pageIndex);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
            console.log('mouse current position '+ args.currentPosition);
            console.log('mouse current position '+ args.previousPosition);
        }
    </script>
```
```html

    <div style="width:100%;height:600px">
         @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldMove("FormFieldMoved").Render()
    </div>
    <script>
       function FormFieldMoved(args) {
            console.log('form field page number: ', args.pageIndex);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
            console.log('mouse current position '+ args.currentPosition);
            console.log('mouse current position '+ args.previousPosition);
        }
    </script>
```

formFieldPropertiesChange event

The formFieldPropertiesChange event is triggered when the properties of a form field are changed. The event arguments provide the necessary information about which property of the form field has been changed.

```html
    <div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldPropertiesChange("FormFieldPropertiesChanged").Render()
    </div>
    <script>
       function FormFieldPropertiesChanged(args) {
            console.log('form field page number: ', args.pageIndex);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
            console.log('Whether form field alignment changed '+ args.isAlignmentChanged);
            console.log('Whether form field backgropund color changed '+ args.isBackgroundColorChanged);
            console.log('Whether form field border color changed '+ args.isBorderColorChanged);
            console.log('Whether form field border width changed '+ args.isBorderWidthChanged);
            console.log('Whether form field color changed changed '+ args.isColorChanged);
            console.log('Whether form field custom data changed '+ args.isCustomDataChanged);
            console.log('Whether form field font family changed '+ args.isFontFamilyChanged);
            console.log('Whether form field font size changed '+ args.isFontSizeChanged);
            console.log('Whether form field font style changed '+ args.isFontStyleChanged);
            console.log('Whether form field maximum length changed '+ args.isMaxLengthChanged);
            console.log('Whether form field name changed '+ args.isNameChanged);
            console.log('Whether form field readonly changed '+ args.isReadOnlyChanged);
            console.log('Whether form field required changed '+ args.isRequiredChanged);
            console.log('Whether form field print changed '+ args.isPrintChanged);
            console.log('Whether form field tool tip changed '+ args.isToolTipChanged);
            console.log('Whether form field visiblity changed '+ args.isVisibilityChanged);
            console.log('Whether form field value changed '+ args.isValueChanged);
            console.log('Whether form field new value changed '+ args.newValue);
            console.log('Whether form field old valuue changed '+ args.oldValue);
        }
    </script>
```
```html

    <div style="width:100%;height:600px">
         @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldPropertiesChange("FormFieldPropertiesChanged").Render()
    </div>
    <script>
       function FormFieldPropertiesChanged(args) {
            console.log('form field page number: ', args.pageIndex);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
            console.log('Whether form field alignment changed '+ args.isAlignmentChanged);
            console.log('Whether form field backgropund color changed '+ args.isBackgroundColorChanged);
            console.log('Whether form field border color changed '+ args.isBorderColorChanged);
            console.log('Whether form field border width changed '+ args.isBorderWidthChanged);
            console.log('Whether form field color changed changed '+ args.isColorChanged);
            console.log('Whether form field custom data changed '+ args.isCustomDataChanged);
            console.log('Whether form field font family changed '+ args.isFontFamilyChanged);
            console.log('Whether form field font size changed '+ args.isFontSizeChanged);
            console.log('Whether form field font style changed '+ args.isFontStyleChanged);
            console.log('Whether form field maximum length changed '+ args.isMaxLengthChanged);
            console.log('Whether form field name changed '+ args.isNameChanged);
            console.log('Whether form field readonly changed '+ args.isReadOnlyChanged);
            console.log('Whether form field required changed '+ args.isRequiredChanged);
            console.log('Whether form field print changed '+ args.isPrintChanged);
            console.log('Whether form field tool tip changed '+ args.isToolTipChanged);
            console.log('Whether form field visiblity changed '+ args.isVisibilityChanged);
            console.log('Whether form field value changed '+ args.isValueChanged);
            console.log('Whether form field new value changed '+ args.newValue);
            console.log('Whether form field old valuue changed '+ args.oldValue);
        }
    </script>
```

formFieldRemove event

The formFieldRemove event is triggered when a form field is removed from the PDF. The event arguments provide the necessary information about which form field has been removed.

```html
    <div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldRemove("FormFieldRemoved").Render()
    </div>
    <script>
       function FormFieldRemoved(args) {
            console.log('form field page number: ', args.pageIndex);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
        }
    </script>
```
```html

    <div style="width:100%;height:600px">
         @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldRemove("FormFieldRemoved").Render()
    </div>
    <script>
       function FormFieldRemoved(args) {
            console.log('form field page number: ', args.pageIndex);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
        }
    </script>
```

formFieldResize event

The formFieldResize events are triggered when a form field in a PDF is resized. These events provide the relevant details about the specific form field that has been resized.

```html
    <div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldResize("FormFieldResized").Render()
    </div>
    <script>
       function FormFieldResized(args) {
            console.log('form field page number: ', args.pageIndex);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
            console.log('form field current position: ', args.currentPosition);
            console.log('form field previous position: ', args.previousPosition);
        }
    </script>
```
```html

    <div style="width:100%;height:600px">
         @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldResize("FormFieldResized").Render()
    </div>
    <script>
       function FormFieldResized(args) {
            console.log('form field page number: ', args.pageIndex);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
            console.log('form field current position: ', args.currentPosition);
            console.log('form field previous position: ', args.previousPosition);
        }
    </script>
```

formFieldSelect event

The formFieldSelect events are triggered when a form field in a PDF is selected. These events provide the necessary details about the specific form field that has been selected.

```html
    <div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldSelect("FormFieldSelected").Render()
    </div>
    <script>
       function FormFieldSelected(args) {
            console.log('form field page number: ', args.pageIndex);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
        }
    </script>
```
```html

    <div style="width:100%;height:600px">
         @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldSelect("FormFieldSelected").Render()
    </div>
    <script>
       function FormFieldSelected(args) {
            console.log('form field page number: ', args.pageIndex);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
        }
    </script>
```

formFieldUnselect event

The formFieldUnselect events are triggered when a form field in a PDF is unselected. These events provide the necessary details about the specific form field that has been unselected.

```html
    <div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldUnselect("FormFieldUnselected").Render()
    </div>
    <script>
       function FormFieldUnselected(args) {
            console.log('form field page number: ', args.pageIndex);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
        }
    </script>
```
```html

    <div style="width:100%;height:600px">
         @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldUnselect("FormFieldUnselected").Render()
    </div>
    <script>
       function FormFieldUnselected(args) {
            console.log('form field page number: ', args.pageIndex);
            console.log('form field event name: ' + args.name);
            console.log('form field data: ', args.field);
        }
    </script>
```

validateFormFields event

The ValidateFormFields events are triggered when a required form field is left unfilled before downloading the PDF. These events provide the necessary information for validating which form fields are incomplete.

```html
    <div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").ValidateFormFields("ValidateFormField").Render()
    </div>
    <script>
       function ValidateFormField(args) {
            console.log('form field event name: ' + args.name);
            console.log('form field document name: ' + args.documentName);
            console.log('form field data: ', args.formField);
            console.log('non fillable form field details: ', args.nonFillableFields);
        }
    </script>
```
```html

    <div style="width:100%;height:600px">
         @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").ValidateFormFields("ValidateFormField").Render()
    </div>
    <script>
       function ValidateFormField(args) {
            console.log('form field event name: ' + args.name);
            console.log('form field document name: ' + args.documentName);
            console.log('form field data: ', args.formField);
            console.log('non fillable form field details: ', args.nonFillableFields);
        }
    </script>
```