Set TabIndex to Next Control in ASP.Net

Question

I have an ASP.Net 4.5.1 page written in C# that has a number of TextBoxes on it. When the text in any of the TextBoxes changes, I want to call a method that 1) enables the Save button and b) moves the focus to the TextBox with the next TabIndex after the TextBox that triggered the PostBack. Here's my code so far:

protected void EnableSaveButton(object sender, EventArgs e)
    {
        if ((REQUEST_PHASE)this.CurrentPhaseID == REQUEST_PHASE.RECORDS)
        {
            btnSaveACProperty.Disabled = false;
            Control control = (Control)sender;
            int tabindex = 0;
            if (control != null) 
            { 

            }
        }
    }

What I want to do is get the TabIndex of control and then find the control with TabIndex + 1 and do a SetFocus() on it. My problem is that the control variable in my code doesn't have a property of TabIndex. How do I do this?

Causing the page to post back to the server every time a textbox changes seems like a bad idea. You should be doing this in javascript instead. — Richard Deeming, Apr 13 '16 at 17:29
Unfortunately, I need to check for this.CurrentPhaseID in my code and only do this when it's set to a certain value. Otherwise, I'd consider javascript. But I may decide to ignore CurrentPhaseID if doing this on the back end becomes a nightmare. So thanks for the suggestion. — Melanie, Apr 13 '16 at 17:37
Yes: https://stackoverflow.com/questions/7208161/focus-next-element-in-tab-index — Richard Deeming, Apr 13 '16 at 17:39
Richard Deeming - if you post your suggestions as an answer, I'll mark it as the answer and upvote it. Thanks again for your help. — Melanie, Apr 18 '16 at 21:19

score 0 · Answer 1 · answered Apr 19 '16 at 11:32

0

Causing the page to post back to the server every time a textbox is changed seems like a bad idea. It's much better to do this sort of thing in Javascript instead.

The answers to this question have various suggestions for setting focus to the next control, including a jQuery plugin, firing a keyboard event, and navigating the DOM to find the next control.

$(function(){
    $("form").on("change", ":input", function(){
        $(":submit[name$=btnSaveACProperty]").prop("disabled", false);
        $.tabNext();
    });
});

It should be fairly simple to enable or disable this functionality based on a condition on the server. For example, if you put the Javascript in an external file, you can then conditionally include it:

protected void Page_PreRender(object sender, EventArgs e)
{
    switch ((REQUEST_PHASE)this.CurrentPhaseID)
    {
        case REQUEST_PHASE.RECORDS:
        {
            Page.ClientScript.RegisterClientScriptInclude(
                typeof(REQUEST_PHASE), "MoveFocusOnChange", 
                "~/scripts/moveFocusOnChange.js");
            break;
        }
    }
}

answered Apr 19 '16 at 11:32

Richard Deeming

29,830
10
79
151

Unfortunately, the jquery doesn't work. It neither enables the button nor tabs to the next control. Investigating the DOM shows me a form control within which all my other tables and controls are located, so I'm not sure why. If you can suggest something simple that I'm missing, great. Otherwise, let's let it go; I've solved the problem with some rather clunky javascript. PS - the src I'm pointing to for jquery is the jquery-1.4.1.js that was included in the project way back when it was created in .Net 2.0. – Melanie Apr 20 '16 at 14:58
@Melanie: That's a really old version of jQuery! The `on` method was added in 1.7; the `delegate` method was in 1.4.3; so it looks like you'll have to use either [the `live` method](https://api.jquery.com/live/) or [the `change` method](https://api.jquery.com/change/) to attach the event handler. – Richard Deeming Apr 21 '16 at 10:57
So first line becomes $("panel").live(function () { right? – Melanie Apr 22 '16 at 18:56
@Melanie: No, unfortunately the `live` method pre-dates the delegated events. It would need to be `$(":input").live("change", function(){ ... });`, or `$(":input").change(function(){ ... });` if all the inputs already exist. – Richard Deeming Apr 22 '16 at 19:16
Hmmm, it's not having any effect. I've got Is that right? – Melanie Apr 25 '16 at 14:48
@Melanie: Assuming the jQuery path is correct, that looks right. Any errors in the browser console? What if you try `on` instead of `live`? – Richard Deeming Apr 25 '16 at 16:52
@Melanie: Also, you might need to use `attr` instead of `prop`. I don't think `prop` was available before 1.6. – Richard Deeming Apr 25 '16 at 16:53
I've tried both suggestions, but it seems it's not running. At least the button never becomes enabled. No errors bubble up. This isn't really a big deal, since I've got it working another way. If something occurs to you, let me know, but otherwise, don't worry about it. And thanks for all your help! – Melanie Apr 25 '16 at 18:33

Set TabIndex to Next Control in ASP.Net

1 Answers1