Inserting File Into Form Field

Sometimes it is desirable to insert the content of a file into a form field. The file may be easier to update than changing the form every time.

Examples are an often-changed price to insert into a hidden field and a letter template file to insert into a textarea field.

I'll use both examples in this article. I'll show you how to insert the content of the files into the form fields with SSI and with PHP. Following those will be note about inserting the content with JavaScript.

The Files

For the example price file, let's name it price.txt and have it contain:

14.57

For the letter file, let's name it letter.txt and have it contain:

Dear __________

Thank you for attending the event.

Sincerely,

__________

For these instructions, let's put both files into the document root on the server. (The document root directory is the directory where the domain's main or index file is located.)

The Form

Let's use this form for the examples:

<form>
<input type="hidden" value="[INSERTA]" />
<textarea>[INSERTB]</textarea>
<input type="submit" />
</form>

Notice the [INSERTA] and [INSERTB] placeholders in the form code. In the instructions, the placeholders will be replaced with code to insert the contents of the price file and the contents of the letter file, respectively.

Using SSI to Insert Files Into Form Fields

SSI pages generally require a .shtml file name extension. The page with the form might be named form.shtml, for example.

To insert the content of the files into the form fields, replace [INSERTA] with:

<!--#include virtual="/price.txt"-->

and replace [INSERTB] with:

<!--#include virtual="/letter.txt"-->

If the files are not in the document root, change the location accordingly. SSI locations must be server locations; http://... URLs can not be used.

Using PHP to Insert Files Into Form Fields

PHP pages generally require a .php file name extension. The page with the form might be named form.php, for example.

To insert the content of the files into the form fields, replace [INSERTA] with:

<?php readfile($_SERVER['DOCUMENT_ROOT']."/price.txt") ?>

and replace [INSERTB] with:

<?php readfile($_SERVER['DOCUMENT_ROOT']."/letter.txt") ?>

If the files are not in the document root, change the location accordingly.

Some PHP installations are configured to allow http://... URLs in the readfile() function call. If yours does and you wish to use it, replace everything between the parentheses with the URL of the file between quotes. Example:

<?php readfile("http://example.com/price.txt") ?>

Using JavaScript to Insert Files Into Form Fields

Using JavaScript is not as straightforward as using SSI and PHP.

The entire form field needs to be imported from the external file, not just the field value. The content of the file to be imported must first be converted into JavaScript because only JavaScript can be imported. (The text to JavaScript converter may be used.)

This is generally more work than would be saved by not having to update the form itself when the values change.

However, it can be done. JavaScript-ize the entire form field, save it to a file, then import it with something like this:

<script
   type="text/javascript" 
   src="/file.js">
</script>

To Summarize

Inserting the content of a file into a form field as its value is fairly straight-forward with SSI and with PHP. Use the appropriate code to insert it.

Because both SSI and PHP code is inserted into the file before the file is sent to the browser, their tags can be used within other HTML tags. The SSI and PHP code tags are removed before the page is sent to the browser.

JavaScript, on the other hand, is run after the HTML code is loaded into the browser. For that reason, SCRIPT (or other) tags can not be inside HTML tags. For that reason, inserting with JavaScript requires inserting the entire form field.

Will Bontrager