Solved

Set the focus on a user selected item of a dynamic drop down list/combo box

Posted on 2004-09-29
9
237 Views
Last Modified: 2010-05-19
Hi,

I was wondering if there was a way to set the focus on an item selected by the user on dynamic drop down list or combo box? The <option> tag is dynamically picking up the value and text/label from an access database.

I have tried to write a javascript function to try to set the focus, once the user has selected an item (onchange), but it doesn’t work. There might be something wrong with my javascript.  Any help would be much appreciated.

Thanks, ggd.

==================================================================================
Here is my code:
<script language="javascript" type="text/javascript">
function selecteditem()
{
var selectbox=document.faq.chooser.selectedIndex;
}
</script>

<form method="POST" action="faq.asp" name="faq">
              <p>
                 <select name="chooser" id="chooser" onChange="selecteditem()">
                  <%
                        'assumption 2
                        SQL = "Select Chooser FROM faq ORDER BY ID ASC"
                        'assumption 3
                        SET RS = Conn.Execute(SQL)
                        While NOT RS.EOF
                        %>
                  <option selected value="<%=RS("Chooser")%>"><%=RS("Chooser")%></option>
                  <%
                        RS.MoveNext
                        WEND
                        Set RS = NOTHING
                        Conn.Close
                        %>
                </select>
                &nbsp;
                <input type="submit" value="Submit" name="Submit">
              </p>
            </form>


0
Comment
Question by:ggd
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
9 Comments
 
LVL 1

Expert Comment

by:mwquek
ID: 12177949
Hi,

   onchange event only fired when the selected item from the drop down list is changed. It will not fired during the time you build the listing.

   You need to have a function called at body onload. You need to remember the Chooser ID in a variable. Then loop through the drop down list to find and match the value. If found update the selected Index as the index you found.

Quek
0
 

Author Comment

by:ggd
ID: 12178080
hi quek,
Thanks for your response. I am not very good at this ... so I was wondering you could give me the code how to do it... and what I have to edit in my existing code?
thanks, ggd
0
 
LVL 1

Accepted Solution

by:
mwquek earned 125 total points
ID: 12178167
You have two options:

1. select the item while building the drop down list:

      <select name="chooser" id="chooser" onChange="selecteditem()">
         <% 'assumption 2
               SQL = "Select Chooser FROM faq ORDER BY ID ASC"
               'assumption 3
               SET RS = Conn.Execute(SQL)
               While NOT RS.EOF
         %>

         <% if rs("chooser") = [your_value] %>
               <option selected="true" value="<%=RS("Chooser")%>"><%=RS("Chooser")%></option>
         <% else %>
               <option value="<%=RS("Chooser")%>"><%=RS("Chooser")%></option>  
         <% end else%>
 
         <%  RS.MoveNext
                WEND
                Set RS = NOTHING
                Conn.Close
          %>
      </select>

2. select the item on body onload method
    function doOnLoad() {
       var f = document.forms[0];
       for (var i=0; i < f.chooser.length; i++) {
          if (f.chooser[i].value == [your_value]) {
             f.chooser.selectedIndex = i; //select the selected item from the drop down list.
             break; //quit the loop when find the selected item.
          } //end if  
       } //end for
    } //end function

    add the following method into your HTML body tag.
    <body onload="doOnLoad()">

   Hope this will help.

/Quek
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

Author Comment

by:ggd
ID: 12178480
Hi Quek,

I have a question. Does the destination page have to be different from the initial (FAQ) page with the drop down list? Cause the way i have it currently is the drop down list and the results page are the same.

I tried both options.

In the first option for some reason it gives me an error that says "expected then" after the line "While NOT RS.EOF"

In the second option, nothing happens. Is this because like I was asking both the drop down list and the results are in the same page ? or do I have to edit any part of the code you have sent to me?

Thanks in advance for you help. ggd


0
 
LVL 1

Expert Comment

by:mwquek
ID: 12186176
Yes, you need to replace [Your_value] to the actual chooser value you get in option 1 and option 2. The Options 1 syntax may be incorrect.

If not mistaken, please change the if condition to <% if ..... then %>.

/Quek.
0
 

Author Comment

by:ggd
ID: 12214743
Hi Quek,

I dont know why but neither option works... I edited the code as you said :

option 1:
<select name="chooser" id="chooser">
               <% 'assumption 2
               SQL = "Select Chooser FROM wtvfaq ORDER BY ID ASC"
               'assumption 3
               SET RS = Conn.Execute(SQL)
               While NOT RS.EOF %>    

                     <% if rs("chooser") = What is WTV? then %>

               <option value="<%=RS("Chooser")%>"><%=RS("Chooser")%></option>
                      <%else%>
                     <option value="<%=RS("Chooser")%>"><%=RS("Chooser")%></option>  
                        <% End If%>

         <%  RS.MoveNext
                WEND
                Set RS = NOTHING
                Conn.Close
          %>
      </select>

-------------------
OPTION 2:

function doOnLoad() {
       var f = document.forms[0];
       for (var i=0; i < f.chooser.length; i++) {
          if (f.chooser[i].value == What is WTV?) {
             f.chooser.selectedIndex = i; //select the selected item from the drop down list.
             break; //quit the loop when find the selected item.
          } //end if  
       } //end for
    } //end function

</script>

<body bgcolor="#CCCCCC" onload="doOnLoad()">

Any ideas? Thanks, gdd
0
 
LVL 1

Expert Comment

by:mwquek
ID: 12215978
make sure you are compare the choose value with the id, not the text. If the "what is WTV?" is the value please quote it.
0

Featured Post

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

623 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