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,347
    Mentioned
    179 Post(s)
    Tagged
    9 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
  •