Novell Home

HowTo: Use Javascript and Frames and Forms in a Web Site Part 2

Novell Cool Solutions: Feature
By Stomfi

Digg This - Slashdot This

Posted: 17 Aug 2005
 

StomfiLearning to use Linux at Home and Work
Welcome to my ongoing series of HowTo articles designed to help Linux newbies get comfortable with Linux. Before trying any of these HowTos, take a few minutes to study the prerequisites so you can hit the ground running.
--Stomfi

This HowTo continues from Part 1 to show you a practical example of using Javascript and Frames using the web pages of the previous website article to navigate via a side bar menu. It also shows you how to create a simple form for emailing a quick inquiry.

Javascript is a language developed by Sun Microsystems and Netscape, and is based on Java. Frames are part of Javascript being an object of the object "document", but can be used independent of it. The object is used mainly to change the content of several frames at the click of the mouse.

If you have upgraded to SUSE 9.3 you can use the "quanta" application to create frames, but it is just as easy to write the HTML script yourself for this simple exercise.

In this part two of the howto you will see how to pretty up your page and how to do the form.

This is how I made my page look nicer.

That looks a lot better doesn't it. To achieve this look I had to find out how to get rid of the borders around the frames. Searching for "javascript frame attributes" on google brought up this page, which showed me what to do.

This is the new "index.html" file.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>ROGERS INDUSTRIES</title>

<meta name="GENERATOR" content="Quanta Plus">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<frameset frameborder="0" framespacing="0" cols="135,*">

<frame src="rmenu.html" name="RMENU"

marginwidth="3" marginheight="10" noresize="noresize" scrolling="no">

<frameset frameborder="0" framespacing="0" rows="30,*">

<frame src="rhead/RHOME.html" name="RTIT" marginwidth="15"

marginheight="2" scrolling="no">

<frame src="rpage/RHOME.html" name="RBODY" marginwidth="15"

marginheight="10" scrolling="yes"></frameset></frameset>

<body>

</body>

</html>

You can see that I've included the frameset attributes frameborder="0" and framespacing="0" for each frameset statement.

I also altered the frameset cols and rows to a fixed number instead of a percentage. This stops the frame contents from being hidden in different screen resolution settings. I've altered the margin attributes for better placemen of the frame contents as well.

My other change was to create a table for the menu and fill it with images that I created with the GIMP. Each image is 115 pixels by 25 pixels and contains the text. The images are linked to the references as shown in the newly edited file rmenu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8">

<title>menu</title>

<meta name="GENERATOR" content="OpenOffice.org 2.0-pre (Linux)">

<meta name="CREATED" content="20050512;21341400">

<meta name="CHANGED" content="20050512;21401200">

<style>

<!--

TD P { color: #000000 }

P { color: #000000 }

A:link { color: #000099 }

A:visited { color: #990099 }

-->

</style>

<script language="JavaScript">

<!--

function changeFrames(file2,file1) {

parent.frames[1].location.href=file1

parent.frames[2].location.href=file2

}

//-->

</script>

</head>

<body style="direction: ltr; color: rgb(0, 0, 0); background-color: rgb(42, 170, 212);"

alink="#000099" lang="en-US" link="#000099" vlink="#990099">

<table style="background-color: rgb(42, 170, 212); text-align: left; height: 395px; width: 120px;"

border="0" cellpadding="2" cellspacing="2">

<tbody>

<tr>

<td style="text-align: center; width: 110px;"><br>

<br>

<big><strong>- MENU -</strong></big><br>

</td>

</tr>

<tr>

<td style="text-align: center; width: 110px;"><a

href="javascript:changeFrames('rpage/RHOME.html','rhead/RHOME.html')"><img

style="border: 3px solid ; width: 115px; height: 25px;" alt="home.bmp"

src="images/home.bmp"></a></td>

</tr>

<tr>

<td style="text-align: center; width: 110px;"><a

href="javascript:changeFrames('rpage/ABOUT.html','rhead/ABOUT.html')"><img

style="border: 3px solid ; width: 115px; height: 25px;" alt="about.bmp"

src="images/about.bmp"></a></td>

</tr>

<tr>

<td style="width: 110px;"><a

href="javascript:changeFrames('rpage/DIECAST.html','rhead/DIECAST.html')"><img

style="border: 3px solid ; width: 115px; height: 25px;"

alt="diecast.bmp" src="images/diecast.bmp"></a></td>

</tr>

<tr>

<td style="width: 110px;"><a

href="javascript:changeFrames('rpage/GDC.html','rhead/GDC.html')"><img

style="border: 3px solid ; width: 115px; height: 25px;"

alt="gravity.bmp" src="images/gravity.bmp"></a></td>

</tr>

<tr>

<td style="width: 110px;"><a

href="javascript:changeFrames('rpage/LP.html','rhead/LP.html')"><img

style="border: 3px solid ; width: 115px; height: 25px;" alt="lp.bmp"

src="images/lp.bmp"></a></td>

</tr>

<tr>

<td style="width: 110px;"><a

href="javascript:changeFrames('rpage/MACHINING.html','rhead/MACHINING.html')"><img

style="border: 3px solid ; width: 115px; height: 25px;" alt="cnc.bmp"

src="images/cnc.bmp"></a></td>

</tr>

<tr>

<td style="width: 110px;"><a

href="javascript:changeFrames('rpage/LINISH.html','rhead/LINISH.html')"><img

style="border: 3px solid ; width: 115px; height: 25px;"

alt="linish.bmp" src="images/linish.bmp"></a></td>

</tr>

<tr>

<td style="width: 110px;"><a

href="javascript:changeFrames('rpage/SANDCORES.html','rhead/SANDCORES.html')"><img

style="border: 3px solid ; width: 115px; height: 25px;"

alt="sandcores.bmp" src="images/sandcores.bmp"></a></td>

</tr>

<tr>

<td style="width: 110px;"><a

href="javascript:changeFrames('rpage/TOOLMAKING.html','rhead/TOOLMAKING.html')"><img

style="border: 3px solid ; width: 115px; height: 25px;"

alt="toolmake.bmp" src="images/toolmake.bmp"></a></td>

</tr>

<tr>

<td style="text-align: center; width: 110px;"><a

href="javascript:changeFrames('rpage/PLASTICS.html','rhead/PLASTICS.html')"><img

style="border: 3px solid ; width: 115px; height: 25px;"

alt="plastics.bmp" src="images/plastics.bmp"></a></td>

</tr>

<tr>

<td style="text-align: center; width: 110px;"><a

href="javascript:changeFrames('rpage/INQUIRIES.html','rhead/INQUIRIES.html')"><img

style="border: 3px solid ; width: 115px; height: 25px;"

alt="inquiries.bmp" src="images/inquiries.bmp"></a></td>

</tr>

</tbody>

</table>

<br>

</body>

</html>

This is one of the table entries which I have copied here to explain it more clearly.

This is the table cell tag and attributes:

<td style="text-align: center; width: 110px;">

This is the link tag and javascript function call:

<a href="javascript:changeFrames('rpage/RHOME.html','rhead/RHOME.html')">

This is the image with a 3 pixel border:

<img style="border: 3px solid ; width: 115px; height: 25px;" alt="home.bmp" src="images/home.bmp">

This is the end of the link tag:

</a>

This is the end of the table cell tag:

</td>

I used a bmp format as I created them on win95 while showing a windows user how to do this with NVU and the GIMP, using vi in cygwin to edit the file.

Now that the page is looking more like a bought one, it's time to look at the form. I created the form by saving a blank page in mozilla composer, and then typing the HTML script in a text editor, saving that, viewing it in firefox, and re-editing until it looked OK.

This is the result:

And this is the HTML code for the page QUICKI.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta content="text/html; charset=ISO-8859-1"

http-equiv="content-type">

<title>Rogers Industries</title>

<script language="JavaScript">

<!--

function rconfirm(){

var result=""

if (document.forms[0].Name.value==""){

result=result + "Name required\n"

}

if (document.forms[0].Email.value==""){

result=result + "Email required\n"

}

if (document.forms[0].Jobtype.value==""){

result=result + "Job Type required\n"

}

if (document.forms[0].Diesource.value==""){

result=result + "Die Source required\n"

}

if (document.forms[0].Surface.value==""){

result=result + "Surface Area required\n"

}

if (document.forms[0].Volume.value==""){

result=result + "Volume required\n"

}

if (document.forms[0].Aquant.value==""){

result=result + "Annual Quantity required\n"

}

if (document.forms[0].Psdate.value==""){

result=result + "Production Start Date required\n"

}

if( result != "" ){

alert(result)

return false

}}

//-->

</script>

</head>

<body style="color: rgb(0, 0, 0); background-color: rgb(204, 255, 255);"

alink="#000099" link="#000099" vlink="#990099">

<h1>Quick Inquiry Form</h1>

<form action="mailto:stomfisite@bigpond.com" method="post"

onsubmit="return rconfirm()">

Fields Marked with a * must be filled in<br><br>

* Your Name: <input name="Name" size="40"> <br><br>

* Your Email: <input name="Email" size="40"> <br><br>

Job Inquiry:<br><br>

* Type:

<select name="Jobtype">

<option></option>

<option>DieCast</option>

<option>Machining</option>

<option>DieMaking</option>

<option>Plastics</option>

</select><br><br>

* Die Source:

<select name="Diesource">

<option></option>

<option>Customer Supplied</option>

<option>Rogers to Make</option>

</select><br><br><br>

* Approximate Annual Quantity:

<input name="Aquant" size="6"><br><br>

Delivery Periods:

<select name="Dperiod">

<option></option>

<option>Weekly</option>

<option>Monthly</option>

<option>3 Monthly</option>

<option>Yearly</option>

</select><br><br>

Product Details:<br><br>

* Surface Area in square mm: <input name="Surface" size="6"><br><br>

* Volume in cubic mm:

<input name="Volume" size="6"><br><br>

Intial Plastic Colour:

<input name="Colour" size="20"><br><br>

* Estimated Production Start Date:

<input name="Psdate" size="10"><br><br><br>

<input value="submit" type="submit">

<input value="reset" type="reset"></form>

</body>

</html>

This is a simple form with a required field validation function called rconfirm. This function is activated by the submit button and checks all the "required" fields to see that there is an entry in them. It doesn't check to see if the entry is correct, but with your knowledge of shell script programming, it shouldn't be too difficult to work out something for yourself.

If some of the required fields are not filled in, the function displays an alert message made up from the messages in the if statements, each ending with a newline denoted by "\n", and does not submit the form to the recipient.

This is an example of what you would see if you missed some of the required fields:

The form starts with the <form> tag which includes the attributes that are needed to make the form perform your required action, thus:

<form action="mailto:stomfisite@bigpond.com" method="post" onsubmit="return rconfirm()">

In this case the action is "mailto:" with the address with the method "post" activated by "onsubmit" with the argument "return rconfim()".

The "onsubmit" will only work if the value returned by "rconfirm()" is "true". That is not "false" as will be the case if one or more of the required fields do not have an entry.

You can see a very clear explanation of "onsubmit" at this link, which I used to gather some of this knowledge:

http://javascriptkit.com/javatutors/form7.shtml

Each of the "select" tags start with a blank option. This is so that the form starts, and is reset with all blank fields that let the rconfirm() function work as written.

That's all on this subject for now. I think that you'll find Javascript a little more complicated than shell scripting although about on a par with awk scripting. The if statements all have the same underlying functionality, it's the syntax that is different for each language.

You can see how the experts do things by saving pages and using Mozilla composer to edit and view the HTML source for the page. You'll notice that a good deal of the work is done with style pages. I'll show a bit about that in a later article when I've done the required research.

My reference book for this knowledge was "Get Going with Javascript" by Martin Baier from http://www.dymocks.com.au/ $AUD12.99, well worth it.


Novell Cool Solutions (corporate web communities) are produced by WebWise Solutions. www.webwiseone.com

© 2014 Novell