Form field events in ASP.NET MVC PDF Viewer

18 Nov 201824 minutes to read

The PDF Viewer component provides support for various form field events. The following events are available:

Form field events Description
formFieldAdd Triggered when a form field is added.
formFieldClick Triggered when a form field is clicked.
formFieldDoubleClick Triggered when a form field is double-clicked.
formFieldFocusOut Triggered when focus moves out of a form field.
formFieldMouseLeave Triggered when the mouse cursor leaves a form field.
formFieldMouseOver Triggered when the mouse cursor is over a form field.
formFieldMove Triggered when a form field is moved.
formFieldPropertiesChange Triggered when a form field property changes.
formFieldRemove Triggered when a form field is removed.
formFieldResize Triggered when a form field is resized.
formFieldSelect Triggered when a form field is selected.
formFieldUnselect Triggered when a form field is unselected.
validateFormFields Triggered when validation fails.

formFieldAdd event

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

```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 details about the clicked form field.

```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 details about the removed field.

```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 event is triggered when a form field is resized. The event arguments include current and previous positions.

```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>
```