SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member DaveC's Avatar
    Join Date
    Apr 2003
    Location
    UK
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Text Output from a Dropdown Select

    Hi

    I need a little help!!

    I have a site where I have a dropdown with 4 values relating to various stores. What I need to do is after a store is selected a telephone number is displayed as a standard text field. I have added an attachment so that you can see what I am trying to achieve.

    Website-Assessment-Page.jpg

    The form code is as follows

    <div class="ccms_form_element cfdiv_select" id="phonenearest1_container_div" style=""><label>Nearest Store/label><select size="1" class="" title="" name="phonenearest">
    <option value="">Please Select</option>
    <option value="Lowestoft">Lowestoft</option>
    <option value="Gt Yarmouth">Gt Yarmouth</option>
    <option value="Norwich">Norwich</option>
    <option value="Diss">Diss</option>
    </select>
    <div class="clear"></div><div id="error-message-phonenearest"></div></div><div class="ccms_form_element cfdiv_custom" id="input_id_2_container_div" style=""><label for="input_id_2">Telephone: </label><div class="clear"></div><div id="error-message-input_custom_2"></div></div><div class="ccms_form_element cfdiv_empty" id="empty_container_div" style=""><div class="clear"></div><div id="error-message-empty"></div></div>

    Thanks

    Dave

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Store the phone stores and related phone numbers in an object literal, then just reference it when the select changes.

    Something like this:

    Code:
    <!DOCTYPE HTML>
      <html>
        <head>
        <meta charset="utf-8">
        <title>Display phone number on select</title>
      </head>
    
      <body>
        <label for="storeSelect">Nearest Store</label>
        <select id="nearestStore">
          <option value="noSelection">Please Select</option>
          <option value="Lowestoft">Lowestoft</option>
          <option value="GtYarmouth">Gt Yarmouth</option>
          <option value="Norwich">Norwich</option>
          <option value="Diss">Diss</option>
        </select>
        
        <div id="phoneNumber"></div>
        
        <script>
          var nearestStore = document.getElementById("nearestStore"),
              phoneNumber = document.getElementById("phoneNumber"),
              stores = {
                noSelection: "",
                Lowestoft: "12345678",
                GtYarmouth: "222 444 666",
                Norwich: "999 999 999",
                Diss: "0000000000000"
              }
              
          nearestStore.onchange = function(){
            phoneNumber.innerHTML = stores[this.value];
          }
        </script>
      </body>
    </html>

  3. #3
    SitePoint Member DaveC's Avatar
    Join Date
    Apr 2003
    Location
    UK
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much for your help, greatly appreciated


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •