Why does my tab index order (rule) change if my checkbox is checked vs. unchecked?

I'm using a wizard control (not sure if that makes any difference or not as it pertains to my question but...), and on one of the many pages (steps) on the control there are a few check boxes. The tab index for all of the controls on the page have been set and if you tab to and through the set of checkboxes WITHOUT (un)/checking any of them, when you tab away from the last check box, the order of tabbing is preserved. However, if you do check or uncheck one of the boxes, and then attempt to tab, through, it completely ignores the sequence of the tab indexes and goes to a control who's tab index is out of order. Any reason for this? Any way to stop this madness?!
LVL 1
Michael SterlingWeb Applications DeveloperAsked:
Who is Participating?
 
Chris Raisin(Retired Analyst/Programmer)Commented:
can you submit your form with its included code?

Cheers
 Chris (Australia)
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
There is a ton of code, and code behind, so I'll start with the effective (effected) and any C# / javascript tied to them.

HTML
	<ajaxToolkit:ToolkitScriptManager id="ScriptManager1" runat="server" CombineScripts="false">
    </ajaxToolkit:ToolkitScriptManager>
	    <asp:UpdatePanel id="UpdatePanel1" runat="server">
            <ContentTemplate>
.
.
.
                                    <asp:Wizard ID="wzInspection" runat="server" BackColor="#EFF3FB" 
	                                    bordercolor="#B5C7DE" BorderWidth="1px" DisplaySideBar="false" 
	                                    Font-Names="Verdana" Font-Size="0.8em" Headertext="" 
	                                    Height="638px" Width="865px" onactivestepchanged="wzInspection_ActiveStepChanged" 
	                                    onfinishbuttonclick="wzInspection_FinishButtonClick" 
                                        FinishCompleteButtontext="Complete" FinishCompleteButtonStyle-ForeColor="Blue"
	                                    onnextbuttonclick="wzInspection_NextButtonClick" 
	                                    onpreviousbuttonclick="wzInspection_PreviousButtonClick"
                                        OnCancelButtonClick="wzInspection_OnCancelButtonClick"
                                        displaycancelbutton="true" 
                                        ActiveStepIndex="0" >
                                        <CancelButtonStyle ForeColor="Red" Width="75px" />
                                        <StepNextButtonStyle ForeColor="blue" Width="75px" />
                                        <StepPreviousButtonStyle ForeColor="blue" Width="75px"/>
                                        <FinishCompleteButtonStyle ForeColor="Maroon" Font-Bold="True" Width="75px" />
                                        <FinishPreviousButtonStyle ForeColor="Blue" Width="75px" />
                                        <StartNextButtonStyle ForeColor="blue" Width="75px" />
	                                    <StepStyle Font-Size="0.8em" ForeColor="#333333" />
                                        <WizardSteps>
.
.
.                                            
					<asp:WizardStep id="wzSpec1" runat="server" title="Spec 1">
                                                <table style="width: 100%; vertical-align: top;" border="0">

                                                       <td rowspan="2" colspan="2" class="WizardLBL">
                                                            <table style="background-color: Silver;">
                                                                <tr>
                                                                    <td>
                                                                        <asp:CheckBox id="chkbxNone" runat="server" text="None" cssclass="WizardLBL"
                                                                            AutoPostBack="true" OnCheckedChanged="chkbxNone_OnCheckedChanged" TabIndex="40"/>
                                                                    </td>
                                                                    <td>
                                                                        <asp:CheckBox id="chkbxAMFM" runat="server" text="AM/FM" cssclass="WizardLBL"
                                                                            AutoPostBack="true" OnCheckedChanged="chkbxAMFM_OnCheckedChanged" TabIndex="41"/>
                                                                    </td>
                                                                    <td>
                                                                        <asp:CheckBox id="chkbxCassette" runat="server" text="Cassette" cssclass="WizardLBL" TabIndex="42"/>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <asp:CheckBox id="chkbxCD" runat="server" text="CD" cssclass="WizardLBL" TabIndex="43"/> 
                                                                    </td>
                                                                    <td>
                                                                        <asp:CheckBox id="chkbxSatelite" runat="server" text="Satelite" cssclass="WizardLBL"
                                                                            AutoPostBack="true" OnCheckedChanged="chkbxSatelite_OnCheckedChanged" TabIndex="44"/>
                                                                    </td>
                                                                    <td>
                                                                        <asp:CheckBox id="chkbxWB" runat="server" text="Weather Band" cssclass="WizardLBL"
                                                                            AutoPostBack="true" OnCheckedChanged="chkbxWB_OnCheckedChanged" TabIndex="45"/>
                                                                    </td>
                                                                </tr>
                                                            </table>                        
					                                    </td>

Open in new window


C#
            chkbxNone.Attributes.Add("onclick", "setDirtyFlag();");
            chkbxAMFM.Attributes.Add("onclick", "setDirtyFlag();");
            chkbxCassette.Attributes.Add("onclick", "setDirtyFlag();");
            chkbxCD.Attributes.Add("onclick", "setDirtyFlag();");
            chkbxSatelite.Attributes.Add("onclick", "setDirtyFlag();");
            chkbxWB.Attributes.Add("onclick", "setDirtyFlag();");

Open in new window


Javascript
function setDirtyFlag() {   // a radio button was clicked
    document.forms[0].ctl00_aspxFile_DataStatus.value = "DIRTY";
    return;
}

Open in new window


Hopefully this is a good start. I am happy to add more code as is asked for / needed:

ADDITIONAL NOTICED BEHAVIOR: The only other noticible behavior is that of the 6 checkboxes in the lower right corner (see included image) the strange behavior of the tab index being ignored, only happens for the first two check boxes. the other check boxes behave just fine when you tab to / through them and use the space bar to check or uncheck them. after you check or uncheck them, the tab order remains in tact. with the first two, if you check or uncheck them, then tab out, the focus goes to the first text box in the upper left corner for some reason.

tab index image for EE
Any leads on what I should investigate or try would be greatly appreciated.
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
One last thing, I forgot to include the C# code for the checkboxes. All of them have codebehind except for chkbxCassette & chkbxCD:

        protected void chkbxNone_OnCheckedChanged(object sender, EventArgs e)
        {
            if (btnClick != null)
            {
                btnClick(this, e);
            }

            if (chkbxNone.Checked)
            {
                chkbxAMFM.Checked = false;
                chkbxWB.Checked = false;
                chkbxSatelite.Checked = false;
            }
        }

        protected void chkbxAMFM_OnCheckedChanged(object sender, EventArgs e)
        {
            if (btnClick != null)
            {
                btnClick(this, e);
            }

            if (chkbxAMFM.Checked)
            {
                chkbxNone.Checked = false;
            }
        }

        protected void chkbxSatelite_OnCheckedChanged(object sender, EventArgs e)
        {
            if (btnClick != null)
            {
                btnClick(this, e);
            }

            if (chkbxSatelite.Checked)
            {
                chkbxNone.Checked = false;
            }
        }

        protected void chkbxWB_OnCheckedChanged(object sender, EventArgs e)
        {
            if (btnClick != null)
            {
                btnClick(this, e);
            }

            if (chkbxWB.Checked)
            {
                chkbxNone.Checked = false;
            }
        }

Open in new window

	<ajaxToolkit:ToolkitScriptManager id="ScriptManager1" runat="server" CombineScripts="false">
    </ajaxToolkit:ToolkitScriptManager>
	    <asp:UpdatePanel id="UpdatePanel1" runat="server">
            <ContentTemplate>
.
.
.
                                    <asp:Wizard ID="wzInspection" runat="server" BackColor="#EFF3FB" 
	                                    bordercolor="#B5C7DE" BorderWidth="1px" DisplaySideBar="false" 
	                                    Font-Names="Verdana" Font-Size="0.8em" Headertext="" 
	                                    Height="638px" Width="865px" onactivestepchanged="wzInspection_ActiveStepChanged" 
	                                    onfinishbuttonclick="wzInspection_FinishButtonClick" 
                                        FinishCompleteButtontext="Complete" FinishCompleteButtonStyle-ForeColor="Blue"
	                                    onnextbuttonclick="wzInspection_NextButtonClick" 
	                                    onpreviousbuttonclick="wzInspection_PreviousButtonClick"
                                        OnCancelButtonClick="wzInspection_OnCancelButtonClick"
                                        displaycancelbutton="true" 
                                        ActiveStepIndex="0" >
                                        <CancelButtonStyle ForeColor="Red" Width="75px" />
                                        <StepNextButtonStyle ForeColor="blue" Width="75px" />
                                        <StepPreviousButtonStyle ForeColor="blue" Width="75px"/>
                                        <FinishCompleteButtonStyle ForeColor="Maroon" Font-Bold="True" Width="75px" />
                                        <FinishPreviousButtonStyle ForeColor="Blue" Width="75px" />
                                        <StartNextButtonStyle ForeColor="blue" Width="75px" />
	                                    <StepStyle Font-Size="0.8em" ForeColor="#333333" />
                                        <WizardSteps>
.
.
.                                            
					<asp:WizardStep id="wzSpec1" runat="server" title="Spec 1">
                                                <table style="width: 100%; vertical-align: top;" border="0">

                                                       <td rowspan="2" colspan="2" class="WizardLBL">
                                                            <table style="background-color: Silver;">
                                                                <tr>
                                                                    <td>
                                                                        <asp:CheckBox id="chkbxNone" runat="server" text="None" cssclass="WizardLBL"
                                                                            AutoPostBack="true" OnCheckedChanged="chkbxNone_OnCheckedChanged" TabIndex="40"/>
                                                                    </td>
                                                                    <td>
                                                                        <asp:CheckBox id="chkbxAMFM" runat="server" text="AM/FM" cssclass="WizardLBL"
                                                                            AutoPostBack="true" OnCheckedChanged="chkbxAMFM_OnCheckedChanged" TabIndex="41"/>
                                                                    </td>
                                                                    <td>
                                                                        <asp:CheckBox id="chkbxCassette" runat="server" text="Cassette" cssclass="WizardLBL" TabIndex="42"/>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <asp:CheckBox id="chkbxCD" runat="server" text="CD" cssclass="WizardLBL" TabIndex="43"/> 
                                                                    </td>
                                                                    <td>
                                                                        <asp:CheckBox id="chkbxSatelite" runat="server" text="Satelite" cssclass="WizardLBL"
                                                                            AutoPostBack="true" OnCheckedChanged="chkbxSatelite_OnCheckedChanged" TabIndex="44"/>
                                                                    </td>
                                                                    <td>
                                                                        <asp:CheckBox id="chkbxWB" runat="server" text="Weather Band" cssclass="WizardLBL"
                                                                            AutoPostBack="true" OnCheckedChanged="chkbxWB_OnCheckedChanged" TabIndex="45"/>
                                                                    </td>
                                                                </tr>
                                                            </table>                        
					                                    </td>

Open in new window

            chkbxNone.Attributes.Add("onclick", "setDirtyFlag();");
            chkbxAMFM.Attributes.Add("onclick", "setDirtyFlag();");
            chkbxCassette.Attributes.Add("onclick", "setDirtyFlag();");
            chkbxCD.Attributes.Add("onclick", "setDirtyFlag();");
            chkbxSatelite.Attributes.Add("onclick", "setDirtyFlag();");
            chkbxWB.Attributes.Add("onclick", "setDirtyFlag();");

Open in new window

function setDirtyFlag() {   // a radio button was clicked
    document.forms[0].ctl00_aspxFile_DataStatus.value = "DIRTY";
    return;
}

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Michael SterlingWeb Applications DeveloperAuthor Commented:
After looking at the code, I realized why this was / is happening. The checkboxes are losing focus because of what what's happening in the OnCheckedChanged events. Should've checked there first! Thanks for inspiring me to look in all the places that I should've looked anyway!
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
Thank you.
0
 
Chris Raisin(Retired Analyst/Programmer)Commented:
My pleasure! (It is always greaat when you discover the mystery yourself (great learning tool). Nice looking code by the way! :-)

Cheers
Chris (Asutralia)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.