[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Dropdown list javascript focus issue

Posted on 2007-10-01
5
Medium Priority
?
6,980 Views
Last Modified: 2008-01-09
I have a dropdown list and a text box in a form in that order.  On the blur of the dropdown, I evaluate the contents (in javascript) and in a certian case pop up a message box and set the focus back to the dropdown to force the user to change the value.

My problem is, when there is text in the textbox the text gets highlighted when the blur of the dropdown occurs.  When I set the focus back to the dropdown (in script) the text in the textbox stays highlighted.  

I realize if the dropdown list was a textbox then I could use the textbox.select().  However, since it is a dropdown this function is not available.  I've tried everything I can think of with no avail... Any help would be MUCH appriciated!!!

Here is some sample code - this is not the actual code but you'll get the gist:

<script language="javascript">
   function EvaluateMe()
   {
    if (document.getElementById("dropdown1").value == "A")
    {
        window.alert("Invalid entry.");
        document.getElementById("dropdown1").focus();
     }
   }
</script>

<asp:dropdownlist id="dropdown1" runat=server onBlur="EvaluateMe()">
 <asp:ListItem text="A" value="A"></asp:ListItem>
 <asp:ListItem text="B" value="B"></asp:ListItem>
</asp:dropdownlist>

<asp:textbox id="textbox1" runat=server text="textbox text"></asp:textbox>
0
Comment
Question by:lokiette
  • 2
4 Comments
 
LVL 4

Accepted Solution

by:
Russell2566 earned 1000 total points
ID: 19994665
The only solution I can seem to make work is the following:

On the blur of the text field next in line that can get focus by hitting tab.... I do an on blur and reset it's value effectivly canceling the highlight...

<script language="javascript">
   function EvaluateMe(sel) { if (sel.selectedIndex == 1) {
        alert("Invalid entry.");
        sel.focus();
     }
   }
</script>
<form name="a">
      <select name="dropdown1" onBlur="EvaluateMe(this);">
            <option>G</option>
            <option>A</option>
            <option>B</option>
      </select>
      <input type="text" name="d" value="asdadadsladnsadasd" onBlur="this.value = this.value;">
</form>
0
 

Author Comment

by:lokiette
ID: 19994897
Wow, I never thought about that!  It definately works for a short term solution but I really need something not so hackish.  The fields on the form tend to change so I would have to add that onBlur to multiple fields, which seems a little crazy.  

One solution I am considering is using the onChange vs. onBlur but I'm not sure this is the best solution for my application since then the script will only be called when the value changes vs every time the field loses focus.  I'm still looking for alternatives and would like to keep it confined to the one function.
0
 
LVL 4

Expert Comment

by:Russell2566
ID: 19995781
There really isn't another way that I can come up with. There is no built in way to find out which element is currently selected. so another option would be to simply have an onFocus="currentObj=this;" in all your fields; which again is yes cheeky...

I would recomend bagging the onBlur and either do it onChange or off of the submit/next button.
0
 
LVL 1

Expert Comment

by:Computer101
ID: 20432407
Forced accept.

Computer101
EE Admin
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question