根据表单设置文本 <select>值

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="jose.gonzalez@hotmail.com">

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/

Answer 2

If you're using HTML5 anyway, why not just use the placeholder attribute for input elements instead of the input onfocus stuff? You could then use a JavaScript fallback to make it work in browsers that don't support this yet, like this one :

/** 
 * Add this script to the end of your document that use <input autofocus type="text" /> 
 * or <input type="text" placeholder="username" /> and it'll plug support for browser
 * without these attributes
 */
(function() {

function each(list, fn) {
 var l = list.length;
 for (var i = 0; i < l; i++) {
  if (fn.call(list[i], list[i], i, list) === false) {
   break;
  }
 }
}

var addEvent = (function () {
 if (document.addEventListener) {
  return function (el, type, fn) {
   if (el && el.nodeName || el === window) {
    el.addEventListener(type, fn, false);
   } else if (el && el.length) {
    for (var i = 0; i < el.length; i++) {
     addEvent(el[i], type, fn);
    }
   }
  };
 } else {
  return function (el, type, fn) {
   if (el && el.nodeName || el === window) {
    el.attachEvent('on' + type, function() {
     return fn.call(el, window.event);
    });
   } else if (el && el.length) {
    for (var i = 0; i < el.length; i++) {
     addEvent(el[i], type, fn);
    }
   }
  };
 }
})();

var i = document.createElement('input'), 
    inputs = [].slice.call(document.getElementsByTagName('input'), 0);

inputs = inputs.concat([].slice.call(document.getElementsByTagName('textarea'), 0));

if (!('placeholder' in i)) {
 // placeholder fix
 each(inputs, function (el) {
  // note - we're using el instead of this across the board because it compresses better
  var lastValue = el.value, placeholder = el.getAttribute('placeholder');

  var focus = function () {
   if (el.value == placeholder) {
    el.value = '';
    el.style.color = '';
   }
  };

  var blur = function () {
   if (el.value == '') {
    el.value = placeholder;
    el.style.color = '#A29797';
   };
  };

  addEvent(el, 'focus', focus);
  addEvent(el, 'blur', blur);

  // remove the placeholder if the page is reload or the form is submitted
  addEvent(el.form, 'submit', function () { focus.call(el); });
  addEvent(window, 'unload', function () { focus.call(el); });

  // set the default state
  if (el.value == '') {
   blur.call(el);
  }
 });
}

if (!('autofocus' in i)) {
 // auto focus
 each(inputs, function (el) {
  if (el.getAttribute('autofocus') != null) {
   el.focus();
   return false; // "there can only be one"
  }
 });
}

})();

If you're using jQuery, you could use my HTML5 placeholder jQuery plugin .