Foxit PDF SDK for Web: Basic Forms

Securely capture, present, move, process, output, update and print information associated with static and dynamic XFA forms. Simplify data sharing, transportation and availability with XFA. Enjoy added functionality to PDF Forms so anyone can open calendar windows to choose dates, submit data easily or encrypt data upon submission to protect personally identifiable information. If forms are hugely important to how you do business, then this add-on is worth investing in.

Form

The Form supports five standard types of files to import/export data: XFDF, FDF, XML, CSV and Txt.

PDF form components

The following components are defined in import-form and export-form addons.

<import-form-module:import-form-button>

A button which is used to select a form file to import form data.

<export-form-module:export-form-dropdown>

A button which is used to export form data as a xml file.

<create-text-field-button>

A button which is used to switch the current state-handler to createTextField to create text field.

<create-signature-field-button>

A button which is used to switch the current state-handler to createSignatureField to create signature field.

Form Widgets Adding Example

Take a look at our supported forms widget with the code below or find in the download package at /examples/PDFViewCtrl/add-form-fields

<body> 
    <div id="pdf-viewer"></div> 
    <script src="your-path-here/license-key.js"></script> 
    <script src="your-path-here/lib/PDFViewCtrl.full.js"></script> 
    <script> 
        window.$ = PDFViewCtrl.jQuery; 
        let IStateHandler = PDFViewCtrl.IStateHandler; 
        var PDFViewer = PDFViewCtrl.PDFViewer; 
        var pdfViewer = new PDFViewer({ 
            libPath: 'your-path-here/lib', 
            jr: { 
                licenseSN: licenseSN, 
                licenseKey: licenseKey, 
            } 
        }); 
        pdfViewer.init('#pdf-viewer'); 
        var xhr = new XMLHttpRequest(); 
        xhr.open('GET', '../../../docs/FoxitPDFSDKforWeb_DemoGuide.pdf', true); 
        xhr.responseType = 'blob'; 
        xhr.onreadystatechange = function () { 
            if (xhr.readyState !== 4) { 
                return; 
            } 
            var status = xhr.status; 
            if ((status >= 200 && status < 300) || status === 304) { 
                pdfViewer.openPDFByFile(xhr.response); 
            } 
        }; 
        xhr.send(); 
        var FieldTypes = PDFViewCtrl.PDF.form.constant.Field_Type; 
        var formfiledsJson = [{ 
            pageIndex: 0, fieldName: 'newPushButton', fieldType: FieldTypes.PushButton, rect: { 
                left: 100, 
                right: 150, 
                top: 530, 
                bottom: 500, 
            } 
        }, 
        { 
            pageIndex: 0, fieldName: 'newCheckBox', fieldType: FieldTypes.CheckBox, rect: { 
                left: 200, 
                right: 250, 
                top: 530, 
                bottom: 500, 
            } 
        }, 
        { 
            pageIndex: 0, fieldName: 'newRadioButton', fieldType: FieldTypes.RadioButton, rect: { 
                left: 300, 
                right: 380, 
                top: 530, 
                bottom: 500, 
            } 
        }, 
        { 
            pageIndex: 0, fieldName: 'newComboBox', fieldType: FieldTypes.ComboBox, rect: { 
                left: 400, 
                right: 460, 
                top: 530, 
                bottom: 500, 
            } 
        }, 
        { 
            pageIndex: 0, fieldName: 'newListBox', fieldType: FieldTypes.ListBox, rect: { 
                left: 500, 
                right: 560, 
                top: 530, 
                bottom: 430, 
            } 
        }, 
        { 
            pageIndex: 0, fieldName: 'newText', fieldType: FieldTypes.Text, rect: { 
                left: 600, 
                right: 660, 
                top: 530, 
                bottom: 500, 
            } 
        }]; 
        pdfViewer.getEventEmitter().on(PDFViewCtrl.Events.openFileSuccess, function (PDFDoc) { 
            PDFDoc.loadPDFForm().then(function (PDFForm) { 
                PDFDoc.getPDFForm(); 
                var taskList = [] 
                formfiledsJson.map(function (json) { 
                    //PDFForm.addControl()  will create field if no field with same name exsits. 
                    taskList.push(PDFForm.addControl(json.pageIndex, json.fieldName, json.fieldType, json.rect)); 
                }); 
                Promise.all(taskList).then(function (results) { 
                    results.map(function (result,index) { 
                        if(!result){ 
                            console.error("can't add control"); 
                            return; 
                        } 
                        var field = PDFForm.getField(formfiledsJson[index].fieldName) 
                        // set field's properties (refer to api documents): 
                        // field.setAction (type, data) 
                        // field.setAlignment (alignment) 
                        // field.setBorderColor (borderColor) 
                        // field.setBorderStyle (strStyle) 
                        // field.setFillColor (fillColor) 
                        // field.setMaxLength (maxLength) 
                        if (field.getType() == FieldTypes.ComboBox || 
                            field.getType() == FieldTypes.ListBox 
                        ) { 
                            field.setOptions([ 
                                { label: '10', value: '10', selected: true, defaultSelected: true }, 
                                { label: '20', value: '20', selected: false, defaultSelected: false }, 
                                { label: '30', value: '30', selected: false, defaultSelected: false }, 
                                { label: '40', value: '40', selected: false, defaultSelected: false }]); 
                        } 
                        // field.setValue (value='', control=null) 
                    }) 
                }); 
            }) 
        }) 
    </script> 
</body>

Updated on June 29, 2021

Documentation

Platform

Foxit PDF SDK for Web: Basic Forms

Was this article helpful?

Licensing tailored to you

30-day free trial