HTML and CSS Reference
In-Depth Information
EXAMPLE
11.16 (
CONTINUED
)
<body><hr><h3> Display form data in a little window</h2><p>
7
<form name="formtest">
8
Please enter your name: <br />
<input type="text" size="50" name="user_name" />
<p>
Please enter your phone: <br />
<input type="text" size="30" name="user_phone" />
</p><p>
9
<input type="button"
value="show form data"
onClick="showForm(this.form)"; />
</form>
</p>
<big>
10
<a href="JavaScript:void(0)" onClick="close_window()">
Click here to close little window</a>
</big>
</body>
</html>
EXPLANATION
1
A JavaScript function called
showForm()
is defined. Its only parameter is a refer-
ence to the name of the form; in this example,
myform
.
2
A new
window
object is created with the window's
open()
method.
3
The variable called
name_input
is assigned a string that will contain HTML tags
and the value that was assigned to the form's text field.
4
The document of the new window will display the string value assigned to the
variable
name_input
in line 3.
5
The document of the new window will display the string value assigned to
phone_input
.
6
This function will close the new window.
7
The HTML form called
formtest
starts here.
8
The input type for this form consists of two text fields that will be used to obtain
the name and the phone of the user.
9
When the
button
input device is clicked, the
onClick
handler will be invoked. This
is when you will see the new little window appear on the screen with all the form
data.
10
The JavaScript
void(0)
operator has the effect of deactivating the link so that it will
not try to go to some URL when clicked (like the # in Example 11.17). Instead,
event handler
close_window()
will be invoked and the little window that was
opened to display the form data will be closed. See Figure 11.24.
