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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris Raisin(Retired Analyst/Programmer)Commented:
can you submit your form with its included code?

Cheers
 Chris (Australia)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
C#

From novice to tech pro — start learning today.