1. User Services
Summer 2000
Introduction to
• Create readable output
from a web form to
your mail reader. JavaScript Part II
• Check your form
Introduction
contents with JavaScript
JavaScript provides the capability of interactive, dynamic Web pages and
• Learn image swapping can be integrated right into your HTML. In “Part II”, how to send the
with JavaScript code. output from your form to your email address in a readable format will be
shown. This includes the use of a CGI script. Using JavaScript, partici-
• Create objects, pants will write scripts to check the contents of a form, create image
properties and methods swapping and use “this” and “new” to create objects and properties.
in JavaScript.
Tip:
JavaScript can be used Need Help?
The Help Desk is a service provided to all students, staff, and faculty at Mississippi State
to check the contents of
University at no charge. The consultants are here to help you with various computer-
a form, before the form related information or problems. Check the Web site at http://www.its.msstate.edu for
is submitted. handouts and/or resolutions to common computer problems. If you cannot find an answer
to your question on the Web or you do not have access to the Internet, please call us at
325-0631(7:00a.m. to 7:00 p.m.Monday through Friday).You can also e-mail us at
helpdesk@msstate.edu or come by our office at 46 Magruder Street (the blue house
behind Rice Hall) with walk-in hours from
8:00 a.m. to 5:00 p.m. weekdays.
Facilitators
Harriet Foley
hvf1@its.msstate.edu
Jim Stanmore
stanmore@its.msstate.edu

2. User Services
Index
Using a CGI Script with HTML
1. Sending Output From Your Form to Your Email Address in a Readable Format...........3-5
2. Mail-form Script........................................................................................................6-8
Using JavaScript with HTML
3. On-line JavaScript References .....................................................................................8
4. Using JavaScript to Check Your Form Content............................................................9
5. Image Swapping.........................................................................................................10
6. Creationism- Using “this” and “new”...........................................................................11
2

3. User Services
Example Form on Browser
We will be using this form to demonstrate how to create readable output in your mail
reader. When the form is submitted, the output will be sent to your mail reader in a
neat column.
On the following page is the HTML for this web page. It includes fields for creating
email with readable output which are explained on the page following the output.
3

4. User Services
HTML for previous Web Page
Save this in a file named news.html.
4

5. User Services
Explanation of Hidden Fields
1.
2.
3.
4.
5.
6.
Output if Sent to your Ra address on Pine.
5

6. User Services
CGI (Common Gateway Interface) Perl Script to process data
mail-form.pl
1.
2.
3.
4.
5.
6

7. User Services
6.
Top of
Output
Middle of
Output
Bottom of
Output
7

8. User Services
You can see the flow of the above cgi program.
OnLine JavaScript References
1. http://developer.netscape.com/docs/manuals/communicator/jsref/contents.htm
2. http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/
4. http://wdvl.internet.com/Authoring/JavaScript/Tutorial/conclude.html
5. http://www.webmonkey.com
8

9. User Services
Using JavaScript to Check Your Form Contents
1. Add the following event handler and javascript code to the FORM tag in the
news.html file, “Subscribe to Department Newsletter”, so that the Form Tag looks like the
following.
2. Put the following function between the header tags.
3. Test your form by leaving out name and then submitting it.
9

10. User Services
Image Swapping
Download the 2 gif files “button1a.gif” and “button1b.gif” from the J drive to your
local folder. Type the following program into the same folder in file image.htm.
Then test it out in Netscape Navigator.
10

11. User Services
Creationism. Using “this” and “new”.
Creating your own objects and properties.
You can create your own objects, properties and methods. This example is taken from
“JavaScript for Dummies”.
By using the new operator with a function you can define a new type of object. And
you can add your own methods.
Output
11

12. A publication of
User Services, a division of Information Technology Services,
Mississippi State University
Mike Rackley, Head
Mississippi State University does not discriminate on the basis of race, color, religion,
national origin, sex, age, disability, or veteran status.