Set text based on Form <select> value

Question

I have the following <select> in a form:

<select style="width: 100px; text-align: center;">
  <option value="email">Email</option>
  <option value="telephone">Phone</option>
</select>

The default option is Email so the following <input> is show:

<p class="email_form">Please supply your Email Address</p>
<input onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;" style="width: 270px" type="email" name="email" id="email" value="[email protected]">

However if they choose telephone I want to change the above to ask for a telephone number?

Answer 1

Fastest way would be to give the 'label' paragraph a (more generic) ID, and:

<p id="contact_method">Please supply your Email Address</p>

document.getElementById("selectId").onchange = function() {
    var value = this.options[this.selectedIndex].value;
    var p = document.getElementById("contact_method");
    if(value == 'telephone') {
        p.innerHTML = 'Please supply your phone number';
    } else {
        p.innerHTML = 'Please supply your email address';
    }
}

Try it out here: http://jsfiddle.net/29w2G/