PDA

Click to See Complete Forum and Search --> : two forms on one page

jyoung00
11-21-2008, 03:52 AM
I am trying to build a page that lets you either display a map of an office location or driving directions from a starting address to that office and a map to that office location.

Since there are 3 office locations to choose from I use a drop-down select to choose the office and then input fields for the starting address (only if they want driving directions). My form method is "get" but the problem I am having is that there are two different form actions depending on whether they want to just display a map of the office location or get driving locations from their starting address so I need two forms. Each form is in a separate table but I can't get the 2nd one to work as long as the first one is on the page. I've been working on this for a month now and just can't figure it out. HELP!!!!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Directions</title>
</head>
<body>
<P>
<div>
<table width="760" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<P>
<table border="0" width="550" bordercolor="#000000" cellpadding="2" cellspacing="0" class="table_d2e50 usertable main_table">
<tr>
<td class="user main">
<div>
<P align=center><FONT face="tahoma,verdana,sans-serif" size=2>2801 Youngfield Street<BR> Golden, CO&nbsp; 80401</FONT>
</p>
<P align=center>
<form action="http://maps.msn.com/home.aspx" method="get" style="margin-top:0; margin-bottom:0" target="_blank"><input name="strt1" type="hidden" value="2801 Youngfield St "><input name="city1" type="hidden" value="Golden "><input name="stnm1" type="hidden" value="CO "><input name="zipc1" type="hidden" value="80401"><input border="0" src="/addon/maps/white_view_map.gif" type="image">
</form>
</P>
</div>
</td>
<td class="user main">
<div>
<P align=center><FONT face=Tahoma size=2>12001 W. 63rd. Place<BR>Arvada, CO&nbsp; 80004</FONT>
</p>
<P align=center>
<form action="http://maps.msn.com/home.aspx" method="get" style="margin-top:0; margin-bottom:0" target="_blank"><input name="strt1" type="hidden" value="12001 63rd Pl "><input name="city1" type="hidden" value="Arvada "><input name="stnm1" type="hidden" value="CO "><input name="zipc1" type="hidden" value="80004"><input border="0" src="/addon/maps/white_view_map.gif" type="image">
</form>
</P>
</div>
</td>
<td class="user main">
<div>
<P align=center><FONT face=Tahoma size=2>808 S. Public Road<BR>Lafayette, CO&nbsp; 80026-2194</FONT>
</p>
<P align=center>
<form action="http://maps.msn.com/home.aspx" method="get" style="margin-top:0; margin-bottom:0" target="_blank"><input name="strt1" type="hidden" value="808 S Public Rd "><input name="city1" type="hidden" value="Lafayette "><input name="stnm1" type="hidden" value="CO "><input name="zipc1" type="hidden" value="80026"><input border="0" src="/addon/maps/white_view_map.gif" type="image">
</form>
</P>
</div>
</td>
<td class="user main"> 
</td>
</tr>
</table>
</p>
</td>
</tr>
</table>

</div>
</p>
<p>
<div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<TD ALIGN="center" COLSPAN="3">
<script type="text/javascript">
<!--
function onsel(){var form = document.forms[0];

if(form.office.selectedIndex==0){ // Don't display anything if first option is selected
form.strt2.value =""; form.city2.value =""; form.stnm2.value =""; form.zipc2.value ="";
return;
}

form.strt2.value = form.office.options[form.office.selectedIndex].value.split("|")[0];
form.city2.value = form.office.options[form.office.selectedIndex].value.split("|")[1];
form.stnm2.value = form.office.options[form.office.selectedIndex].value.split("|")[2];
form.zipc2.value = form.office.options[form.office.selectedIndex].value.split("|")[3];
}
// -->
</script>


<form action="http://maps.msn.com/directionsFind.aspx" method="get" style="margin-bottom:0" target="_blank">
<select onclick="onsel()" name="office">
<option>Choose Office Location...</option>
<option value="2801 Youngfield St |Golden |CO |80401">Golden</option>
<option value="12001 63rd Pl |Arvada |CO |80004">Arvada</option>
<option value="808 S Public Rd |Lafayette |CO |80026">Lafayette</option>
</select><br />
<input type="text" name="strt2" value="" /><br />
<input type="text" name="city2" value="" /><br />
<input type="text" name="stnm2" value="" /><br />
<input type="text" name="zipc2" value="" /><br />
<table border="0" cellpadding="0" cellspacing="0">
<TR>
<TD ALIGN="center" COLSPAN="3">
<table border="0" width="550">

<TR>
<TD ALIGN="left" COLSPAN="2"><span style="font-weight:bold;font-size:13px;">Enter your starting address:</span>
</TD>
</TR>

<TR>
<TD ALIGN="right"><span style="font-size:13px;">Street Address: </span></TD><TD><INPUT NAME="strt1" SIZE="30" TYPE="text">
</TD>
</TR>
<TR>
<TD ALIGN="right"><span style="font-size:13px;">City: </span>
</TD>
<TD><INPUT NAME="city1" SIZE="30" TYPE="text">
</TD>
</TR>
<TR>
<TD ALIGN="right"><span style="font-size:13px;">State: </span>
</TD>
<TD><INPUT NAME="stnm1" SIZE="30" TYPE="text">
</TD>
</TR>
<TR>
<TD ALIGN="right"><span style="font-size:13px;">ZIP Code: </span>
</TD>
<TD><INPUT NAME="zipc1" SIZE="30" TYPE="text">
</TD>
</TR>
</table>
</TD>
</TR>
<TR>
<TD ALIGN="center" COLSPAN="3"><input border="0" src="/addon/maps/white_plan_route.gif" type="image">
</td>
</tr>
</table>
</form>
</TD>
</TR>
</table>
<!--end gem--><!--"''"-->
</div>
</p>
</body>

</html>
Mindzai
11-21-2008, 11:24 PM
document.forms[0] refers to the first form in the page. You either need document.forms[3] (4th form in the page) or even better name the form and reference it explicitly so the order doesn't matter.
jyoung00
11-22-2008, 01:38 AM
Thank You!! I've looked at the code for so long I didn't even see that. Thank you for your help.