id.style.display not working

Question

Not sure why this isn't working. There is no js error, but it just doesn't set the display property to "block". If I remove the inner most if statement, the display property for the div control is changed when the last radio button is selected from the group.

.aspx file

<asp:RadioButtonList ID="rblMarital" RepeatDirection="Horizontal" runat="server">
    <asp:ListItem Value="S" Selected="True">Single</asp:ListItem>
    <asp:ListItem Value="M">Married</asp:ListItem>
    <asp:ListItem Value="D">Separated/Divorced</asp:ListItem>
</asp:RadioButtonList>

codebehind

If controlId = "rblMarital" Then
    str = "M"
End If

rbl = wizard.FindControl(controlId)
div = wizard.FindControl(temp)
rbl.Attributes.Add("onClick", "showHide('" & rbl.UniqueID & "','" & div.ClientID & "','" & str & "')")

javascript

function showHide(rbl, div, str) {

    var rblID = document.getElementsByName(rbl);
    var divID = document.getElementById(div);

    for (var j = 0; j < rblID.length; j++) {
        if (rblID[j].checked) {
            if (rblID[j].value == str) {
                divID.style.display = "block";
            }
        }
    else
        divID.style.display = "none";
    }
}

rendered output

<td>Marital Status:</td>
<td>
    <table class="noPad formRadioButton">
        <tr>
            <td>
                <table id="_ctl0_ContentPlaceHolder1_wizard1_rblMarital" onClick="showHide('_ctl0:ContentPlaceHolder1:wizard1:rblMarital','_ctl0_ContentPlaceHolder1_wizard1_divMarital','M')" border="0">
                <tr>
            <td><input id="_ctl0_ContentPlaceHolder1_wizard1_rblMarital_0" type="radio" name="_ctl0:ContentPlaceHolder1:wizard1:rblMarital" value="S" checked="checked" /><label for="_ctl0_ContentPlaceHolder1_wizard1_rblMarital_0">Single</label></td>
                        <td><input id="_ctl0_ContentPlaceHolder1_wizard1_rblMarital_1" type="radio" name="_ctl0:ContentPlaceHolder1:wizard1:rblMarital" value="M" /><label for="_ctl0_ContentPlaceHolder1_wizard1_rblMarital_1">Married</label></td>
                        <td><input id="_ctl0_ContentPlaceHolder1_wizard1_rblMarital_2" type="radio" name="_ctl0:ContentPlaceHolder1:wizard1:rblMarital" value="D" /><label for="_ctl0_ContentPlaceHolder1_wizard1_rblMarital_2">Separated/Divorced</label></td>
        </tr>
        </table>
            </td>
        </tr>
    </table>
</td>
</tr>
<tr>
    <td colspan="2">
        <div id="_ctl0_ContentPlaceHolder1_wizard1_divMarital" style="display:none;">
            <table class="noPad">
                <tr>
                    <td class="back660000">If your spouse is a student</td>
                    <td align="center" style="width:250px;">School <input name="_ctl0:ContentPlaceHolder1:wizard1:txtSpouseSchool" type="text" id="_ctl0_ContentPlaceHolder1_wizard1_txtSpouseSchool" style="width:180px;" /></td>
                    <td style="width:180px">Graduation year <input name="_ctl0:ContentPlaceHolder1:wizard1:txtSpouseGrad" type="text" maxlength="4" id="_ctl0_ContentPlaceHolder1_wizard1_txtSpouseGrad" style="width:30px;" /></td>
                </tr>
                <tr>
                    <td class="back660000">Is your spouse employed</td>
                    <td colspan="2">
                        <table class="formRadioButton">
                            <tr>
                                <td>
                                    <span id="_ctl0_ContentPlaceHolder1_wizard1_rblSpouseEmployed"><input id="_ctl0_ContentPlaceHolder1_wizard1_rblSpouseEmployed_0" type="radio" name="_ctl0:ContentPlaceHolder1:wizard1:rblSpouseEmployed" value="No" /><label for="_ctl0_ContentPlaceHolder1_wizard1_rblSpouseEmployed_0">No</label><input id="_ctl0_ContentPlaceHolder1_wizard1_rblSpouseEmployed_1" type="radio" name="_ctl0:ContentPlaceHolder1:wizard1:rblSpouseEmployed" value="Yes" checked="checked" /><label for="_ctl0_ContentPlaceHolder1_wizard1_rblSpouseEmployed_1">Yes</label></span>
                                </td>
                                <td>&nbsp;&nbsp;&nbsp;&nbsp;Annual income <input name="_ctl0:ContentPlaceHolder1:wizard1:txtSpouseIncome" type="text" id="_ctl0_ContentPlaceHolder1_wizard1_txtSpouseIncome" style="width:100px;" />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </td>
</tr>

Answer 1

You have no name attribute on your rbl (or does .Net put one on there for you):

function showHide(rbl, div, str) {

    var rblID = document.getElementById(rbl);
    var divID = document.getElementById(div);

    if (rblID.value == str) {
        divID.style.display = "block";
    }
    else {
        divID.style.display = "none";
    }

}

Answer 2

Are you definitely setting the name property of radio button group? I can't see anything wrong with that straight off. Check the value of str and rblID[j] inside the first if statement

Are you getting what you expect??

Answer 3

So it looks like you want to have the div visible when the "married" option is selected and hidden when anything else is selection. The way you have it written, the "seperated" option is always the last item checked. When you pick "married" the div is immediately set display:block and then back to display:none because "seperated" is not checked.

A quick fix is to hide the div by default and then show it if "married" is the selected item.

function showHide(rbl, div, str) {

    var rblID = document.getElementsByName(rbl);
    var divID = document.getElementById(div);

    divID.style.display = "none";

    for (var j = 0; j < rblID.length; j++) {
        if (rblID[j].checked && rblID[j].value === str) {
            divID.style.display = "block";
        }
    }
} 

Answer 4

It turns out as I looked more closely at my code, the else statement was in the wrong place.

function showHide(rbl, div, str) {

        var rblID = document.getElementsByName(rbl);
        var divID = document.getElementById(div);

        for (var j = 0; j < rblID.length; j++) {
            if (rblID[j].checked) {
                if (rblID[j].value == str) {
                    divID.style.display = "block";
                }
                else
                    divID.style.display = "none";
            }
        }
    }