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:
|
1. They don’t have to close the window by clicking that tiny 2. They don’t have to remember where they left off before the popup 3. They receive help and at the same time, learn what to put into the |
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>JavaScript Example »
Filling in Form Values from a New Window.</title>
<script type="text/javascript"><!–
function input(formName, obj, val){
opener.document.forms[formName].elements[obj].value
= val;
self.close();
}
function select(formName, obj, idx){
opener.document.forms[formName].elements[obj].selectedIndex
= idx;
self.close();
}
function checkRadio(formName, obj, choice){
opener.document.forms[formName].elements[obj][choice].checked
= true;
self.close();
}
function check(formName, obj, choice){
opener.document.forms[formName].elements[obj].checked
= choice;
self.close();
}
//–></script>
</head>
<body>
<h1>Help</h1>
<h2 id="input1">Input #1</h2>
<p>In the input
field labeled "Input #1," please put any information you like. This
is not
a required field.</p>
<script type="text/javascript"><!–
document.write (‘<form
onsubmit="return false">’);
document.write (‘<label>Fill
in input #1: <input type="text" name="myInput" value="Text."></’+’label>’);
document.write (‘<input
type="button" onclick="input(‘myForm’, ‘input1′, this.form.myInput.value)"
value="Update">’);
document.write (‘</’+’form>’);
//–></script>
<h2 id="input2">Input
#2</h2>
<p>Like <a href="#input1"
title="Help on input #1.">input #1</a>, input #2 is not a
required
field, and you can put any information you want into it.</p>
<script type="text/javascript"><!–
document.write (‘<form
onsubmit="return false">’);
document.write (‘<label>Fill
in input #2: <input type="text" name="myOtherInput" value="Text."></’+’label>’);
document.write (‘<input
type="button" onclick="input(‘myForm’, ‘input2′, this.form.myOtherInput.value)"
value="Update">’);
document.write (‘</’+’form>’);
//–></script>
<h2 id="input3">Input
#3</h2>
<p>Input #3 is a required
field. You must select one of the three available options.
<script type="text/javascript"><!–
document.write (‘[Select an
option: <a href="#" onclick="select(‘myForm’, ‘input3’,
1); return false">Option A<‘
+’/a>, <a href="#" onclick="select(‘myForm’,
‘input3’, 2); return false">Option B<‘
+’/a>, <a href="#" onclick="select(‘myForm’,
‘input3’, 3); return false">Option C<‘+’/a>]’);
–></script>
<h2 id="input4">Input
#4</h2>
<p>Input #4 is a
radio button. You can pick <em>either</em> this one <em>or</em>
you can pick
<a href="#input5"
title="Help on input #5.">input #5</a>, but you <em>cannot</em>
pick both. This
field is not required.</p>
<script type="text/javascript"><!–
document.write
(‘[<a href="#" onclick="checkRadio(‘myForm’, ‘inputRadio’,
0); return false">Choose ‘
+’input #4<‘+’/a>]’);
//–></script>
<h2 id="input5">Input
#5</h2>
<p>Input #5 is a
radio button. Like <a href="#input4" title="Help on input
#4.">input #4</a>, you can
pick <em>either</em> this radio button <em>or</em>
you can pick <a href="#input4" title="Help on input #4.">
input #4</a>,
but you <em>cannot</em> pick both of them. This field is not required.</p>
<script type="text/javascript"><!–
document.write (‘[<a
href="#" onclick="checkRadio(‘myForm’, ‘inputRadio’, 1);
return false">Choose ‘
+’input #5<‘+’/a>]’);
//–></script>
<h2 id="input6">Input
#6</h2>
<p>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).</p>
<script type="text/javascript"><!–
if(opener.document.myForm.inputCheck.checked){
document.write(‘[<a
href="#" onclick="check(‘myForm’, ‘inputCheck’, false);’
+’
return false">Deselect input #6<‘+’/a>]’);
} else {
document.write
(‘[<a href="#" onclick="check(‘myForm’, ‘inputCheck’,
true);’
+’ return
false">Choose input #6<‘+’/a>]’);
}
//–></script>
<h2 id="input7">Input
#7</h2>
<p>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.</p>
<script type="text/javascript"><!–
document.write (‘<form
onsubmit="return false">’);
document.write (‘<label>Fill
in input #7: <textarea name="myTextarea" value="Text goes
here."></textarea></’+’label>’);
document.write (‘<input
type="button" onclick="input(‘myForm’, ‘input7′, this.form.myTextarea.value)"
value="Update">’);
document.write
(‘</’+’form>’);
//–></script>
</body>
</html>
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();
}
