sgtpepper
07-17-2003, 12:57 PM
I am trying to have a javascript rollover enter info into my javascript form. Basically, it is a map with selectable regions. The form has two boxes. A box with a list of selections. After selection a region from the box...it gets entered into a second box.
I want to be able to have it so that if the user clicks on the map it will filling the second box.
I cant find the problem in my code. Can you please look at my code and offer a suggestion on how to fix it. I am pulling out (whats left) of my hair!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script language="Javascript">
<!--
function ClearList(OptionList, TitleName)
{ OptionList.length = 0;
}
function move(side)
{ var temp1 = new Array();
var temp2 = new Array();
var current1 = 0;
var current2 = 0;
var attribute;
//assign what select attribute treat as attribute1 and attribute2
if (side == "right")
{ attribute1 = document.rep.selecttownselect;
attribute2 = document.rep.selecttown;
}
else
{ attribute1 = document.rep.selecttown;
attribute2 = document.rep.selecttownselect;
}
//fill an array with old values
for (var i = 0; i < attribute2.length; i++)
{ temp1[current1++] = attribute2.options[i].value;
}
//assign new values to arrays
for (var i = 0; i < attribute1.length; i++)
{ if ( attribute1.options[i].selected )
{ temp1[current1++] = attribute1.options[i].value;
}
else
{ temp2[current2++] = attribute1.options[i].value;
}
}
//generating new options
for (var i = 0; i < temp1.length; i++)
{
attribute2.options[i] = new Option();
attribute2.options[i].value = temp1[i];
attribute2.options[i].text = temp1[i];
}
//generating new options
ClearList(attribute1,attribute1);
if (temp2.length>0)
{
for (var i = 0; i < temp2.length; i++)
{ attribute1.options[i] = new Option();
attribute1.options[i].value = temp2[i];
attribute1.options[i].text = temp2[i];
}
}
}
//-->
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<form action="newcode.php" method="POST" name ="rep">
<div align="center">
<center>
<table cellspacing="1" width="100%" height="123">
<tr>
<td bgcolor="#003366" align="center" colspan="3" width="270" height="18">
<strong><font face="Tahoma" color="#ffffff" size="2">Select a Town</font></strong>
</td>
<td bgcolor="#003366" align="center" width="240" height="18">
<strong><font face="Tahoma" color="#ffffff" size="2">Price Range</font></strong>
</td>
<td bgcolor="#003366" align="center" width="92" height="18">
<strong><font face="Tahoma" color="#ffffff" size="2">Bed Rooms</font></strong>
</td>
<td bgcolor="#003366" align="center" width="99" height="18">
<strong><font face="Tahoma" color="#ffffff" size="2">Baths Rooms</font></strong>
</td>
</tr>
<tr>
<td valign="top" height="97">
<p style="word-spacing: 0; margin-top: 0; margin-bottom: 0">
<select name="selecttownselect" multiple size="5" width="150px" type="text">
<option value="Lyme NH">Lyme, NH</option>
<option value="Hanover NH">Hanover, NH</option>
<option value="Lebanon NH">Lebanon, NH</option>
<option value="Plainfield NH">Plainfield, NH</option>
<option value="Enfield NH">Enfield, NH</option>
<option value="Canaan NH">Canaan, NH</option>
<option value="Grafton NH">Grafton, NH</option>
<option value="Grantham NH">Grantham, NH</option>
<option value="Eastman NH">Eastman, NH</option>
<option value="Orford NH">Orford, NH</option>
<option value="Piermont NH">Piermont, NH</option>
<option value="Haverhill NH">Haverhill, NH</option>
<option value="Bradford NH">Bradford, NH</option>
<option value="Chelsea VT">Chelsea, VT</option>
<option value="Corinth NH">Corinth, NH</option>
<option value="Strafford NH">Strafford, NH</option>
<option value="S. Strafford NH">S. Strafford, NH</option>
<option value="Thetford VT">Thetford, VT</option>
<option value="Norwich VT">Norwich, VT</option>
<option value="Hartford VT">Hartford, VT</option>
<option value="Wilder VT">Wilder, VT</option>
<option value="Quechee VT">Quechee, VT</option>
<option value="Hartland VT">Hartland, VT</option>
<option value="Woodstock VT">Woodstock, VT</option>
<option value="Barnard VT">Barnard, VT</option>
<option value="Pomfret VT">Pomfret, VT</option>
<option value="Cornish NH">Cornish, NH</option>
<option value="Sunapee NH">Sunapee, NH</option>
<option value="Newbury NH">Newbury, NH</option>
<option value="Sutton NH">Sutton, NH</option>
<option value="Barnard NH">Barnard, NH</option>
<option value="Bethel NH">Bethel, NH</option>
<option value="">----Secondary Towns----</option>
<option value="Ascutney VT">Ascutney, VT</option>
<option value="Barnard VT">Barnard, VT</option>
<option value="Bethel NH">Bethel, NH</option>
<option value="Brownsville VT">Brownsville, VT</option>
<option value="Chelsea NH">Chelsea, NH</option>
<option value="Croydon NH">Croydon, NH</option>
<option value="Windsor VT">Windsor, VT</option>
<option value="Fairlee VT">Fairlee, VT</option>
<option value="Dorechester VT">Dorchester, VT</option>
<option value="Randolph VT">Randolph, VT</option>
<option value="Sharon NH">Sharon, NH</option>
<option value="Springfield NH">Springfield, NH</option>
<option value="Vershire VT">Vershire, VT</option>
<option value="Windsor VT">Windsor, VT</option>
<option value="New London NH">New London, NH</option>
</select></p>
<p style="word-spacing: 0; margin-top: 0; margin-bottom: 0" align="center">
<input type="button" value="Add" onclick="move('right')"></p>
</td>
<td valign="top" height="97">
</td>
<td valign="top" height="97">
<p style="word-spacing: 0; margin-top: 0; margin-bottom: 0">
<select name="selecttown" multiple size="5" style="width=150px" width="150px">
</select></p>
<p align="center" style="word-spacing: 0; margin-top: 0; margin-bottom: 0"><input type="button" value="Remove"
onclick="move('left')">
</p>
</td>
<td valign="top" height="97">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="147">Enter your lowest price:</td>
<td>$<input value="0" name="lowprice" size="9"></td>
</tr>
<tr>
<td width="147">Enter your highest price:</td>
<td>$<input value="300000" name="highprice" size="9"></td>
</tr>
</table>
</td>
<td valign="top" height="97">
<input type="radio" CHECKED value="%" name="bedroomsel"><font face="Courier">Any<br>
<input type="radio" value="1" name="bedroomsel" ?>1<br>
<input type="radio" value="2" name="bedroomsel" ?>2<br>
<input type="radio" value="3" name="bedroomsel" ?>3</font>
</td>
<td valign="top" height="97">
<input type="radio" CHECKED value="%" name="bathselect"><font face="Courier">Any<br>
<input type="radio" value="1" name="bathselect">1<br>
<input type="radio" value="2" name="bathselect">2</font>
</td>
</tr>
<tr>
<td valign="top" colspan="6">
<p align="center"><input type="submit" value="Submit" name="B1">
</td>
</tr>
</table>
</center>
</div>
</form>
</td>
</tr>
</table>
<IMG SRC="file:///C:/maptest/blankwhite.gif" NAME="therollover" BORDER=0 ALT="See All the Fun" width="288" height="216"><map name="seafunmap.jpg">
<area shape="rect" coords="23, 294, 79, 369"
href="javascript:void(0);" onClick="document.forms['rep'].selecttown.value = 'Cyan'; return false;"
onMouseOver="therollover.src='file:///C:/maptest/sullivan.gif'"
onMouseOut="therollover.src='file:///C:/maptest/blankwhite.gif'" alt="Claremont, NH - balh, NH">
<area shape="polygon" coords="111, 298, 117, 309, 140, 323, 168, 345, 176, 341, 180, 334, 175, 313, 175, 308, 179, 304, 175, 299, 162, 294, 140, 268, 135, 266, 135, 273, 126, 274, 121, 277, 114, 285, 112, 294"
href="javascript:void(0);" onClick="document.forms['myForm'].myField.value = 'Cyan'; return false;"
onMouseOver="therollover.src='file:///C:/maptest/belnap.gif'"
onMouseOut="therollover.src='file:///C:/maptest/blankwhite.gif'" alt="Claremont, NH - balh, NH">
</map><IMG SRC="file:///C:/maptest/nh.gif"
ALT="imagemap" usemap="#seafunmap.jpg" border="0" width="239" height="451">
</body>
</html>
I want to be able to have it so that if the user clicks on the map it will filling the second box.
I cant find the problem in my code. Can you please look at my code and offer a suggestion on how to fix it. I am pulling out (whats left) of my hair!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script language="Javascript">
<!--
function ClearList(OptionList, TitleName)
{ OptionList.length = 0;
}
function move(side)
{ var temp1 = new Array();
var temp2 = new Array();
var current1 = 0;
var current2 = 0;
var attribute;
//assign what select attribute treat as attribute1 and attribute2
if (side == "right")
{ attribute1 = document.rep.selecttownselect;
attribute2 = document.rep.selecttown;
}
else
{ attribute1 = document.rep.selecttown;
attribute2 = document.rep.selecttownselect;
}
//fill an array with old values
for (var i = 0; i < attribute2.length; i++)
{ temp1[current1++] = attribute2.options[i].value;
}
//assign new values to arrays
for (var i = 0; i < attribute1.length; i++)
{ if ( attribute1.options[i].selected )
{ temp1[current1++] = attribute1.options[i].value;
}
else
{ temp2[current2++] = attribute1.options[i].value;
}
}
//generating new options
for (var i = 0; i < temp1.length; i++)
{
attribute2.options[i] = new Option();
attribute2.options[i].value = temp1[i];
attribute2.options[i].text = temp1[i];
}
//generating new options
ClearList(attribute1,attribute1);
if (temp2.length>0)
{
for (var i = 0; i < temp2.length; i++)
{ attribute1.options[i] = new Option();
attribute1.options[i].value = temp2[i];
attribute1.options[i].text = temp2[i];
}
}
}
//-->
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<form action="newcode.php" method="POST" name ="rep">
<div align="center">
<center>
<table cellspacing="1" width="100%" height="123">
<tr>
<td bgcolor="#003366" align="center" colspan="3" width="270" height="18">
<strong><font face="Tahoma" color="#ffffff" size="2">Select a Town</font></strong>
</td>
<td bgcolor="#003366" align="center" width="240" height="18">
<strong><font face="Tahoma" color="#ffffff" size="2">Price Range</font></strong>
</td>
<td bgcolor="#003366" align="center" width="92" height="18">
<strong><font face="Tahoma" color="#ffffff" size="2">Bed Rooms</font></strong>
</td>
<td bgcolor="#003366" align="center" width="99" height="18">
<strong><font face="Tahoma" color="#ffffff" size="2">Baths Rooms</font></strong>
</td>
</tr>
<tr>
<td valign="top" height="97">
<p style="word-spacing: 0; margin-top: 0; margin-bottom: 0">
<select name="selecttownselect" multiple size="5" width="150px" type="text">
<option value="Lyme NH">Lyme, NH</option>
<option value="Hanover NH">Hanover, NH</option>
<option value="Lebanon NH">Lebanon, NH</option>
<option value="Plainfield NH">Plainfield, NH</option>
<option value="Enfield NH">Enfield, NH</option>
<option value="Canaan NH">Canaan, NH</option>
<option value="Grafton NH">Grafton, NH</option>
<option value="Grantham NH">Grantham, NH</option>
<option value="Eastman NH">Eastman, NH</option>
<option value="Orford NH">Orford, NH</option>
<option value="Piermont NH">Piermont, NH</option>
<option value="Haverhill NH">Haverhill, NH</option>
<option value="Bradford NH">Bradford, NH</option>
<option value="Chelsea VT">Chelsea, VT</option>
<option value="Corinth NH">Corinth, NH</option>
<option value="Strafford NH">Strafford, NH</option>
<option value="S. Strafford NH">S. Strafford, NH</option>
<option value="Thetford VT">Thetford, VT</option>
<option value="Norwich VT">Norwich, VT</option>
<option value="Hartford VT">Hartford, VT</option>
<option value="Wilder VT">Wilder, VT</option>
<option value="Quechee VT">Quechee, VT</option>
<option value="Hartland VT">Hartland, VT</option>
<option value="Woodstock VT">Woodstock, VT</option>
<option value="Barnard VT">Barnard, VT</option>
<option value="Pomfret VT">Pomfret, VT</option>
<option value="Cornish NH">Cornish, NH</option>
<option value="Sunapee NH">Sunapee, NH</option>
<option value="Newbury NH">Newbury, NH</option>
<option value="Sutton NH">Sutton, NH</option>
<option value="Barnard NH">Barnard, NH</option>
<option value="Bethel NH">Bethel, NH</option>
<option value="">----Secondary Towns----</option>
<option value="Ascutney VT">Ascutney, VT</option>
<option value="Barnard VT">Barnard, VT</option>
<option value="Bethel NH">Bethel, NH</option>
<option value="Brownsville VT">Brownsville, VT</option>
<option value="Chelsea NH">Chelsea, NH</option>
<option value="Croydon NH">Croydon, NH</option>
<option value="Windsor VT">Windsor, VT</option>
<option value="Fairlee VT">Fairlee, VT</option>
<option value="Dorechester VT">Dorchester, VT</option>
<option value="Randolph VT">Randolph, VT</option>
<option value="Sharon NH">Sharon, NH</option>
<option value="Springfield NH">Springfield, NH</option>
<option value="Vershire VT">Vershire, VT</option>
<option value="Windsor VT">Windsor, VT</option>
<option value="New London NH">New London, NH</option>
</select></p>
<p style="word-spacing: 0; margin-top: 0; margin-bottom: 0" align="center">
<input type="button" value="Add" onclick="move('right')"></p>
</td>
<td valign="top" height="97">
</td>
<td valign="top" height="97">
<p style="word-spacing: 0; margin-top: 0; margin-bottom: 0">
<select name="selecttown" multiple size="5" style="width=150px" width="150px">
</select></p>
<p align="center" style="word-spacing: 0; margin-top: 0; margin-bottom: 0"><input type="button" value="Remove"
onclick="move('left')">
</p>
</td>
<td valign="top" height="97">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="147">Enter your lowest price:</td>
<td>$<input value="0" name="lowprice" size="9"></td>
</tr>
<tr>
<td width="147">Enter your highest price:</td>
<td>$<input value="300000" name="highprice" size="9"></td>
</tr>
</table>
</td>
<td valign="top" height="97">
<input type="radio" CHECKED value="%" name="bedroomsel"><font face="Courier">Any<br>
<input type="radio" value="1" name="bedroomsel" ?>1<br>
<input type="radio" value="2" name="bedroomsel" ?>2<br>
<input type="radio" value="3" name="bedroomsel" ?>3</font>
</td>
<td valign="top" height="97">
<input type="radio" CHECKED value="%" name="bathselect"><font face="Courier">Any<br>
<input type="radio" value="1" name="bathselect">1<br>
<input type="radio" value="2" name="bathselect">2</font>
</td>
</tr>
<tr>
<td valign="top" colspan="6">
<p align="center"><input type="submit" value="Submit" name="B1">
</td>
</tr>
</table>
</center>
</div>
</form>
</td>
</tr>
</table>
<IMG SRC="file:///C:/maptest/blankwhite.gif" NAME="therollover" BORDER=0 ALT="See All the Fun" width="288" height="216"><map name="seafunmap.jpg">
<area shape="rect" coords="23, 294, 79, 369"
href="javascript:void(0);" onClick="document.forms['rep'].selecttown.value = 'Cyan'; return false;"
onMouseOver="therollover.src='file:///C:/maptest/sullivan.gif'"
onMouseOut="therollover.src='file:///C:/maptest/blankwhite.gif'" alt="Claremont, NH - balh, NH">
<area shape="polygon" coords="111, 298, 117, 309, 140, 323, 168, 345, 176, 341, 180, 334, 175, 313, 175, 308, 179, 304, 175, 299, 162, 294, 140, 268, 135, 266, 135, 273, 126, 274, 121, 277, 114, 285, 112, 294"
href="javascript:void(0);" onClick="document.forms['myForm'].myField.value = 'Cyan'; return false;"
onMouseOver="therollover.src='file:///C:/maptest/belnap.gif'"
onMouseOut="therollover.src='file:///C:/maptest/blankwhite.gif'" alt="Claremont, NH - balh, NH">
</map><IMG SRC="file:///C:/maptest/nh.gif"
ALT="imagemap" usemap="#seafunmap.jpg" border="0" width="239" height="451">
</body>
</html>