emd
04-29-2003, 04:50 AM
Hi, this form is working correctly as far as I can tell, but when I click one of the radio buttons in Internet Explorer, it gets a Javascript error on the bottom. I'm not sure why this is happening either, because the form is doing what it is supposed to do. Any help would be appreciated.
<html>
<head>
<title>Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.toggleable {
display: none;
}
</style>
<script type="text/javascript" language="javascript">
function getElement(id) {
return document.getElementById ? document.getElementById(id) :
document.all ? document.all(id) : null;
}
function toggle(bWhich, oRadio, focusEl) { //arguments: display? / radio object / element to focus (optional)
var el, i = 1;
while (el = getElement(oRadio.name + (i++))) //loop, looking for elements with radio button name + number
if (el.style) el.style.display = bWhich ? 'inline' : 'none'; //toggle display property
if (bWhich && focusEl) focusEl.focus(); //if true & focusEl argument to function, focus that element
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form method="post" enctype="multipart/form-data" action="formmail.php">
<div align="left">
<input type="hidden" name="recipient" value="blah@blah.com">
<input type=hidden name="redirect" value="thankyou.html">
<input type="hidden" name="env_report" value="REMOTE_HOST,HTTP_USER_AGENT">
<table border="0" cellpadding="2" bgcolor="#FFFFFF" bordercolor="#FFFFFF">
<tr bgcolor="#FFFFFF">
<td valign="top" colspan="2" height=48 bgcolor="#FFFFFF"><strong><font face="Verdana" color="#000066" size="2">Name:</font><font face="Verdana" color="#000066" size="2"></font><font face="Verdana" color="#000066" size="1"><br>
</font><font size="2">
<input type="text" name="Name" size="50">
</font></strong></td>
</tr>
<tr bgcolor=#FFFFFF>
<td height="48" width="296" valign="top" bgcolor="#FFFFFF">
<p align="left"><font face=Verdana color=ffffff size=1><strong><font color="#000066" size="2">Street:
</font><font color="#000066"><br>
</font><font size="2">
<input type="text" name="Street" size="50">
</font><font color="#000066"> </font></strong></font></p>
</td>
<td valign="top" width="109"><font face=Verdana color=ffffff size=1><strong><font color="#000066" size="2">Apt:<br>
<input type="text" name="apt" size="5">
</font></strong></font></td>
</tr>
<tr bgcolor=#FFFFFF>
<td height="48" valign="top" bgcolor="#FFFFFF" colspan="2"><font face=Verdana color=ffffff size=1><strong><font color="#000066" size="2">City,
State, Zip</font><font color="#000066"><br>
</font><font size="2"> </font><font face=Verdana color=ffffff size=1><strong><font size="2">
<input type="text" name="citystatezip" size="50">
</font></strong></font><font color="#000066"> </font></strong></font></td>
</tr>
<tr bgcolor=#FFFFFF>
<td height="130" valign="top" bgcolor="#FFFFFF" colspan="2"><font face=Verdana color=ffffff size=1><strong><font size="2" color="#000066"><br>
What will you be purchasing today?<br>
<br>
<input type="radio" name="sticker" value="Yes" onClick="toggle(true,this,sticker)">
Sticker - $1.00 each<br>
<br>
<input type="radio" name="tshirt" value="Yes" onClick="toggle(true,this,tshirt)">
T-Shirt - $10.00 each<br>
</font></strong></font></td>
</tr>
<tr id="sticker1" class="toggleable">
<td height="160" colspan="2" valign="top">
<p><font size="2"><i>If you did not want to purchase a sticker click
here:</i></font>
<input type="radio" name="sticker" value="No" onClick="toggle(false,this)">
<br>
<img src="images/sticker.gif" width="269" height="108"> </p>
<p><font face=Verdana color=ffffff size=1><strong><font size="2" color="#000066">
Quantity </font><font face=Verdana color=ffffff size=1><strong><font size="2" color="#000066">
<input type="text" name="sqty" maxlength="3" size="3">
</font></strong></font></strong></font></p>
</td>
</tr>
<tr id="tshirt1" class="toggleable">
<td height="175" colspan="2" valign="top"> <font size="2"><i>If you did
not want to purchase a T-Shirt click here:</i></font>
<input type="radio" name="tshirt" value="No" onClick="toggle(false,this)">
<br>
<font face=Verdana color=ffffff size=1><strong><font size="2" color="#000066">Front:<br>
<img src="images/shirtfront.gif" width="269" height="108"> </font></strong></font><br>
<font face=Verdana color=ffffff size=1><strong><font size="2" color="#000066">Back:<br>
<img src="images/shirtback.gif" width="400" height="127"> </font></strong></font><br>
<br>
<font face=Verdana color=ffffff size=1><strong><font size="2" color="#000066">Size</font></strong></font>
<select name="size">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="Extra Large">Extra Large</option>
</select>
<br>
<br>
<font face=Verdana color=ffffff size=1><strong><font size="2" color="#000066">Quantity
<input type="text" name="tqty" maxlength="3" size="3">
</font></strong></font> </td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="405">
<tr>
<td width="216" valign="top" height="33">
<input type="submit" name="submit" value="Submit">
</td>
<td width="189" valign="top">
<input type="reset" name="reset" value="Clear">
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Now in order for this to work you have to have each <tr> tag that you want to show up with a certain radio button being clicked have id="radiobuttonname1" class="toggleable". It should start with a 1 and can go on for however many new sections you want to show up.
<html>
<head>
<title>Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.toggleable {
display: none;
}
</style>
<script type="text/javascript" language="javascript">
function getElement(id) {
return document.getElementById ? document.getElementById(id) :
document.all ? document.all(id) : null;
}
function toggle(bWhich, oRadio, focusEl) { //arguments: display? / radio object / element to focus (optional)
var el, i = 1;
while (el = getElement(oRadio.name + (i++))) //loop, looking for elements with radio button name + number
if (el.style) el.style.display = bWhich ? 'inline' : 'none'; //toggle display property
if (bWhich && focusEl) focusEl.focus(); //if true & focusEl argument to function, focus that element
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form method="post" enctype="multipart/form-data" action="formmail.php">
<div align="left">
<input type="hidden" name="recipient" value="blah@blah.com">
<input type=hidden name="redirect" value="thankyou.html">
<input type="hidden" name="env_report" value="REMOTE_HOST,HTTP_USER_AGENT">
<table border="0" cellpadding="2" bgcolor="#FFFFFF" bordercolor="#FFFFFF">
<tr bgcolor="#FFFFFF">
<td valign="top" colspan="2" height=48 bgcolor="#FFFFFF"><strong><font face="Verdana" color="#000066" size="2">Name:</font><font face="Verdana" color="#000066" size="2"></font><font face="Verdana" color="#000066" size="1"><br>
</font><font size="2">
<input type="text" name="Name" size="50">
</font></strong></td>
</tr>
<tr bgcolor=#FFFFFF>
<td height="48" width="296" valign="top" bgcolor="#FFFFFF">
<p align="left"><font face=Verdana color=ffffff size=1><strong><font color="#000066" size="2">Street:
</font><font color="#000066"><br>
</font><font size="2">
<input type="text" name="Street" size="50">
</font><font color="#000066"> </font></strong></font></p>
</td>
<td valign="top" width="109"><font face=Verdana color=ffffff size=1><strong><font color="#000066" size="2">Apt:<br>
<input type="text" name="apt" size="5">
</font></strong></font></td>
</tr>
<tr bgcolor=#FFFFFF>
<td height="48" valign="top" bgcolor="#FFFFFF" colspan="2"><font face=Verdana color=ffffff size=1><strong><font color="#000066" size="2">City,
State, Zip</font><font color="#000066"><br>
</font><font size="2"> </font><font face=Verdana color=ffffff size=1><strong><font size="2">
<input type="text" name="citystatezip" size="50">
</font></strong></font><font color="#000066"> </font></strong></font></td>
</tr>
<tr bgcolor=#FFFFFF>
<td height="130" valign="top" bgcolor="#FFFFFF" colspan="2"><font face=Verdana color=ffffff size=1><strong><font size="2" color="#000066"><br>
What will you be purchasing today?<br>
<br>
<input type="radio" name="sticker" value="Yes" onClick="toggle(true,this,sticker)">
Sticker - $1.00 each<br>
<br>
<input type="radio" name="tshirt" value="Yes" onClick="toggle(true,this,tshirt)">
T-Shirt - $10.00 each<br>
</font></strong></font></td>
</tr>
<tr id="sticker1" class="toggleable">
<td height="160" colspan="2" valign="top">
<p><font size="2"><i>If you did not want to purchase a sticker click
here:</i></font>
<input type="radio" name="sticker" value="No" onClick="toggle(false,this)">
<br>
<img src="images/sticker.gif" width="269" height="108"> </p>
<p><font face=Verdana color=ffffff size=1><strong><font size="2" color="#000066">
Quantity </font><font face=Verdana color=ffffff size=1><strong><font size="2" color="#000066">
<input type="text" name="sqty" maxlength="3" size="3">
</font></strong></font></strong></font></p>
</td>
</tr>
<tr id="tshirt1" class="toggleable">
<td height="175" colspan="2" valign="top"> <font size="2"><i>If you did
not want to purchase a T-Shirt click here:</i></font>
<input type="radio" name="tshirt" value="No" onClick="toggle(false,this)">
<br>
<font face=Verdana color=ffffff size=1><strong><font size="2" color="#000066">Front:<br>
<img src="images/shirtfront.gif" width="269" height="108"> </font></strong></font><br>
<font face=Verdana color=ffffff size=1><strong><font size="2" color="#000066">Back:<br>
<img src="images/shirtback.gif" width="400" height="127"> </font></strong></font><br>
<br>
<font face=Verdana color=ffffff size=1><strong><font size="2" color="#000066">Size</font></strong></font>
<select name="size">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="Extra Large">Extra Large</option>
</select>
<br>
<br>
<font face=Verdana color=ffffff size=1><strong><font size="2" color="#000066">Quantity
<input type="text" name="tqty" maxlength="3" size="3">
</font></strong></font> </td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="405">
<tr>
<td width="216" valign="top" height="33">
<input type="submit" name="submit" value="Submit">
</td>
<td width="189" valign="top">
<input type="reset" name="reset" value="Clear">
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Now in order for this to work you have to have each <tr> tag that you want to show up with a certain radio button being clicked have id="radiobuttonname1" class="toggleable". It should start with a 1 and can go on for however many new sections you want to show up.