IE onpropertychange strange behaviour
I have written a form and I want to add questions when a user clicks on certain checkboxes. If a user selects buying checkbox question 'extra1' should display and if user selects letting checkbox questions 'extra1' and 'extra2' should display. The following code works fine in Firefox but in IE the change occurs as expected but if you click anywhere after making a change the the onpropertychange checkboxes the box remains checked but the additional question dissapears.
Stylesheet:
Javascript:
HTML:
Stylesheet:
<style type="text/css">
body
{
font-family: arial;
font-size: 11px;
color: #000000;
}
.hideRow
{
display: none;
}
.showRow
{
display: table-row;
}
.layout
{
font-size: 11px;
}
b
{
font-size: 15px;
}
</style>Javascript:
<script type="text/javascript">
var extra1 = 'off';
var extra2 = 'off';
function toggleExtra1()
{
if(extra1 == 'off')
{
extra1 = 'on';
}
else
{
extra1 = 'off';
}
alert(extra1+' '+extra2);
classSwitch();
}
function toggleExtra2()
{
if(extra2 == 'off')
{
extra2 = 'on';
}
else
{
extra2 = 'off';
}
alert(extra1+' '+extra2);
classSwitch();
}
function classSwitch()
{
if(extra1 == 'off')
{
if(extra2 == 'off')
{
extra1a.className = 'hideRow';
extra1b.className = 'hideRow';
extra2a.className = 'hideRow';
extra2b.className = 'hideRow';
}
else
{
extra1a.className = 'showRow';
extra1b.className = 'showRow';
extra2a.className = 'showRow';
extra2b.className = 'showRow';
}
}
else
{
if(extra2 == 'off')
{
extra1a.className = 'showRow';
extra1b.className = 'showRow';
extra2a.className = 'hideRow';
extra2b.className = 'hideRow';
}
else
{
extra1a.className = 'showRow';
extra1b.className = 'showRow';
extra2a.className = 'showRow';
extra2b.className = 'showRow';
}
}
}
</script>HTML:
<form id="survey_form" method="post" action="HIDDEN FOR SECURITY">
<input type="hidden" name="recipient" value="HIDDEN FOR SECURITY">
<input type="hidden" name="redirect" value="HIDDEN FOR SECURITY">
<input type="hidden" name="subject" value="Homes v4 user survey (take 2)">
<table id="layout" width="100%" cellspacing="0" cellpadding="1" class="layout">
<tr>
<td colspan="4">
<b>Help us improve our Homes section by answering the following questions:</b>
</td>
</tr>
<tr>
<td height="30" colspan="4">
Are you:
</td>
</tr>
<tr>
<td width="20">
</td>
<td width="50%">
<input type="checkbox" name="user_type" value="buying" onpropertychange="toggleExtra1();" onchange="toggleExtra1();" />Buying a property
</td>
<td width="50%">
<input type="checkbox" name="user_type" value="selling" />Selling a property
</td>
<td width="20">
</td>
</tr>
<tr>
<td width="20">
</td>
<td width="50%">
<input type="checkbox" name="user_type" value="renting" onpropertychange="toggleExtra2();" onchange="toggleExtra2();" />Looking to rent
</td>
<td width="50%">
<input type="checkbox" name="user_type" value="letting" />Looking to let
</td>
<td width="20">
</td>
</tr>
<tr>
<td width="20">
</td>
<td width="50%">
<input type="checkbox" name="user_type" value="agent" />Estate agent
</td>
<td width="50%">
<input type="checkbox" name="user_type" value="casual" />Casual
</td>
<td width="20">
</td>
</tr>
<tr id="extra1a" class="hideRow">
<td height="30" colspan="4">
How far is the location in which your looking, from your current location?
</td>
</tr>
<tr id="extra1b" class="hideRow">
<td width="20">
</td>
<td width="100%" colspan="2">
<input type="radio" name="distance" value=">1" /><1 mile<input type="radio" name="distance" value="1-3" />1 to 3 miles<input type="radio" name="distance" value="4-9" />4 to 9 miles<input type="radio" name="distance" value="10-25" />10 to 25 miles<input type="radio" name="distance" value=">25" />>25 miles
</td>
<td width="20">
</td>
</tr>
<tr id="extra2a" class="hideRow">
<td height="30" colspan="4">
Are you looking to rent...
</td>
</tr>
<tr id="extra2b" class="hideRow">
<td width="20">
</td>
<td width="100%" colspan="2">
<input type="radio" name="rent" value="room" />a room <input type="radio" name="rent" value="property" />a property
</td>
<td width="20">
</td>
</tr>
<tr>
<td height="30" colspan="4">
Do you live in the area covered by this newspaper?
</td>
</tr>
<tr>
<td width="20">
</td>
<td colspan="2">
<input type="radio" name="local" value="yes" />Yes <input type="radio" name="local" value="no"/>No
</td>
<td width="20">
</td>
</tr>
<tr>
<td height="30" colspan="4">
How often do you use our Homes section?
</td>
</tr>
<tr>
<td width="20">
</td>
<td colspan="2">
<input type="radio" name="visits" value="first_time" />First time <input type="radio" name="visits" value="regularly" />Regularly <input type="radio" name="visits" value="occasionally" />Occasionally <input type="radio" name="visits" value="rarely" />Rarely
</td>
<td width="20">
</td>
</tr>
<tr>
<td height="30" colspan="4">
Please rate our homes section:
</td>
</tr>
<tr>
<td width="20">
</td>
<td colspan="2">
Poor Excellent
<br>
<input type="radio" name="rate" value="1" />1 <input type="radio" name="rate" value="2" />2 <input type="radio" name="rate" value="3" />3 <input type="radio" name="rate" value="4" />4 <input type="radio" name="rate" value="5" />5
</td>
<td width="20">
</td>
</tr>
<tr>
<td height="30" colspan="4">
What are the strengths and weaknesses of our Homes section?
</td>
</tr>
<tr>
<td width="20">
</td>
<td colspan="2">
<textarea style="width:100%; height:40;" rows="2" name="comments_on_site"></textarea>
</td>
<td width="20">
</td>
</tr>
<tr>
<td height="30" colspan="4">
How could we improve our Homes section?
</td>
</tr>
<tr>
<td width="20">
</td>
<td colspan="2">
<textarea style="width:100%;height:40" rows="2" name="improve_suggestions"></textarea>
</td>
<td width="20">
</td>
</tr>
<tr>
<td height="30" colspan="4">
Would you be interested in taking further part in improving our site? If so, please provide your email address:
</td>
</tr>
<tr>
<td width="20">
</td>
<td colspan="2">
<input type="text" name="email" style="width:100%">
</td>
<td width="20">
</td>
</tr>
<tr>
<td height="40" colspan="4" align="center">
<script type="text/javascript">
document.write('<input type="hidden" name="referrer" value="' + document.referrer + '">');
</script>
<input type="submit" id="submit_b" name="submit_b" value="submit">
</td>
</tr>
</table>
</form>John Askew
September 20,