• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 360
  • Last Modified:

How to set focus on submit button of a login help web page?

hi all,
i have a login help web page, it has a master page.
and in the content holder:
1.  there are two tables,
2. one table tblPwd is for "forgot your password",
3. and table tblLoginID is for "forgot your login id"
4. each table contains two text boxes: Login ID and Password
5. so there are two buttons, buttonPwd is for submitting "forgot your password", buttonLoginID is for submitting "forgot your login id"
6. when i click the txtPwd in tblLoginID, the buttonPwd in tblPwd is highlighted automatically. i think it means buttonPwd in tblPwd is set to default submit button by Asp.net.
7. Question is: how to make buttonLoginID in tblLoginID highlighted when i go to(eg. focus on, enter/type words) the textboxes in tblLoginID? and make buttonPwd in tblPwd highlighted when i go to(eg. focus on, enter/type words) the textboxes in tblPwd?

thanks a lot
1 Solution
Anurag AgarwalPython DeveloperCommented:
Through Javascript you can do this. Add a javascript function on the click or getfocus event of textbox. That javascript function will set the foucs on the required button.

viola123Author Commented:
i am not a javascript expert, could you pls give me a sample code?

   <script language="javascript">
        function SetFocus()

Call this method where ever you want to set the focus after the event.
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

viola123Author Commented:
it does not work for this case.
You can't use ".focus()" because when you click on any textboxes, the focus changes and you can't enter any text.
You can use one of the functions (I mean "WebForm_FireDefaultButton") in "WebForms.js" which is an embedded resource inside System.Web.dll.
So add the following codes to Page_Load.
Change the following names and correct them:  "TextBox1InTable1", "TextBox2InTable1", "TextBox1InTable2", "TextBox2InTable2", "ButtonNameInTable1" and "ButtonNameInTable2".

Now enjoy it... ;)
        ClientScript.RegisterClientScriptResource(typeof(Page), "WebForms.js");
        TextBox1InTable1.Attributes.Add("onkeypress", "javascript:return WebForm_FireDefaultButton(event, 'ButtonNameInTable1')");
        TextBox2InTable1.Attributes.Add("onkeypress", "javascript:return WebForm_FireDefaultButton(event, 'ButtonNameInTable1')");
        TextBox1InTable2.Attributes.Add("onkeypress", "javascript:return WebForm_FireDefaultButton(event, 'ButtonNameInTable2')");
        TextBox2InTable2.Attributes.Add("onkeypress", "javascript:return WebForm_FireDefaultButton(event, 'ButtonNameInTable2')");

Open in new window

I mentioned if you want to highlight the new button (change focus) you will not able to type immediately, so if it is important for you to change the face of active submit button, then change style and work on it.
viola123Author Commented:
it is not working properly.  when i click txtbox in table2, the button1 is still be highlighted.

viola123Author Commented:
i used the following code to do the processing. but button1 is still be highlighted when i click textboxes in table 2.

txtBox_Pwd1.Attributes.Add("onkeydown", "if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('" + BUTTON1.UniqueID + "').click();return false;}} else {return true}; ");
            txtBox_Email1.Attributes.Add("onkeydown", "if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('" + BUTTON1.UniqueID + "').click();return false;}} else {return true}; ");
            txtBox_Email2.Attributes.Add("onkeydown", "if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('" + BUTTON2.UniqueID + "').click();return false;}} else {return true}; ");
            txtBox_Pwd2.Attributes.Add("onkeydown", "if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('" + BUTTON2.UniqueID + "').click();return false;}} else {return true}; ");

Open in new window

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.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now