Configuring your Form for the Basic Version
While the program is very easy to use, it is very specific in how it requires the form to be configured. Read through these directions very carefully to ensure a trouble-free configuration.
IMPORTANT: Please regularly check the site for updates and bug fixes for this Script!
Where to Place the Script
You can either paste the script into your main document between opening and closing script tags, or link to the script as an external source file.
<script language="javascript" type="text/javascript">
...paste script here
</script>
OR
<script language="javascript" type="text/javascript" src="steroidBasic.js"></script>
Top
Opening Form Tag
Your opening form tag should contain the "method" and "action" attributes, the action attribute's value being either the path to your cgi script or a mailto: with an email address. Both actions require an onsubmit event handler invoking the program's main function.
NOTE: the working example above doesn't actually submit the form, so a call to a javascript alert is used instead. You'll need to construct your opening form tag according to the examples below instead.
<form method="post" action="http://domain.com/cgi-bin/your.cgi" onsubmit="return checkFields()">
<form method="post" action="mailto:someone@somewhere.com" enctype="text/plain" onsubmit="return checkFields()">
Top
Marking a Field as Required
To require that a field in your form be filled in before submitting, begin the name attribute's value with an asterisk. Simple as that. Any field that is not marked with an asterisk will not be considered required, and therefore will not be re-written upon submit when left empty.
NOTE: The names of the fields are also used as the field's text label, or directions to the user. Because of this, they may be descriptive and may contain spaces. Because they will also be submitted to you in the name/value pair, you should keep then reasonably short.
Account Number
<input type="text" name="*Account Number" size="4" maxlength="3">
Top
Field Attributes
Field attributes such as "cols" and "rows" for a textarea or "size" and "maxlength" for a text input are not required, but encouraged. Setting these values allows the program to grab the values you want and re-write them as needed. Leaving them out means the browser default will be used, which can cause the fields to look differently than the first time they are displayed, which can be startling to a user.
Because some attributes are not read/write in NN 4.x, default values will be used when that browser executes the script, regardless of the values you've set. The defaults used for both NN 4.x and for fields missing the attributes are: rows: 7, cols: 30 and size: 20, maxlength: 200.
<input type="text" name="*My Required Field" size="4" maxlength="3">
Radio Buttons and Checkboxes
The value attribute of radios and checkboxes must match their viewable text. The values are re-written as the viewable text if left empty (values are not the same as the text label).
* Favorite Ice Cream
<input type="radio" name="*Favorite Ice Cream" value="Chocolate"> Chocolate
<input type="radio" name="*Favorite Ice Cream" value="Vanilla"> Vanilla
Top
Grouping Multiple Fields Together
If you have two or more fields that should be re-written together as part of a group on the same line, you must give them the same name. You may group any field type together, e.g. a text field, select menu, radio button and textarea may all be grouped together if you wish - just give them the same name.
<input type="text" name="*Telephone" size="4" maxlength="3">
<input type="text" name="*Telephone" size="4" maxlength="3">
<input type="text" name="*Telephone" size="5" maxlength="4">
Top
Configuring Submit and Reset Controls as Buttons or Images
The program will work with both form buttons and images, but their configurations are very specific!
Buttons
Do NOT use a reset button!!! The program will not work if a reset input type is used. Instead, use a button input type that calls the clearing function within an event handler. Also, the value, "
Clear Form" is required. Submit buttons are permitted. Do not give either a name.
<input type="button" value="Clear Form" onclick="clearIt(this.form)">
<input type="submit" value="Submit Form">
Images
You may use images to clear and submit your form, but they must be regular image tags (not input type="image") wrapped in <a> tags which call the submit and clear functions. The submit image must have "
submitImg" as its actual name, or at least part of its name, and the reset image must have "
resetImg" as its actual name, or at least part of its name. The path to the images does not have to be anything specific, it just has to be the actual path.
NOTE: if your form is submitting to an adress via "mailto:...", you must use form buttons if you want your form to be Netscape 4.x compatible. This is not specific to this program, it is a NN 4.x bug. If a cgi script is being invoked, images will work fine with NN 4.x.
<a href="javascript:clearIt('img')"><img src="resetImg.gif" border="0"></a>
<a href="javascript:sendOrnot()"><img src="submitImg.gif" border="0"></a>
Top
Copyright Fields
The copyright fields must be intact in order for the program to work. If they are deleted, changed, or even moved, the program will not work properly, and an error will not necessarily be generated. The two hidden copyright fields must be the
last two fields of the form, and must remain in the following order:
<input type="submit"...> <input type="button" value="Clear Form"...>
<input type="hidden" name="*JavaScript Form Validation" value="Copyright 2002-2004 Jennifer Madden">
<input type="hidden" name="*JavaScript Form Validation" value="http://JenniferMadden.com">
</form>
Top
CSS Styling/Positioning
Your form MUST be wrapped in a div tag pair named "steroidForm". Additional positioning and style can be added, as long as your rule and wrapper div include the following:
<style type="text/css">
#steroidForm { position:relative; visibility:visible; }/* apply additional positioning to this rule as you wish */
.req { color:#ff0000;}/* used to mark text labels with red asterisk (see below) */
</style>
<body>
<div id="steroidForm"> /* ID value must be exact */
<form ...>
...form elements here
</form>
</div>
</body>
Since a red asterisk (color and size are changeable in the "req" rule) is placed before the text label of each re-written field, you should display the same red asterisk before the required fields in your HTML form for consistency.
<span class="req">*</span> Text Label
<input type="text" name="*Text Label">
Top