Default Values for Blank Form Fields

When a form field isn't required, but you want default information when left blank, use the JavaScript provided in this article.

An example is form handling software that requires an email address. But you don't want to require it. To pass the form handling software's error checking, "name@example.com" is filled in if the email field is left blank.

Another example is a field for a cell phone and the form user doesn't have one (some people don't, you know). When the field is left blank, a default value of "No cell phone" can be filled in at the time the form is submitted.

Still another example: A field for the person's website URL. Maybe they don't want to give it out. Or maybe they don't have a website. A default value can be filled in if the form user leaves it blank.

When the form is submitted, JavaScript checks to see if certain fields are blank. If yes, the fields are given the default value you specified.

Here is an example form we'll use for demonstration. (Further below is code for giving the email, cell phone, and website URL fields default values if submitted with those fields blank.)

Here is the source code for the above example form.

<form method="post" action="script.php" onsubmit="return InsertDefaultValues()">
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td>Name:</td>
<td><input type="text" id="name" name="name" style="width:200px;"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" id="email" name="email" style="width:200px;"></td>
</tr>
<tr>
<td>Cell Phone:</td>
<td><input type="text" id="cell" name="cell" style="width:200px;"></td>
</tr>
<tr>
<td>Website URL:</td>
<td><input type="text" id="siteURL" name="siteURL" style="width:200px;"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" style="width:200px;" value="Submit Form"></td>
</tr>
</table>
</form>

And here is the JavaScript to assign default values to specific empty form fields. Customization notes follow.

<script type="text/javascript">
function InsertDefaultValues()
{
   // Leave this line as is. Customization follows.
   var FieldsAndDefault = new Array();

   // Customization:
   // For each field that will have custom information is 
   //   submitted blank, use this format:
   //     FieldsAndDefault.push("FieldIDvalue Default value");

   FieldsAndDefault.push("email name@example.com");
   FieldsAndDefault.push("cell No cell phone");
   FieldsAndDefault.push("siteURL -");

   // End of customization.
   ///////////////////////////////////////
   for( var i=0; i<FieldsAndDefault.length; i++ )
   {
      FieldsAndDefault[i] = FieldsAndDefault[i].replace(/^\s*/,"");
      var pieces = FieldsAndDefault[i].split(" ");
      var field = pieces.shift();
      var f = document.getElementById(field);
      if( f.value.length < 1 ) { f.value = pieces.join(" "); }
   }
   return true;
}
</script>

Customization notes:

Data must be provided for each form field to be assigned a default value if empty when the form is submitted. This is the format:

FieldsAndDefault.push("FieldIDvalue DefaultValue");

There is a space between the field ID value and the default value.

For each field:

1. Replace FieldIDvalue with the id value of the form field.

2. Replace DefaultValue with the default value if the form field is empty. The default value may contain spaces.

The above source code has examples for working with the example form.

The JavaScript may be put anywhere in the source code of the web page containing the form. The JavaScript may be imported from an external file.

Implementation is completed when:

1. The form and the JavaScript on the same web page (JavaScript optionally imported).

2. The JavaScript customization specifies the id value and the default value of each applicable form field.

When a field is left empty as the form is submitted, the field is filled with default information.

Will Bontrager