Form Field Help - Tested in IE7.0, Netscape8.1.2, Opera9.10, Firefox2.0.0.1 and AOL Explorer1.5

Add a help link to each section in your form. When clicked, an explanation is given of what is required and a box is offered where the information can be entered and transferred to the form.

We have tested the code in IE7.0, Firefox2.0.0.1, Opera9.10, Netscape8.1.2 and AOL Explorer1.5. This script worked well in all platforms with one (1) variation observed in Netscape8.1.2.

Instead of opening the help window in the defined size (defined in <HEAD> section of code - See further down in tutorial on where and howto define window size) it opens in a full window.
This does not hinder the operation of the effect in any way, shape or form.

For your Information: Before we begin, we feel obligated to advise you that the above form is for all intensive purposes a "Stand Alone" script. In other words, it really does not do much of anything other than what you see. In order to make it function as designed, you need to incorporate it into a valid working form. If you do not have a good Solid Knowledge of HTML coding, javascripts, forms and reconfigurations, please "Do Not Attempt" this until you are Proficient in the aforementioned areas.

Depending on your knowledge of HTML and javascripts, this is an easy two (2) part copy and paste code that goes in both the <HEAD> and <BODY> sections (incorporated into a working form) of your document. There are reconfigurations in both sections we shall cover below.

<HEAD> Section Reconfigurations

The first part of the reconfigurations deal with the position and size of the popup help window. See below where and howto:

<!-- Begin
function explain(name, output, msg) {
newwin = window.open('','','top=150,left=150,width=325,height=300');
if (!newwin.opener) newwin.opener = self;

Define Above Reconfigurations

top=150 --- This denote how many pixels the window will be from the top of your page.
left=150 --- This denote how many pixels the window will be from the left side of your page.
width=325 --- This denote how many pixels wide (from left to right) the window is.
height=300 --- This denote how many pixels high (from top to bottom) the window is.

More <HEAD> Section Reconfigurations

write('<body bgcolor=e0ffff onLoad="document.form.box.focus()"><form name=form>' + msg + '<br>');
write('<p>You may enter your ' + name + ' here and it will be copied into the form for you.');
write('<p><center>' + name + ': <input type=text name=box size=20 onKeyUp=' + output + '=this.value>');

Define Above Reconfigurations

write('<body bgcolor=e0ffff --- This denotes the color of the page on the Help pop up window.
size=20* --- This denotes the size(length from left to right) of the form boxes in the popup help window.

* For your Information: The size of the form on the popup window is a constant. In other words, no matter how many help links you have, this size will be the same for all the popup help boxes.

Final <HEAD> Section Reconfigurations

write('<p>You may enter your ' + name + ' here and it will be copied into the form for you.');
write('<p><center>' + name + ': <input type=text name=box size=20 onKeyUp=' + output + '=this.value>');
write('<p><input type=button value="Click to close when finished" onClick=window.close()>');

Define Above Reconfigurations

write('<p>You may enter your ' + name + ' here and it will be copied into the form for you.'); --- This is the caption you see when you open the "Help" link just above the form box. If this is a little unclear, grab the below link to clarify it more.
[ Enter User Name ]
write('<p><input type=button value="Click to close when finished" --- This is the text you see on the form button telling you to "Click to close when finished". If this is a little unclear, grab the below link to clarify it more.
[ Click to close when finished ]

<BODY> Section Reconfigurations

These are the reconfigurations that can be made to each form box you want associated with this effect. This/these are the part/parts that you will be incorporating into the <BODY> section of a working form.

User Name: <input type=text name="username" size=10> <a href="javascript:explain('User Name', 'opener.document.form.username.value', 'This is where you enter your text for the hint.');" onMouseOver="window.status='Click for explanation...';return true;" onMouseOut="window.status='';return true;">Help?</a>

Password: <input type=text* name="password" size=10> <a href="javascript:explain('Password', 'opener.document.form.password.value', 'This is where you enter your text for the hint.');" onMouseOver="window.status='Click for explanation...';return true;" onMouseOut="window.status='';return true;">Help?</a>

Examples of size=

On the above two 2 sections ( User Name: and Password: ) how the format correlates or stays constant for each section. If it has to do with password everything in that section refers or points to password.

To answer your question in a word, "Yes" you can add more forms into this effect. You just need to follow the format. Below is an example with the use of an email form.

E-mail <input type=text name="email" size=40> <a href="javascript:explain('E-mail', 'opener.document.form.email.value', 'This is where your hint will go.');" onMouseOver="window.status='Click for explanation...';return true;" onMouseOut="window.status='';return true;">Help?</a><br>

To see how this is incorporated into the default, grab the below link and it is fully explained.
[ E-mail Form Incorporated ]

* For your Information: In the above section in reference to the little asterick pertaining to the
input type=text which is located just above our "NOTICE". This reconfiguration will be within the <BODY> section of the code.

Password: <input type=text* name="password" size=10>

In the default (shown in our example), as you type in your "Password" you will notice that the Password is not concealed by dots but shows the actual password.
<input type=text name="password" size=10>

If you would like to rectify this so in the password field only dots will appear,
simply change the attribute from text to password
<input type=password name="password" size=10>

I n essence, all we did was change the defining attribute from text to password. When you type in your password into the [ Hint? ] form popup, the password will be visible. When you click "Click to close when finished", the password is transposed directly into the form and you will have the dots or astericks and the password will not be visible.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]