| home / programming / javascript / jf / column11 / 1 |   [next] |
|
|
|
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 little “X” (or circle if they’re on a Mac). 2. They don’t have to remember where they left off before the popup opened. 3. They receive help and at the same time, learn what to put into the field. |
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();
}
| home / programming / javascript / jf / column11 / 1 | [next] |
The Network for Technology Professionals
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers
|
Webcast: Connecting PHP to Microsoft Technologies Video: Windows Azure Debugging Tips |
MORE WEBCASTS, PODCASTS, AND VIDEOS |
URL: http://webreference.com/programming/javascript/jf/column11/1
