Default Form Field Values Assigned After Form Submission

It's easy enough to provide default information in form fields. Simply use the value="..." attribute. Yet, that may not always be an appropriate way to do it.

Suppose you had a form where site visitors provide an affiliate code to view the website. If a default affiliate code is provided, many would just click the submit button and not bother changing the code.

On the other hand, some people might not know what the affiliate code is. In this case, you may wish to put a default affiliate code into the field for the visitor to use.

A default form field value can be inserted into blank fields after the form's submit button has been clicked. It's a JavaScript thing.

As an example, let's suppose a form looks like this:

The example form is designed to accept an affiliate code. The form processing software can then redirect the browser to a relevant directory on the website. If no affiliate code is provided, the redirect doesn't work as intended.

For reference, here is the code of the above example form:

<form name="myform" method="post" action="https://example.com/cgi-bin/script.cgi">
<input type="hidden" name="redirect" value="https://example.com/[[code]]">
<p>Your affiliate code: 
<input type="text" name="code" size="9"> 
<input type="submit" name="submitter" value="Submit">
</form>

Notice the name="myform" attribute in the form tag. JavaScript can use that information, along with the form field name="code" to assign default information.

Two things need to be done.

1. Insert this attribute into the form tag:

   onsubmit="return CheckDefault()"
   
   

2. Insert this JavaScript somewhere on the web page:

   <script type="text/javascript">
   function CheckDefault() {
   var DefaultValue = "mycode"; // specify the default value.
   if( document.myform.code.value.length == 0 ) {
      document.myform.code.value = DefaultValue;
      }
   return true;
   }
   </script>
   
   

   Notice that "mycode" in the JavaScript is the same as the form tag name. Also, notice that the "code" in the JavaScript is the same as the form field name.

   The JavaScript will insert the default value only if no value is provided in the relevant form field.

You'll end up with something like this:

<form name="myform" onsubmit="return CheckDefault()" method="post" action="https://example.com/cgi-bin/script.cgi">
<input type="hidden" name="redirect" value="https://example.com/[[code]]">
<p>Your affiliate code: 
<input type="text" name="code" size="9"> 
<input type="submit" name="submitter" value="Submit">
</form>

<script type="text/javascript">
function CheckDefault() {
var DefaultValue = "mycode"; // specify the default value.
if( document.myform.code.value.length == 0 ) {
   document.myform.code.value = DefaultValue;
   }
return true;
}
</script>

The above can be adapted for many requirements.

Will Bontrager