Drop Down Info Box

JavaScriptSource Staff May 21, 2007

General

This script reveals information, based on the user's selection in a drop down box. Can be used for a FAQ, contact info, and more. Short and sweet, with comments.

Notes

Created by: Ricom Productions
Web Site: http://ricom.co.uk
Posted: May 21, 2007

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: dropDownInfoBox.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Ricom Productions | http://ricom.co.uk */
function selectForm(frm){
  // Select the div containing all the hidden forms
  var hiddenForms = document.getElementById("allForms");

  // Select every form within the above div and assign it to an array
  theForm = hiddenForms.getElementsByTagName("form");

  // Set the display for each of the above forms to NONE
  for(x=0; x<theForm.length; x++){
    theForm[x].style.display = "none";
  }

  // If the form selected from the list exists, set it's display to BLOCK
  if (theForm[frm-1]){
    theForm[frm-1].style.display = "block";
  }
}

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

#form1 {
  color: #000;
  background:#EFE3C2;
  width:200px;
  padding: 10px;
  display:none;
}

#form2 {
  color: #000;
  background:#D9EFC2;
  width:200px;
  padding: 10px;
  display:none;
}

#form3 {
  color: #000;
  background:#C2E7EF;
  width:200px;
  padding: 10px;
  display:none;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="dropDownInfoBox.js"></script>

Body

Paste this code into the BODY section of your HTML document


<form name="selector">
  <select id="someID" name="someID" onChange="selectForm(this.options[this.selectedIndex].value)">
    <option> Select a Question </option>
    <option value="1"> Question 1</option>
    <option value="2"> Question 2</option>
    <option value="3"> Question 3</option>
  </select>
</form>

<div id="allForms">
  <form id="form1">
    This is Question 1. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.
  </form>
  <form id="form2">
    This is Question 2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
  </form>
  <form id="form3">
    This is Question 3. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum.
  </form>
</div>

Leave a Response

(2 comments)

You need to submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]JavaScript Forum[/a].

Lee Jun 12, 2007

Hello, I like this script very much and I would like to use it for images. However I need to be able to have several of the drop-downs to function independently on one page. Here is what I have so far, but obviously it's not working correctly. Any ideas?[br /][br /]http://www.ownergrown.com/design-form/form2.html

Kelly Howard Jun 8, 2007

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details