:: Forum >> General/Off-topic >>

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:
<style type="text/css">
    
body
    
{
        
font-familyarial;
        
font-size11px;
        
color#000000;
    }
    .
hideRow
    
{
        
displaynone;
    }
    .
showRow
    
{
        
displaytable-row;
    }
    .
layout
    
{
        
font-size11px;
    }
    
b
    
{
        
font-size15px;
    }
</
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">
                &
nbsp;
            </
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">
                &
nbsp;
            </
td>
        </
tr>
        <
tr>
            <
td width="20">
                &
nbsp;
            </
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">
                &
nbsp;
            </
td>
        </
tr>
        <
tr>
            <
td width="20">
                &
nbsp;
            </
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">
                &
nbsp;
            </
td>
        </
tr>
        <
tr id="extra1a" class="hideRow">
            <
td height="30" colspan="4">
                
How far is the location in which your lookingfrom your current location?
            
</td>
        </
tr>
        <
tr id="extra1b" class="hideRow">
            <
td width="20">
                &
nbsp;
            </
td>
            <
td width="100%" colspan="2">
                <
input type="radio" name="distance" value="&#62;1" />&#60;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="&#62;25" />&#62;25 miles
            
</td>
            <
td width="20">
                &
nbsp;
            </
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">
                &
nbsp;
            </
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">
                &
nbsp;
            </
td>
        </
tr>
        <
tr>
            <
td height="30" colspan="4">
                Do 
you live in the area covered by this newspaper?
            
</td>
        </
tr>
        <
tr>
            <
td width="20">
                &
nbsp;
            </
td>
            <
td colspan="2">
                <
input type="radio" name="local" value="yes" />Yes    <input type="radio" name="local" value="no"/>No
            
</td>
            <
td width="20">
                &
nbsp;
            </
td>
        </
tr>
        <
tr>
            <
td height="30" colspan="4">
                
How often do you use our Homes section?
            
</td>
        </
tr>
        <
tr>
            <
td width="20">
                &
nbsp;
            </
td>
            <
td colspan="2">
                <
input type="radio" name="visits" value="first_time" />First time&nbsp;&nbsp;&nbsp;<input type="radio" name="visits" value="regularly" />Regularly&nbsp;&nbsp;&nbsp;<input type="radio" name="visits" value="occasionally" />Occasionally&nbsp;&nbsp;&nbsp;<input type="radio" name="visits" value="rarely" />Rarely
            
</td>
            <
td width="20">
                &
nbsp;
            </
td>
        </
tr>
        <
tr>
            <
td height="30" colspan="4">
                
Please rate our homes section:
            </
td>
        </
tr>
        <
tr>
            <
td width="20">
                &
nbsp;
            </
td>
            <
td colspan="2">
                
Poor&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Excellent
                
<br>
                <
input type="radio" name="rate" value="1" />1&nbsp;&nbsp;&nbsp;<input type="radio" name="rate" value="2" />2&nbsp;&nbsp;&nbsp;<input type="radio" name="rate" value="3" />3&nbsp;&nbsp;&nbsp;<input type="radio" name="rate" value="4" />4&nbsp;&nbsp;&nbsp;<input type="radio" name="rate" value="5" />5
            
</td>
            <
td width="20">
                &
nbsp;
            </
td>
        </
tr>
        <
tr>
            <
td height="30" colspan="4">
                
What are the strengths and weaknesses of our Homes section?
            
</td>
        </
tr>
        <
tr>
            <
td width="20">
                &
nbsp;
            </
td>
            <
td colspan="2">
                <
textarea style="width:100%; height:40;" rows="2" name="comments_on_site"></textarea>
            </
td>
            <
td width="20">
                &
nbsp;
            </
td>
        </
tr>
        <
tr>
            <
td height="30" colspan="4">
                
How could we improve our Homes section?
            
</td>
        </
tr>
        <
tr>
            <
td width="20">
                &
nbsp;
            </
td>
            <
td colspan="2">
                <
textarea style="width:100%;height:40" rows="2" name="improve_suggestions"></textarea>
            </
td>
            <
td width="20">
                &
nbsp;
            </
td>
        </
tr>
        <
tr>
            <
td height="30" colspan="4">
                
Would you be interested in taking further part in improving our site? If soplease provide your email address:
            </
td>
        </
tr>
        <
tr>
            <
td width="20">
                &
nbsp;
            </
td>
            <
td colspan="2">
                <
input type="text" name="email" style="width:100%">
            </
td>
            <
td width="20">
                &
nbsp;
            </
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
Thursday, September 20, 2007
Please disregard the alert()'s. These were added during testing.
John Askew
Thursday, September 20, 2007



This topic is archived.

Back to support forum

Forum search