It isn’t uncommon for users to have difficulty filling out forms on web
pages. A lot of the time, they need help with filling out various fields with
headings such as: “Where is that number on my check?” “Why
do I need to give you my email address?” “What is a URL?”
These questions and more are usually answered by clicking a little question
mark next to a field, which opens a popup window providing more information
and/or an illustration. In this article, I’ll show you how to enhance
the functionality of these popup windows by allowing the person to fill out
the information there. This will enhance the user experience for a number of
reasons:
|
|---|
Let’s begin with two documents: a page with a form
and a linked popup window. For this article, I am assuming
you understand the code in the page with a form, which only opens a new window.
If you don’t have this understanding, please take some time to learn
more about opening new windows in JavaScript. Now, let’s examine
the source of that popup window:
"http://www.w3.org/TR/html4/strict.dtd">
content="text/html; charset=iso-8859-1">
Help
Input #1
In the input
field labeled "Input #1," please put any information you like. This
is not
a required field.
Input
#2
Like title="Help on input #1.">input #1, input #2 is not a
required
field, and you can put any information you want into it.
Input
#3
Input #3 is a required
field. You must select one of the three available options.
Input
#4
Input #4 is a
radio button. You can pick either this one or
you can pick
title="Help on input #5.">input #5, but you cannot
pick both. This
field is not required.
Input
#5
Input #5 is a
radio button. Like input #4, you can
pick either this radio button or
you can pick
input #4,
but you cannot pick both of them. This field is not required.
Input
#6
Input #6 is a checkbox.
You can click it to check it and click it again to uncheck it. These are used
for "yes or no" questions, where you can only
choose yes (and check it) or no (and uncheck it).
Input
#7
Input #7 is a
text area. This is a large area where you can type in any text you like. This
field
is not required.
Let’s take each scenario and analyze it individually. Each form element
has its own function paired with it. This is to easily identify and modify any
code in the future. Let’s begin with input #1.
The JavaScript that is used for all TEXT inputs is:
function input(formName, obj, val){
opener.document.forms[formName].elements[obj].value
= val;
self.close();
}
