Solved

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

Posted on 2004-09-29
9
234 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
  • 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
ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 

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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
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…

773 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