Login control submit button focus

I've been googling for this and I found a solution but not the one I need.

I have a login control. It has username and password fields and a submit button. I want the user to be able to hit "enter" for the submit button, instead of using the mouse..

I did "Login1.Focus()" in code behind but that puts the focus on the username field.

How can I put the focus on "submit" button?
LVL 8
CamilliaAsked:
Who is Participating?
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.

AshokCommented:
Did you try this?

<form id="form1" runat="server" defaultbutton="btn1">
where btn1 is the name of your SUBMIT button.

Ashok
0
AshokCommented:
In the designer of your Login control: "Convert To Template". Then in the Page Load set the defaultButton of your form by finding the LoginButton.

ASPX:

<form id="form1" runat="server">
    <div>
        <asp:Login ID="Login1" runat="server" OnAuthenticate="Login1_Authenticate">
            <LayoutTemplate>
                <table border="0" cellpadding="1" cellspacing="0" style="border-collapse: collapse;">
                    <tr>
                        <td>
                            <table border="0" cellpadding="0">
                                .....
                                <tr>
                                    <td align="right" colspan="2">
                                        <asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="Log In" ValidationGroup="Login1" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </LayoutTemplate>
        </asp:Login>
    </div>
    </form>

Code-Behind:

    protected void Page_Load(object sender, EventArgs e)
    {
        Button lbButton = Login1.FindControl("LoginButton") as Button;
        form1.DefaultButton = lbButton.UniqueID;
    }

HTH
Ashok
0
ddayx10Commented:
Well its far too tedious to figure out exactly which control collection index its buried in.

This will set the focus on your button if you want. You could modify it to find your control collection indexes if you want to go a more standard route. This will solve or get you started:

<see code>

There's only one button in that control so I didn't bother to check its attributes, etc.
'Send in your LoginButton
FindButton(LogIn)

'Find the button and set its focus
    Public Sub FindButton(ByVal c As Control)
        For Each b As Control In c.Controls
            If TypeOf b Is Button Then
                b.Focus()
                Exit Sub
            End If
            If b.HasControls Then
                FindButton(b)
            End If
        Next
    End Sub

Open in new window

0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

CamilliaAuthor Commented:
let me try
0
ddayx10Commented:
Sry u wanted c# huh?
FindButton(LogIn);


    public void FindButton(Control c)
    {
        foreach (Control b in c.Controls)
        {
            if (b is Button)
            {
                b.Focus();
                return;
            }
            if (b.HasControls())
            {
                FindButton(b);
            }
        }
    }

Open in new window

0
CamilliaAuthor Commented:
I don't have a "button" so ashok's solution wont work.

The other solution is in vb. I can convert to C# but would it work with a login control?

This is what I have:


<asp:Login ID="Login1" Orientation="Horizontal"   LoginButtonStyle-CssClass="submit_text_link" 
            LoginButtonText="Submit"  OnAuthenticate="OnAuthenticate"  LoginButtonType="Link" TitleText=""    DisplayRememberMe="false" 
            TextLayout="TextOnTop"   runat="server">

Open in new window

0
CamilliaAuthor Commented:
ddayx, we posted at the same time. Please my post above.
0
CamilliaAuthor Commented:
and I dont understand the FindButton. It calls itself??
0
ddayx10Commented:
Its called recursion and its awesome. Just run the code and see your button should have focus.
0
ddayx10Commented:
Here let me make it more demonstrative. Hope that helps.
<body>
    <form id="form1" runat="server">
    <div>
	<asp:Login ID="LogIn" runat="server" />
    </div>
    </form>
</body>

Open in new window

protected void Page_Load(object sender, EventArgs e)
    {
        FindButton(LogIn);
    }

    public void FindButton(Control c)
    {
        foreach (Control b in c.Controls)
        {
            if (b is Button)
            {
                b.Focus();
                return;
            }
            if (b.HasControls())
            {
                FindButton(b);
            }
        }
    }

Open in new window

0
CamilliaAuthor Commented:
Yes, i was just trying it. This is in a master page but I dont think it makes a difference. I put a debug step. I goes to that "b.HasControl())", then goes to b.Focus, page displays. I enter username and password, press enter but nothing...page just sits there. If I use the mouse and click "submit" then it works...
protected void Page_Load(object sender, EventArgs e)
    {
       // Login1.Focus();
      
        FindButton(Login1);
    }

    public void FindButton(Control c)
    {
        foreach (Control b in c.Controls)
        {
            if (b is Button)
            {
                b.Focus();
                return;
            }
            if (b.HasControls())
            {
                FindButton(b);
            }
        }
    }

Open in new window

0
ddayx10Commented:
Alright well you tricked me a little. Since you have the LoginButtonType set to Link then you'd modify the code slightly to accomodate for that.

(this is the type of information you should post right up front)
public void FindButton(Control c)
    {
        foreach (Control b in c.Controls)
        {
            if (b is LinkButton)
            {
                b.Focus();
                return;
            }
            if (b.HasControls())
            {
                FindButton(b);
            }
        }
    }

Open in new window

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
ddayx10Commented:
We got to posting at the same time and so fast I didnt see your posted <asp:login> until it was too late sorry.
0
CamilliaAuthor Commented:
Getting close. I bring up the page. I see focus is on submit. I don't enter anything in the username/password fields and press enter. Submit works because it asks to enter username/password...

Then I enter username/password and press enter again but "submit" has lost it's focus now which i think it's lost it's focus because i clicked in username/password fields, no?

So, how do I still have focus AFTER username/password are entered?
0
ddayx10Commented:
Have to fiddle around with JavaScript. When either input (textbox) loses focus reset focus to button. I'll take a look but I answered the original question so if you don't like my next solution keep that in mind :)
0
CamilliaAuthor Commented:
Thanks, i'll close this and open a related one. This thread is getting long :)
0
CamilliaAuthor Commented:
0
ddayx10Commented:
Alright. This was a fun academic exercize so in that sense it was worthwhile.

I've setup the code so that when you "blur" from either the username or password boxes it resets focus to the Submit link.

Blur means if you are selected on a textbox(input) and you click somewhere else... that is the "blur" event.

Problems:
1. If I am in username and I try to goto password it initially goes to the submit button. Vice verse for if I start in password and want to goto username.

This is annoying and unnecessary.

So what can I do instead of blur?

Click is no good the user has to type in some text after they click. I dont want to mess with them at that point.

OnMouseUp/OnMouseDown... how do I know when they've finished typing? No good.

Ok well how about if I check if the username/password have any values and if either is empty I move the focus there, otherwise I move the focus to the submit button?

change out the javascript for <snippet 3> to see this.

Ok so I find this to be "overcoding" and bad to boot.

1. The user has to finish typing in both fields then still must click somewhere to have focus go to the submit button. That's fine, its not ideal but it seems a waste. If I'm the user I'm going to click on the submit button when I'm done typing my password.

Well that's not the point. You want them to be able to press "Enter". How is the code supposed to know when they've finished typing the last letter of their password to set focus on the button? Its not practical.

2. When I start messing with "forcing" the focus beyond the initial page focus its a mess. I can't click anywhere else on the form unless Ive filled in both my username and my password. Very annoying.

So in short I don't like these solutions.

I think they are interresting for you to see some stuff about controls and javascript events and etc so play with them if you've got time, but don't use them.

The best solution was suggested earlier by ashok111, but it wouldn't have worked because you were using an <asp:login> control and it still wont work without using a little trick... the .UniqueID property of your linkbutton.

So forget the JavaScript, just modify the code I originally gave you to be something like this:

<see snippet 4>

Hope the academics weren't too annoying, should work out for you fine.
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
		function focusLogin()
		{
			var Login1 = document.getElementById('<%=Login1.ClientID %>');
			var LoginBtn = Login1.getElementsByTagName('a')[0];
			LoginBtn.focus();
		}
    </script>
</head>
<body>
    <form id="form1" runat="server">
	<asp:Login ID="Login1" runat="server" Orientation="Horizontal" LoginButtonStyle-CssClass="submit_text_link"
		LoginButtonText="Submit" LoginButtonType="Link" TitleText="" DisplayRememberMe="false"
		TextLayout="TextOnTop" />
    </form>
</body>

Open in new window

protected void Page_Load(object sender, EventArgs e)
    {
        FindButton(Login1);
    }

    public void FindButton(Control c)
    {
        foreach (Control b in c.Controls)
        {
            if (b is LinkButton)
            {
                b.Focus();
                return;
            }
            if (b is TextBox)
            {
                if (b.ID.ToLower() == "username" || b.ID.ToLower() == "password")
                {
                    TextBox txtBox = (TextBox)b;
                    txtBox.Attributes.Add("onblur", "focusLogin();");
                }
            }
            if (b.HasControls())
            {
                FindButton(b);
            }
        }
    }

Open in new window

<snippet 3>


    <script type="text/javascript">
		function focusLogin()
		{
			var Login1 = document.getElementById('<%=Login1.ClientID %>');
			var inputs = document.getElementsByTagName('input');
			var LoginBtn = Login1.getElementsByTagName('a')[0];
			
			switch(true)
			{
				case inputs[5].value.length == 0:
					inputs[5].focus();
					break;
				case inputs[6].value.length == 0:
					inputs[6].focus();
					break;
				default:
					LoginBtn.focus();
			}
		}
    </script>

Open in new window

<snippet 4>

    protected void Page_Load(object sender, EventArgs e)
    {
        FindButton(Login1);
    }

    public void FindButton(Control c)
    {
        foreach (Control b in c.Controls)
        {
            if (b is LinkButton)
            {
                //you don't even really need this b.Focus() anymore
                //but its not hurting anything
                b.Focus();

                //substitute form1 for the id of your form
                form1.DefaultButton = b.UniqueID;
                return;
            }
            if (b.HasControls())
            {
                FindButton(b);
            }
        }
    }

Open in new window

0
ddayx10Commented:
Let me just point out one thing in case you notice it and aren't happy.

If the user fills out the username/password then clicks on a "non-form" portion of the page it will break the "focus" behavior.

Same if they come to page and click someplace it will break the focus/enter behavior.

This may be imperfect but there's nothing you can do about it that will not cause a whole lot of annoyance. Once they click back into the login process the focus/enter effect will kick back in.

You don't want to try to take over the enter button all the time it creates problems and so the behavior as it stands may not be exactly what you want it is by design and correct. We simply haven't evolved to the point of being able to read user's minds with code yet.

0
ddayx10Commented:
...you can say it if you want.

"dday you are crazy!"

When I'm bored I go a little nuts.
0
CamilliaAuthor Commented:
Thanks :), let me see.
0
CamilliaAuthor Commented:
Thanks so much. Snippet 4 works great. and thanks for the explanation.
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
ASP.NET

From novice to tech pro — start learning today.

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.