Posts Tagged ‘javascript’

Neater “other” field

// August 1st, 2008 // No Comments » // Blog

Do you think drop down select lists that have “Other” are made ugly with the necessary test field to capture the “Other” forced to sit right next to lit like this:

Well here is a slick alternative that makes use of Script.aculo.us:
Demo

Here’s the Javascript:


   function swapthem() {
	Effect.toggle('test1','blind')
   	Effect.toggle('test2','blind')
   }

   function pop() {

     len = document.f1.s1.length
     i = 0
     chosen = "none"

     for (i = 0; i < len; i++) {
       if (document.f1.s1[i].selected) {
         chosen = document.f1.s1[i].value
       }
     }
     if (chosen == "other") {
	  swapthem()
	 }
   }

And the HTML:


	<form name="f1"action="">
	  <div id="test1">
		<select name="s1" onChange = pop()>
		<option value="home" selected="selected">
                  Home
                </option>
		<option value="work">Work</option>
		<option value="mobile">Mobile</option>
		<option value="other">Other</option>
		</select>
	  </div>
	  <div id="test2" style='display:none;'>
		<input type="text" name="t1">
                <a href="javascript:swapthem()">
                   list
                </a>
   	  </div>
	</form>