Solved

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

Posted on 2004-09-29
9
236 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

752 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