Text Output from a Dropdown Select

JavaScript
1

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.

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

Hi,

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

Something like this:

<!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

Thanks very much for your help, greatly appreciated :slight_smile: