Submitting embedded pdf in html form

Question

I've searched in vain for days, but haven't found a solution for my problem yet.

Ideally, I would like to embed a fillable pdf form into an intranet html form for submission to the server for processing (ability to parse the field/values would be gravy, but not required). The files are all in the same domain so no cross-domain issues. I know I could add submission functionality to the pdf form itself, but 1) scripting is beyond the ability of the pdf document administrator and I don't want to take that on, 2) there are hundreds of pdf documents, 3) I need additional scripted fields/values submitted with the form, 4) I want the pdf document to be contained within the login session. So far, the server log shows all the field/values, except the PDFInput parameter which is passed, but the value is empty.

Here's what I have so far:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $(uploadForm).on("submit", function(event) {
            var iframe = document.getElementById('PDFObj');
            var iframeDocument = [iframe.contentDocument || iframe.contentWindow.document];

            var pluginData = iframeDocument;
            $(this).append('<input type="file" name="PDFInput" id="PDFInput" value="' + pluginData + '" style="visibility:hidden"/>');
            return true;
        });
    });
</script>

and

<form enctype="multipart/form-data" method="post" name='uploadForm' id='uploadForm'>
    <input type='hidden' name='rm' id='rm' value='uploadFile'>
    <table align='center'>
        <tr>
            <td align='left'>
                <strong>Notes:</strong>
                <br>
                <textarea cols='80' rows='2' name='notes' id='notes'></textarea>
                <br>
                <br>
            </td>
        </tr>
        <tr>
            <td colspan=2 align='center'>
                <input type='submit'>
            </td>
        </tr>
        <tr>
            <td colspan=2>
                <br>
                <input type='hidden' name='formid' id='formid' value='6F45B3AF-91F3-108C-D3D9-701F541B49DC'>
                <iframe type='application/pdf' src="url.pl?formid=6F45B3AF-91F3-108C-D3D9-701F541B49DC.pdf" height='800' width='1000' name='PDFObj' id='PDFObj'>
            </td>
        </tr>
    </table>
</form>

I've tried embedding it using iframe and object along with setting input type="object", but I can't get any combination to work.

Is this even possible? Is there a better approach?

hmm interesting. you could look into rendering the PDF client-side using `pdf.js` and then when submitting, 'slurp' up the filled-out version, convert it into a base64 string and submit that back to the server. this looks relevant: https://stackoverflow.com/questions/13538832/convert-pdf-to-a-base64-encoded-string-in-javascript — user2524973, May 15 '15 at 01:10

score 0 · Answer 1 · answered May 15 '15 at 00:15

As far as I know, you're not going to be able to capture the PDF data directly from HTML like that. Your best bet is going to be to add submit functionality to the PDFs, then process the resulting FDF data with a server-side script.

You will need either add Submit a Form buttons to your PDFs, or modify the existing buttons. Make sure the form action in the PDF has #FDF after the URI (eg https://example.com/process.php#FDF).

Parsing the data server side is simple. I'm not sure what server side language you are using, but here is a PHP snippet

<?php // process.php, report the data we received 
echo '<h2>GET Data</h2>'; 
foreach( $_GET as $key => $value ) { 
  echo '<p>Key: '.$key.', Value: '.$value.'</p>'; 
} 
echo '<h2>POST Data</h2>'; 
foreach( $_POST as $key => $value ) { 
  echo '<p>Key: '.$key.', Value: '.$value.'</p>'; 
}

Note that a PDF only interacts with a web server properly when viewed inside of a web browser.

I do not know of a reliable way to programmatically add submit buttons to PDFs, nor do I know of a reliable conversion method. You're between a rock and a hard place here IMHO.

More info:

Submitting embedded pdf in html form

1 Answers1