Changing Input Fields Html / JavaScript ?

Question

Hey,

I have these input fields, well 1 input text box, and then i have a drop down. Now what I want is when a user selects an option from the dropdown (this is the dropdown)

    <select name="searchType">
  <option value="all">All</option>
  <option value="music">Music</option>
  <option value="movie">Movies</option>
  <option value="tvShow">Tv Shows</option>
  <option value="musicVideo">Music Videos</option>
  <option value="audiobook">Audio Books</option>
  <option value="shortFilm">Short Films</option>
  <option value="podcast">Podcasts</option>
</select>

I want another drop down to display with fields dependant on what the user has chosen. Could anyone point me in the right direction for this?

Thanks

Answer 1

You want to look into manipulating the HTML DOM with JavaScript. To get you started, here is a sample library that makes it easy to do what you want. Just include the script and follow an example.

Eventually, you may want to look into jquery and it's awesomeness. One such example is here that uses PHP. You could also look into this jquery plugin

Answer 2

the onChange() function might be what you are looking for. This guy had a question on it: http://stackoverflow.com/questions/647282/is-there-an-onselect-event-or-equivalent-for-html-select

Answer 3

This is called cascading or dependent dropdowns. There are many examples of how to complete this on your own or using a javascript library like jQuery.

Answer 4

It mostly depends on how do you want to fetch the data for the second dropdown.

First, you have to create a javascript function to handle the onchange event:

<script>
function change(theList)
{
    /* this is where the magic happens:
       1. get the selected option value
       2. load and display the child
     */
}
</script>

select name="searchType" onchange="change(this);">

The 'magic' depends on how you're going to fetch and display the child dropdown:

1. Have all ten possible "child" dropdowns hidden, and reveal the one you want?
2. Reload the page, with the selection as a parameter?
3. Do an Ajax call, and only load the child?

Sometimes these are called "cascading" dropdowns. Links to some samples have been posted in other answers here.

Answer 5

Add onchange listener to your markup:

<select name="searchType" onchange="showFields(this)">
  <option value="all">All</option>
  <option value="music">Music</option>
  <option value="movie">Movies</option>
  <option value="tvShow">Tv Shows</option>
  <option value="musicVideo">Music Videos</option>
  <option value="audiobook">Audio Books</option>
  <option value="shortFilm">Short Films</option>
  <option value="podcast">Podcasts</option>
</select>

try

function showFields(select) {
  var field = select.options[select.selectedIndex].value;
  switch (field) {
    case "all":
      // show all fields
      break;
    case "music":
      // show music field
      break;
    // ... more cases
    default:
       // default handler
  }
}

What you really want to do in this switch statement is call another function that shows or hides the options in another dropdown. You know how to set the options of a select element and/or show/hide page elements, right?

EDIT TO SHOW SETTING OPTIONS:

OK, say you have data in this form:

var data = [
    {type:"music",link:"http://www.domain.com/music/",file:"music1.mp3"}
  , {type:"music",link:"http://www.domain.com/music/",file:"music2.mp3"}
  , {type:"music",link:"http://www.domain.com/music/",file:"music3.mp3"}
  , {type:"music",link:"http://www.domain.com/music/",file:"music4.mp3"}
  , {type:"music",link:"http://www.domain.com/music/",file:"music5.mp3"}
  , {type:"music",link:"http://www.domain.com/music/",file:"music6.mp3"}
  , {type:"movie",link:"http://www.domain.com/movie/",file:"movie1.mp3"}
  , {type:"movie",link:"http://www.domain.com/movie/",file:"movie2.mp3"}
  , {type:"movie",link:"http://www.domain.com/movie/",file:"movie3.mp3"}
  , {type:"movie",link:"http://www.domain.com/movie/",file:"movie4.mp3"}
  , {type:"movie",link:"http://www.domain.com/movie/",file:"movie5.mp3"}
  , {type:"tv",link:"http://www.domain.com/tv/",file:"tv1.mp3"}
  , {type:"tv",link:"http://www.domain.com/tv/",file:"tv2.mp3"}
  , {type:"tv",link:"http://www.domain.com/tv/",file:"tv3.mp3"}
  , {type:"tv",link:"http://www.domain.com/tv/",file:"tv4.mp3"}
  , {type:"tv",link:"http://www.domain.com/tv/",file:"tv5.mp3"}
  , {type:"tv",link:"http://www.domain.com/tv/",file:"tv1.mp3"}
  , {type:"tv",link:"http://www.domain.com/tv/",file:"tv2.mp3"}
  , {type:"tv",link:"http://www.domain.com/tv/",file:"tv3.mp3"}
  , {type:"tv",link:"http://www.domain.com/tv/",file:"tv4.mp3"}
  , {type:"tv",link:"http://www.domain.com/tv/",file:"tv5.mp3"}
  ];

There'll likely be much more than this, but this is enough of a sample for our purposes. Now, when your onchange handler showFields() runs, and the field variable evaluates to, say, "music", the code that goes in there might be something like:

  // ...
  case "music":
    var targetSelect = document.getElementById('otherSelect');
    targetSelect.options.length = 0; // clear it if it already has values
    for (var i=0,imax=data.length; i<imax; i++) {
      if (data[i].type == "music") {
        var opt = document.createElement('option');
        // construct link to run when this option is selected
        opt.value = data[i].link + data[i].file;
        // using the file name w/o extension for simplicity
        opt.label = data[i].file.split('.')[0];

        // bad line of code! not enough coffee!
        // targetSelect.options[i] = opt;

        // Ahh, that's better.
        targetSelect.options.push(opt);
      }
    }
    break;
    // ...

This is simplified, and of course not all the files would be mp3, etc., but it should be enough to get you started.

FURTHER EDIT:

Actually, there is a mistake in the above. You should not use the value of i in the last line. If you do it like that, it will create a sparse array of the same length as the data array, only most of the values will be empty. You can either use targetSelect.options.push(opt) or else create a separate counter and increment it independent of i. Sorry, was rushing to do this and had a brain cramp.

Answer 6

try something like this

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
</head>
<body>
<input id="foo" value="hiya"/>
   <select name="searchType" onChange="fillInput(this)">
  <option value="all">All</option>
  <option value="music">Music</option>
  <option value="movie">Movies</option>
  <option value="tvShow">Tv Shows</option>
  <option value="musicVideo">Music Videos</option>
  <option value="audiobook">Audio Books</option>
  <option value="shortFilm">Short Films</option>
  <option value="podcast">Podcasts</option>
</select>


<script>
function fillInput(sender) {
  var foo = document.getElementById('foo');
  foo.value = sender.options[sender.options.selectedIndex].value; 

}
</script>
</body>
</html>