Question about form filling

[Matt Parizeau]

Q:

Is this possible and do you have any sample code to demonstrate this:

 

1. Show a PDF form in the browser (the PDF would come from the server or a CDN like Amazon S3).

2. Fill out some form fields in the PDF (text fields, checkboxes, etc.) with data in the main HTML page that contains the WebViewer.

3. Allow the user to interact with the form, perhaps correct some of the autofilled fields, add new data, etc.

4. Save the completed form back to the server after the user is done editing it.

A:

You can see a sample of viewing, editing and submitting form fields in WebViewer at this link: http://www.pdftron.com/webviewer/demo/samples/forms/desktop.html

When the form is submitted in the sample it triggers our sample formDataHandler.php script that can be found in the WebViewer download under the html5 folder.

To programmatically change form fields you could use a config file like our forms sample is doing (samples/forms/config.js) and add code like this:

$(document).on("pageCompleted", function(event, pageNum) {

    if (pageNum === 1) {

        $('#f1-9 > textarea').val('abc').blur();

        $('#c1-2 > input').prop('checked', true).change();

    }

});

This will set the value of one of the text inputs to 'abc' and check one of the checkboxes in that sample form document.  It's important to have the .blur() or .change() at the end to make sure that the correct event handlers are triggered for the elements as they aren't triggered automatically when changing values programmatically.  Currently textareas are the only one that should use .blur() however this will likely be changed in version 1.7 to .change() to be consistent with the others.

[Matt Parizeau]

Q:

1. Is it possible to adjust the fields after the fact from outside the config.js. I see I can set the fields on the pageCompleted but how do I refer to the WebViewer from the desktop.html file, for example, clicking a button on that page that says "Fill Fields".

2. Is it possible to programmatically click the Submit button or send the form results to the server programmatically, again from the desktop.html file.

3. Can you change the font size of the text areas? The default is quite small.

A:

To programmatically do these things from the html file you could have code like the following:

$('#myButton').on('click', function() {

    var iframeWindow = $('iframe')[0].contentWindow;

    iframeWindow.$('#c1-2 > input').prop('checked', true).change();

    iframeWindow.$('#f1-9 > textarea').val('abc').blur();

    // press submit button

    iframeWindow.$('#Button1 > button').mouseup();

});

Currently we require an action on some element to submit the form.  The way that you would do it programmatically in the form sample would be the code I had sent before: iframeWindow.$('#Button1 > button').mouseup();

If you don't want the user to see a submit button in the document you could try making the button very small in the pdf so that it effectively isn't clickable.

The font size for text areas is based on the font size set in the pdf.  In the form sample the font size of the text areas is 9 so that's the value we'll scale as the zoom level changes.  If you want a higher font size for an element then you can change it in the pdf.

However if you're talking about font size "auto" then this currently doesn't work in WebViewer.  Unfortunately there isn't a straightforward way of fitting the text in a textarea to its height, however what we're doing right now isn't the best either since we're just using the default browser font size.  We'll look into this to see if there is a better solution that can be implemented for this case.