- By: Nate Baldwin
- For: GoLive, JavaScript
This script will let you insert default value into your form fields that automatically clear either when the form is submitted, or when the field is selected. The script will also automatically add the default values to your form after the page loads, so you won't need to enter them manually into your page. This is helpful for browsers that don't have JavaScript enabled - the form fields will be left blank so the default values aren't passed to your form processing script.
Example:
To add the script to your GoLive page, add a Script object (from the Head tab of the Objects Palette) to the head section of your page. Double click, and paste in the following JavaScript code...
// specify the name of your form
var thisForm = "testForm";
// load field names and default values into list
var defaultVals = new Array();
defaultVals[0] = new Array("name", "(your name here)");
defaultVals[1] = new Array("email", "(your email address here)");
defaultVals[2] = new Array("phone", "(your phone number here)");
// populate fields with default values on page load
function MPLoadDefaults() {
with (document.forms[thisForm]) {
for (var n=0; n<defaultVals.length; n++) {
var thisField = defaultVals[n][0];
var thisDefault = defaultVals[n][1];
if (elements[thisField].value == '')
elements[thisField].value = thisDefault;
}}}
// clear default value from field when selected
function MPClearField(field) {
var fieldName = field.name;
for (var n=0; n<defaultVals.length; n++) {
var thisField = defaultVals[n][0];
var thisDefault = defaultVals[n][1];
if (thisField == fieldName) {
if (field.value == thisDefault) field.value = '';
break;
}}}
// clear all defaults when form is submitted
function MPClearAll() {
with (document.forms[thisForm]) {
for (var n=0; n<defaultVals.length; n++) {
var thisField = defaultVals[n][0];
var thisDefault = defaultVals[n][1];
if (elements[thisField].value == thisDefault)
elements[thisField].value = '';
}}}
First, set the thisForm variable at the top to be the name of the form on your page. Then use the defaultVals variables at the top of the script to enter the field names and default values for as many fields as you need. Make a new line for each field that has a default value, so...
defaultVals[0] = new Array("name", "(your name here)");
defaultVals[1] = new Array("email", "(your email address here)");
defaultVals[2] = new Array("phone", "(your phone number here)");
...loads up three field (name, email and phone) with their default values (inside the double quotes). If you have any quote marks in the default text, you'll need to escape those with a backslash \"
Add as many lines as you need, just be sure to increment the index number (between the [ ] brackets) as well. So, the next line would have defaultVals[3] etc. Always start with 0, and don't skip any numbers. That should be the only thing you have to edit in the script.
From there, you'll add an "onload" function call to the body tag of your page. Switch to source code view, and add onload="MPLoadDefaults()" to the body tag. It should end up looking something like...
<body onload="MPLoadDefaults()">
If you already have an onload event in your body tag, add this new function to it separated from any existing functions by a semicolon. For instance...
<body onload="SomeOtherFunction();MPLoadDefaults()">
If you're using this script on a template page where you may not have access to the page's body tag, you can skip the body tag onload step and just add the following extra code at the bottom of your script:
// load default values if body tag is unavailable
window.onload = MPLoadDefaults;
Keep in mind that if you have other events attached to your body tag (for other functions, such as image pre-loaders), this line may override the other events depending on how your browser handles this. If it's a problem, it may be best to just manually enter the default values into the form field HTML instead of having the script enter them on page load.
To run the script when the form submits (to clear any extra default values before sending the form for processing), add onsubmit="MPClearAll()" to the form tag. In layout view, select your form, and switch to source code view. Add in the function call, and the tag should end up looking something like this...
<form action="FormScript.php" method="post" name="testForm" onsubmit="MPClearAll()">
...except with your form name and action link and such.
Finally, you'll need to add an onfocus="MPClearField(this)" to any form field that will have a default value. That will trigger the function to clear just that field when it is selected by the visitor (so they don't have to delete the defaults). Select your form field and switch to source code view. Add in the function call to your input tag, which should end up looking something like this...
<input type="text" name="name" value="" size="36" onfocus="MPClearField(this)">
...but of course with your field's name, value, size, etc.
If you would like to provide a link to restore the default values of only the fields that are empty (have been clicked on but not received user input yet), add a link (text or image) to your page, and enter the following as your link URL...
javascript:MPLoadDefaults();
See the avove form as an example (for instance, enter a value in one of the fields and leave the others blank, then hit the restore defaults link).
That should do it! If not, try downloading this page to see how the script is set up here.