Interactive Forms with Javascript / HTML Tutorial

Display or hide forms based on output of a drop down box

Written by Brian Zimmer
March 15, 2004

What are forms?

One of the most important aspects of web design is getting information from the viewer to the webmaster. This is where HTML forms are used. If you have been on the internet, you have seen forms before. Google uses them for search queries, Amazon uses them for shipping and credit card information, your bank uses them for you to login. Almost every site on the web has a type of form somewhere. We can't live without forms.

Why interactive forms?

Forms are easy enough to create when they are simple, like search boxes. But what if you need them to be complex? How about changing the forms based on input by the viewer? This is where interactive forms using Javascript and HTML can help. I'll use a simple example on how interactive forms can be useful.

The problem

I am going to use a business project as an example to teach interactive forms. Imagine that we are creating a ordering system for flowers. We would like the customer to be able to order a bouquet of flowers. The customer can choose to have any number of flowers in the bouquet from 1 to 6. For each flower, the customer can choose a type of flower, and there are 3 different kinds of flowers. Now imagine all these options as a regular form. There would be 18 options to choose from, even if you only wanted one flower! This would be ugly! In this tutorial we will learn how we can show and hide form elements depending on the input by the customer. Now let's get started!

Creating the interactive form

HTML

We are going to create a page where you can enter the information for ordering flowers. We've decided on having a drop down menu to select the number of flowers, and then for the number selected, display that number of options to choose the type of flower. We'll start by creating the HTML forms. First we will write the html code for the form.

<select id='numflowers'>
        <option value='0'>Number of Flowers
        <option value='1'>1
        <option value='2'>2
        <option value='3'>3
        <option value='4'>4
        <option value='5'>5
        <option value='6'>6
</select>

This will create something looking like this:

Next we need to create the form where the customer will choose the type of flower they would like. We will let them choose between a red rose, a white rose, and a yellow rose. I am going to use radio buttons for the selection. Here is the code:

<input type="radio" name="color1" value="red">Red<br>
<input type="radio" name="color1" value="white">White<br>
<input type="radio" name="color1" value="yellow">Yellow<br>

For this tutorial, I assume you have a basic knowledge of HTML. All of these pages still need mandatory tags, but I left them out because of the size they would take up. Notice how I made all the options the same name. This is so they are grouped together, and only one option can be chosen.

This is what it will look like:
Red
White
Yellow

Duplicate this code 6 times, for each of the flower. But every time you see "color1", change that to a different name so they are all separate. I will use "color1", "color2", "color3", and so on.

Now we need to put all of this together into an ordering form. But we need to add something so that the forms can disappear. We will add <div> tags around each of the flower type selection rows. Enter the following code around each of the groups of options. Make sure that for each one, you label the id tag for the <div> differently. For example, the first group will start with <div id="divColor1", the second will start with <div id="divColor2", and so on. THIS IS IMPORTANT. When we pass variables onto the script, the only thing that should change between the name of the <div> tags should be the number. This is because we will use a loop to go through all the numbers. We will pass through the name of the <div> tags to the javascript script, and the script will add the numbers.

<div id='divColor1' style="display: none;">
                Choose type of flower 1:<br><br>
                <input type="radio" name="color1" value="red">Red<br>
                <input type="radio" name="color1" value="white">White<br>
                <input type="radio" name="color1" value="yellow">Yellow<br>
</div>

Now we have each option groups surrounded by a <div> tag. This will allow us to change their visibility with javascript. I have put <div> tags around the options, and added a submit button. Note: when adding <div> tags inside a table, make sure they are contained within a <td> cell. Something like <table><div><tr><td></td></tr></div></table> will not work for the same reason that adding text outside of <td> cells inside a table doesn't work. If the stuff inside the <div> tag is showing up, tables may be your problem. To fix this, either don't use tables, or create an entire separate table for the information inside the <div> tag. Here is the code:

<h3>Flower Order Form</h3>
<form action="processorder.php" method="post">
Select how many flowers you would like:

<select id='numflowers'>
        <option value='0'>Number of Flowers
        <option value='1'>1
        <option value='2'>2
        <option value='3'>3
        <option value='4'>4
        <option value='5'>5

</select>


<div id='divColor1' style="display: none;">
                Choose type of flower 1:<br><br>
                <input type="radio" name="color1" value="red">Red<br>
                <input type="radio" name="color1" value="white">White<br>
                <input type="radio" name="color1" value="yellow">Yellow<br>
</div>

<div id='divColor2' style="display: none;">
                Choose type of flower 2:<br><br>
                <input type="radio" name="color2" value="red">Red<br>
                <input type="radio" name="color2" value="white">White<br>
                <input type="radio" name="color2" value="yellow">Yellow<br>
</div>

<div id='divColor3' style="display: none;">
                Choose type of flower 3:<br><br>
                <input type="radio" name="color3" value="red">Red<br>
                <input type="radio" name="color3" value="white">White<br>
                <input type="radio" name="color3" value="yellow">Yellow<br>
</div>

<div id='divColor4' style="display: none;">
                Choose type of flower 4:<br><br>
                <input type="radio" name="color4" value="red">Red<br>
                <input type="radio" name="color4" value="white">White<br>
                <input type="radio" name="color4" value="yellow">Yellow<br>
</div>

<div id='divColor5' style="display: none;">
                Choose type of flower 5:<br><br>
                <input type="radio" name="color5" value="red">Red<br>
                <input type="radio" name="color5" value="white">White<br>
                <input type="radio" name="color5" value="yellow">Yellow<br>
</div>

<div id='divColor6' style="display: none;">
                Choose type of flower 6:<br><br>
                <input type="radio" name="color6" value="red">Red<br>
                <input type="radio" name="color6" value="white">White<br>
                <input type="radio" name="color6" value="yellow">Yellow<br>
</div>

<br>
<input type="submit" value="Next Step">
</form>

Here is what it looks like:

Flower Order Form

We used css to hide the <div> tags. The next step is to use javascript to show and hide each of the <div> cells depending on what is selected in the drop down menu. We will start out by making a javascript function, then I will explain the code and link it up with the drop down menu.

Javascript

We are going to create a function that will show and hide the <div> cells. There are 3 things we need to pass onto the script: the number of total options, the name prefix for the <div> tags, and the number of options(to end the loop). Here is the script that I wrote:

<script language="JavaScript">
function ShowMenu(num, menu, max)
        {
                //starting at one, loop through until the number chosen by the user
                for(i = 1; i <= num; i++){
                        //add number onto end of menu
                        var menu2 = menu + i;
                        //change visibility to block, or 'visible'
                        document.getElementById(menu2).style.display = 'block';
                }
                //make a number one more than the number inputed
                var num2 = num;
                num2++;
                //hide menus if the viewer selects a number lower
                //this will hide every number between the selected number and the maximum
                //ex.  if 3 is selected, hide the <div> cells for 4, 5, and 6
                //loop until max is reached
                while(num2 <= max){
                        var menu3 = menu + num2;
                        //hide 
                        document.getElementById(menu3).style.display = 'none';
                        //add one to loop
                        num2=num2+1;
                }
        }
</script>

Add this code inside the <head> section of your page. Now we have one less step; to call the function from the drop down box. Here is the code to do that:

<select id='numflowers' 
onChange="javascript: ShowMenu(document.getElementById('numflowers').value,'divColor', 6);">
        <option value='0'>Number of Flowers
        <option value='1'>1
        <option value='2'>2
        <option value='3'>3
        <option value='4'>4
        <option value='5'>5
	<option value='6'>6

</select>

What this does is when the value is change, it will pass on the value, the name prefix of the <div> cells, and the number of <div> cells. In the first part, make sure the getElementById('numflowers') matches the 'id' attribute in the <select> tag.

That's it! You can use this javascript function for anything, the only things you have to change are the name prefixes and number of <div> cells, and the id of the select tag. Using onChange, you can use a group of radio buttons or a checkbox instead. Here is what the finished product looks like:

Flower Order Form

And here is the final code:

<html>
<head>
<title>Flower Order Form</title>
<script>
function ShowMenu(num, menu, max)
        {
                //starting at one, loop through until the number chosen by the user
                for(i = 1; i <= num; i++){
                        //add number onto end of menu
                        var menu2 = menu + i;
                        //change visibility to block, or 'visible'
                        document.getElementById(menu2).style.display = 'block';
                }
                //make a number one more than the number inputed
                var num2 = num;
                num2++;
                //hide it if the viewer selects a number lower
                //this will hide every number between the selected number and the maximum
                //ex.  if 3 is selected, hide the <div> cells for 4, 5, and 6
                //loop until max is reached
                while(num2 <= max){
                        var menu3 = menu + num2;
                        //hide 
                        document.getElementById(menu3).style.display = 'none';
                        //add one to loop
                        num2=num2+1;
                }
        }
</script>
</head>

<body>
<h3>Flower Order Form</h3>
<form action="processorder.php" method="post">
Select how many flowers you would like:

<select id='numflowers' 
onChange="javascript: ShowMenu(document.getElementById('numflowers').value,'divColor', 6);">
        <option value='0'>Number of Flowers
        <option value='1'>1
        <option value='2'>2
        <option value='3'>3
        <option value='4'>4
        <option value='5'>5
        <option value='5'>6

</select>


<div id='divColor1' style="display: none;">
                Choose type of flower 1:<br><br>
                <input type="radio" name="color1" value="red">Red<br>
                <input type="radio" name="color1" value="white">White<br>
                <input type="radio" name="color1" value="yellow">Yellow<br>
</div>

<div id='divColor2' style="display: none;">
                Choose type of flower 2:<br><br>
                <input type="radio" name="color2" value="red">Red<br>
                <input type="radio" name="color2" value="white">White<br>
                <input type="radio" name="color2" value="yellow">Yellow<br>
</div>

<div id='divColor3' style="display: none;">
                Choose type of flower 3:<br><br>
                <input type="radio" name="color3" value="red">Red<br>
                <input type="radio" name="color3" value="white">White<br>
                <input type="radio" name="color3" value="yellow">Yellow<br>
</div>

<div id='divColor4' style="display: none;">
                Choose type of flower 4:<br><br>
                <input type="radio" name="color4" value="red">Red<br>
                <input type="radio" name="color4" value="white">White<br>
                <input type="radio" name="color4" value="yellow">Yellow<br>
</div>

<div id='divColor5' style="display: none;">
                Choose type of flower 5:<br><br>
                <input type="radio" name="color5" value="red">Red<br>
                <input type="radio" name="color5" value="white">White<br>
                <input type="radio" name="color5" value="yellow">Yellow<br>
</div>

<div id='divColor6' style="display: none;">
                Choose type of flower 6:<br><br>
                <input type="radio" name="color6" value="red">Red<br>
                <input type="radio" name="color6" value="white">White<br>
                <input type="radio" name="color6" value="yellow">Yellow<br>
</div>

<br>
<input type="submit" value="Next Step">
</form>

</body>
</html>

Another Example - Showing only the selected value

This is a simple example that only works for forms where you want all the numbers below the selected value to be displayed (if you select 4, the boxes for 3, 2, and 1 will be shown). In this next part, I am going to alter the script so that only the option you want is selected.

The Problem

Only display the number that is selected. So for example, when "2" is selected from the list, you want the div corresponding to "2" displayed, and everything else hidden.

The Solution

Replace the old javascript code between the script tags with this:

<script>
function ShowMenu(num, menu, max)
{
                //num is selected value, menu is the name of the div, max is the number of divs
                for(i = 1; i <= max; i++){
                        //add number onto end of menu
                        var menu_div = menu + i;

                        //if current show
                        if(i == num) {
                                document.getElementById(menu_div).style.display = 'block';
                        } else {
                                //if not, hide
                                document.getElementById(menu_div).style.display = 'none';
                        }
                }



        }
</script>

Thats all! If you have any questions or comments, you can contact me, or post a comment. Have a great day!

Brian Zimmer is a graphics and web designer with over 4 years of experience in Paint Shop Pro, HTML, CSS, Javascript, SEO, PHP, and MySQL. His services include professional and affordable freelance web and graphic design. He is the webmaster of www.zimmertech.com .

Rate this Tutorial

Current Rating:

3.94/ 5.00 with 544 votes.

Current Comments

93 comments so far (post your own)

Comments welcome...

Posted by Brian Zimmer (http://www.zimmertech.com)on Monday, 04.19.04 @ 04:23am | #3

Great - just what I was looking for. Thanks

Posted by Karl on Saturday, 04.24.04 @ 01:54am | #11

Hum... I did you do this form? it's awsome :) ...

(i'm talking about the 'Leave your comment:' form)

any tutorial on this?

Posted by nuno on Friday, 05.7.04 @ 02:44pm | #45

by the way, the tutorial is great

i was looking for something that would generate dinamic html code

Posted by nuno on Friday, 05.7.04 @ 02:51pm | #46

Nice tutorial... some small errors in the final code, though.

The selection list to choose the amount of flowers :
<select id='numflowers'
onChange="javscript: (...)

That needs to be 'javAscript', of course. Also, the list allows 5 to be the maximum choice, not 6.

EDIT: Thanks for the heads up! It should be correct now.. -Brian Zimmer

Posted by Ivo on Thursday, 06.17.04 @ 03:44am | #86

WOW ! very nice code

Posted by Sk (ww.sk.com)on Tuesday, 07.13.04 @ 07:08am | #104

This is awesome, it's just what I needed.

Posted by Aj on Thursday, 07.29.04 @ 04:24pm | #121

Hi..
Any tutorial about how to make this "Leave you comment:" form ..?? I need it :) :)

Posted by N. Guntur on Wednesday, 09.29.04 @ 05:13am | #181

yet another plea for a tutorial about the "leave your comment" form...

Posted by ck on Thursday, 10.14.04 @ 04:02am | #189

harlow der... i agree to most people who already commented on yur Leave Your Comment... how do yu do it...??? any tutorial on dis??

Posted by vai on Saturday, 12.4.04 @ 11:48am | #233

good enough

Posted by hackiit on Tuesday, 02.22.05 @ 02:01am | #365

Very good script - clear, good explanation, and allowed me to modify it to do what was necessary. Many Thanks!

Posted by Pran on Wednesday, 03.16.05 @ 04:20pm | #389

that is good script

Posted by nick on Wednesday, 04.6.05 @ 01:41pm | #437

This tutorial is very nice and concise and even works in both IE and Firefor. Good going. It doesn't get any better than this. Thank You

Posted by Ralph Bayer on Wednesday, 04.6.05 @ 06:43pm | #438

Excellent

Posted by Seema on Thursday, 05.26.05 @ 07:20am | #549

how do you make games with this???

Posted by ~~??~~ (http://tyu123454321.tripod.com)on Friday, 06.3.05 @ 05:36pm | #555

hey, thanks heaps! it was just what i was looking for!

Posted by scott on Thursday, 06.9.05 @ 03:21am | #561

why not the following function ?

<code>

function showMenu (selected, id_prepend, max) {
for (n = 1/; n <= max/; n++) {
id = id_prepend + n/;
if (n <= selected) {
document.getElementById (id).style.display = 'block'/;
} else {
document.getElementById (id).style.display = 'none'/;
}
}
}

</code>

no need for 2 loops, no unnessecary mess :)

Posted by Jappie on Monday, 07.25.05 @ 02:43pm | #621

or:

<code>

function showMenu (selected, id_prepend, max) {
for (n = 1/; n <= selected/; n++) {
document.getElementById (id).style.display = 'block'/;
}
for (n = selected + 1/; n <= max/; n++) {
document.getElementById (id).style.display = 'hidden'/;
}
}

</code>

PS: sorry for the missing idents and the / where they don't belong :(

Posted by Jappie on Monday, 07.25.05 @ 02:49pm | #622

haha, and put

id = id_prepend + n/;

before the 2

document.getElementById....

lines of the last example :p

Posted by Jappie on Monday, 07.25.05 @ 02:51pm | #623

Nice tut... very impressed!

just an issue i'm having is that IE blocks the JS? Is there anyway around that. eg. a user clicks a button that 'signs' the js as safe?

regards

Posted by Bubba King on Wednesday, 08.10.05 @ 02:32am | #643

fantastic tut. thanks

Posted by pp on Monday, 08.15.05 @ 04:23am | #655

Very good. Very close to what I'm looking for.
Instead of 'Radio' list, I want to have another drop-down list updated by the selection from first drop-down list.

Thanks.
Michael

Posted by Michael Hwee on Saturday, 09.3.05 @ 10:21pm | #674

Perfect, just what I'd been looking for, thanks!

Posted by Ton on Wednesday, 02.8.06 @ 06:53pm | #826

I have a problem wich I can not solve it ! It sound like: I have a drop down box connected to a table. When I select something from dropdown box (onchange) in a text box should appear the selection, wich is hapening, but also in others text boxes must apear the rest of table content. Ex: I chose a client, on onchange must apear the rest of the information about the client (address, phone, fax, etc ). Something like:
<script>
function functie(s)
{
txt.value =s/;
document.all.sel.options[0].selected=true/;
}
</script>

<?php
$conn = mysql_connect("localhost", "admin") or die(mysql_error())/;
mysql_select_db("facturi",$conn) or die(mysql_error())/;
$get_list = "select id, concat_ws(', ', dencl) as display_name from clienti order by dencl"/;
$get_list_res = mysql_query($get_list) or die(mysql_error())/;
echo "
<select name=selectie onchange=\"functie(this.options[this.options.selectedIndex].value)\" class=\"style1\">
<option value=\"\">--- Selecteaza un client ---</option>
"/;
while ($recs = mysql_fetch_array($get_list_res)) {
$id = $recs['id']/;
$display_name = stripslashes($recs['display_name'])/;
echo "
<option value=\"$display_name\">
$display_name
</option>
"/;
}

echo "
</select>
<input type =\"text\" name=\"dencl\" id=txt size =26 class=\"style1\"> <input type =\"text\" name=\"sediul\" size =26 class=\"style1\">
<input type =\"text\" name=\"judetul\" size =26 class=\"style1\">
"/;
?>
How can I do that ? Help please !

Posted by Catalin on Tuesday, 04.4.06 @ 06:02am | #958

This is pretty cool. I've been wondering how to do something like that. Thanks for the info

Posted by Chris on Thursday, 04.6.06 @ 04:09pm | #963

it's great tutorial .... thanks for the info

Posted by rudy on Thursday, 04.20.06 @ 10:45pm | #992

Thanks! This looks great.
I have been seeing a problem when I tried to use radio buttons in two fieldsets.
Buttons in a fieldset were the same name, but each fieldset had a different name.
When I was trying to send the values to a javascript function on the same page ( I prefer to try and test without using a server-side setup if at all possible ) the parseInt line would show a NaN. I had to change the name of like buttons within a fieldset before one would work.
I think the looping idea provided in your example should alleviate the miscommunication between the 'onClick="calculate(this.form)"' and the parseInt line in the called function.

Posted by Roger on Friday, 05.5.06 @ 01:54pm | #1028

Hi i have redesigned the form a little and have added drop down boxs instead of radio buttons. Although this is what i wanted i do need to change the rule so that when you select i.e the fourth option on list it only displays the fourth option in this case no bom. Instead it currently give me the other three options as well that com before it which i do not need i only need it to show one option at time. can any one help me with this please i cant do it and any help would be great. I dont want it to shhom more than one at a time.
<html>
<head>
<title>upgrade order form</title>
<script>
function ShowMenu(num, menu, max)
{
//starting at one, loop through until the number chosen by the user
for(i = 1/; i <= num/; i++){
//add number onto end of menu
var menu2 = menu + i/;
//change visibility to block, or 'visible'
document.getElementById(menu2).style.display = 'block'/;
}
//make a number one more than the number inputed
var num2 = num/;
num2++/;
//hide it if the viewer selects a number lower
//this will hide every number between the selected number and the maximum
//ex. if 3 is selected, hide the <div> cells for 1,2,4, 5, and 6
//loop until max is reached
while(num2 <= max){
var menu3 = menu + num3/;
//hide
document.getElementById(menu3).style.display = 'none'/;
//add to loop
num2=num0+0/;
}
}
</script>
</head>

<body>
<h3>Upgrade help</h3>
<form action="processorder.php" method="post">
That is you symtom:

<select id='numflowers'
onChange="javascript: ShowMenu(document.getElementById('numflowers').value,'divColor', 6)/;">
<option value='0'>The symptoms
<option value='1'>crashed handset
<option value='2'>no address
<option value='3'>no sku
<option value='4'>no bom
<option value='5'>no number
<option value='6'>other

</select>

<div id='divColor1' style="display: none/;">
You asked?:
<br>
<br>
<input type="radio" name="color1" value="red"><u><b>Crashed hand set</b></u><br>
<br>

What does this mean?
<br>
<textarea INPUT type="text" name=color1" VALUE="customer called to complain" rows="3"

cols="30">customer has problem with his account</TEXTAREA>
<br>
What do i do?
<br>
<textarea INPUT type="text" name=color1" VALUE="customer called to complain" rows="3"

cols="30">you need to raise a vantive</TEXTAREA>
<br>
</div>
<br>
<div id='divColor2' style="display: none/;">
<input type="radio" name="color1" value="red"><u><b>No addess</b></u><br>
<br>

What does this mean?
<br>
<textarea INPUT type="text" name=color2" VALUE="customer called to complain" rows="3"

cols="30">The customer may have a new address</TEXTAREA>
<br>
What do i do?
<br>
<textarea INPUT type="text" name=color2" VALUE="customer called to complain" rows="3"

cols="30">you need to raise a vantive on behalf of the customer</TEXTAREA>
<br>

</div>

<div id='divColor3' style="display: none/;">
<br>
<input type="radio" name="color1" value="red"><u><b>No sku</b></u><br>
<br>

What does this mean?
<br>
<textarea INPUT type="text" name=color3" VALUE="customer called to complain" rows="3"

cols="30">the product code is missing</TEXTAREA>
<br>
What do i do?
<br>
<textarea INPUT type="text" name=color3" VALUE="customer called to complain" rows="3"

cols="30">you need to contact crt operational surport</TEXTAREA>
<br>
</div>

<div id='divColor4' style="display: none/;">
<br>
<input type="radio" name="color4" value="red"><u><b>No bom</b></u><br>
<br>

What does this mean?
<br>
<textarea INPUT type="text" name=color4" VALUE="customer called to complain" rows="3"

cols="30">the product bom in which the product is contained is missing</TEXTAREA>
<br>
What do i do?
<br>
<textarea INPUT type="text" name=color4" VALUE="customer called to complain" rows="3"

cols="30">contact crt operational support</TEXTAREA>
<br>
</div>

<div id='divColor5' style="display: none/;">
<br>
<input type="radio" name="color5" value="red"><u><b>no number</b></u><br>
<br>

What does this mean?
<br>
<textarea INPUT type="text" name=color5" VALUE="customer called to complain" rows="3"

cols="30">customer details not in companion</TEXTAREA>
<br>
What do i do?
<br>
<textarea INPUT type="text" name=color5" VALUE="customer called to complain" rows="3"

cols="30">raise vantive to slove</TEXTAREA>
<br>
</div>

<div id='divColor6' style="display: none/;">
<br>
<input type="radio" name="color6" value="red"><u><b>other</b></u><br>
<br>

What does this mean?
<br>
<textarea INPUT type="text" name=color6" VALUE="customer called to complain" rows="3"

cols="30">please contact on line support</TEXTAREA>
<br>
What do i do?
<br>
<textarea INPUT type="text" name=color6" VALUE="customer called to complain" rows="3"

cols="30">raise vantive to slove</TEXTAREA>
</div>

<br>
</form>

</body>
</html>

Posted by steven connor on Wednesday, 05.17.06 @ 02:26pm | #1055

Posted by steven connor on Wednesday, 05.17.06 @ 02:26pm | #1056

If you have more than 9 options....watch out. You might want to rearrange how the div ids are named.

Posted by Swampthing on Saturday, 05.27.06 @ 10:06pm | #1195

i came across with your code and would like to ask how I should make use of this code. I am supposed to develop a search optimization wherein a combo box would have 2 options, either AUction or store. If Auction is chosen then the form's link (action value) has to go to website1 or if the Store is chosen the form's link (action value) has to go to website2. take note that each for has their own input values hidden from the user.

Please help me on this. thanks

Posted by polin on Thursday, 06.1.06 @ 09:27pm | #1385

cool form coding... I am wondering if you could look at the code for the form in the url i provided.

I am not the original person who made the first form and it became outdated, so I tried to create a new one, but for some reason it isn't working right and I am just not sure what I have done wrong... I even had a tutor and they must be as dumbfounded as I am, as they keep saying it "should" work, yet it isn't working at all. I have contacted the company - and they still complain that they are not getting any responses. (yes their email address is still valid)

Any help would be greatly appreciated... i am not really knew to coding for forms, but I haven't done one that is as long as this one is in a very long time!

Posted by Michèle (http://www.trustyinsuranceagency.com/tauto.html)on Friday, 06.9.06 @ 12:25am | #1583

Hi,
Is it possible to modify the script so each selection will show/hide a single particular <div>.
For instance I want to use the same principle used here but if a user selects Option 1 - show div1, if user selects Option 2 - show div2 only (dont show div1)

Can this be show or demonstrated i'm sure it would be beneficial for others too.

Thanks

Posted by Gav on Monday, 07.17.06 @ 07:39am | #2294

Thanks for the help

Posted by Jared (http://www.kiwiot.com)on Wednesday, 09.13.06 @ 04:18pm | #2591

Hello there,

Found this script and thought 'perfect!'. Then discovered that if you use the form object inside a table, it won't work properly.

I may be being a bit silly here - it's probably something quite obvious that I have missed - but is there a solution to this?

The intention of this (somewhat customised) code is to uncover more options for only one single option in the menu the 'custom' option.

I'll post the code I'm working on here:

<html>
<head>
<title>Product</title>
<script>
function SizeMenu(num, menu, max)
{
for(i = 1/; i <= max/; i++){
var menu_div = menu + i/;
if(i == num) {
document.getElementById(menu_div).style.display = 'block'/;
} else {
document.getElementById(menu_div).style.display = 'none'/;
}}}
</script>
</head>
<body>
<form action="processorder.php" method="post">
Select your size option:
<table>
<select id='size' onChange="javascript: SizeMenu(document.getElementById('size').value,'sizeOpt', 1)/;">
<option name="CD01_opt" value="" selected>Please select...</option>
<option name="CD01_opt" value="8">Size 8</option>
<option name="CD01_opt" value="10">Size 10</option>
<option name="CD01_opt" value="12">Size 12</option>
<option name="CD01_opt" value="14">Size 14</option>
<option name="CD01_opt" value="16">Size 16</option>
<option name="CD01_opt" value="18">Size 18</option>
<option name="CD01_opt" value="1">Custom</option>
</select>

<div id='sizeOpt1' style="display: none/;">
<tr><table width="200" border="0" align="left" cellpadding="3" cellspacing="0">
<tr><td width="80"><font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>Bust size:</strong></font></td>
<td width="100"><p><input name="CD01_opt2" type="text" size="6" maxlength="4">
<font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">cm</font></p></td></tr>
<tr><td><strong><font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">Waist size:</font></strong></td>
<td><p><input name="CD01_opt3" type="text" size="6" maxlength="4">
<font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">cm</font></p></td></tr>
<tr><td><strong><font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">Hips:</font></strong></td>
<td><input name="CD01_opt4" type="text" size="6" maxlength="4">
<font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">cm</font></td></tr>
<tr><td><strong><font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">Back width:</font></strong></td>
<td><input name="CD01_opt5" type="text" size="6" maxlength="4">
<font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">cm</font></td></tr>
<tr><td><strong><font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">Upper arm:</font></strong></td>
<td><input name="CD01_opt6" type="text" size="6" maxlength="4">
<font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">cm</font></td></tr>
<tr><td><strong><font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">Length from shoulder:</font></strong></td>
<td><input name="CD01_opt7" type="text" size="6" maxlength="4">
<font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">cm</font></td></tr>
<tr><td><strong><font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">Sleeve length:</font></strong></td>
<td><input name="CD01_opt8" type="text" size="6" maxlength="4">
<font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">cm</font></td>
</tr></table></tr></div></table>
<br>
<input type="submit" value="Next Step">
</form>
</body>
</html>

If you run it in a browser, it reveals the options that should be hidden - then if you take the <table> and </table> out and run it again, it works exactly as I wanted!

Posted by Fraxin on Wednesday, 10.25.06 @ 11:27am | #2638

This is great!

Is it possible to modify the script so each selection will show/hide multiple <div>'s.
For instance, if a user selects Option 1 - show div1 and div2, if user selects Option 2 - show div2 and div5.

Posted by Vicki on Tuesday, 11.7.06 @ 07:16am | #2650

Posted by Vicki on Tuesday, 11.7.06 @ 07:16am | #2651

It might be useful to use “.selectedIndex” instead of “.value” if you want to free the option values in the select box.

Posted by Brian on Tuesday, 01.2.07 @ 07:56am | #2704

how can i change the drop down menu to a static list selection menu?

Posted by alex (http://none)on Friday, 01.5.07 @ 03:44am | #2707

many thank..

Posted by icman (http://www.meelink.com)on Tuesday, 03.13.07 @ 09:43pm | #2788

KKK

Posted by GRESH KUMAR (KKK)on Thursday, 03.22.07 @ 10:45pm | #2806

If you wanted to hide all in a class, you could use:
function hideClass(theClass)
{
var allDivTags=document.getElementsByTagName("div")/;

for (i=0/; i<allDivTags.length/; i++)
if (allDivTags[i].className==theClass)
document.getElementById(allDivTags[i].id).style.display = 'none'/;
}

Posted by a name on Thursday, 05.31.07 @ 02:32pm | #2910

I'd like to use this so that regardless what option the user selects, it will always and only select the next one.

example would be if you have 7 select menus.
and you want them to be selected in succession.
so that you'd be showing 1. and hiding 2 - 7
then when select menu is is selected (regardless of option) it would show select menu 2. etc .

To control the way user is able to select in succession.

Posted by Me (n/a)on Tuesday, 06.26.07 @ 10:08am | #2930

Nice demonstration... well explained and stepped thru with examples....
but it really should include checking to make sure the client has javascript enabled, otherwise the options will be forever hidden from that person.

Posted by ChrisCrunch on Tuesday, 07.17.07 @ 06:50pm | #2943

Posted by vinnu2009 (http://www.onlinenetjob.com)on Monday, 08.27.07 @ 10:41am | #2994

dfvfdvsdv

Posted by rakes on Monday, 09.10.07 @ 01:18pm | #3014

dfvfdvsdv

Posted by rakes on Monday, 09.10.07 @ 01:18pm | #3015

This is fantastic and EXACTLY what I was looking for! There is just one thing I'd like to change if possible ... in a form that validates through our php form processor, if there are errors on the page, it has to reload. When it does, the number of items chosen to display disappear again. Is there any way to keep them displayed on page reload?

Posted by Debbie on Thursday, 09.13.07 @ 04:34pm | #3016

Thanks, but i was searching for the blogger comment form

Posted by iceburns (http://iceburns.blogspot.com)on Thursday, 09.27.07 @ 09:29am | #3029

thanxxxx

Posted by majid (pharmacy79.googlepages.com)on Wednesday, 11.7.07 @ 05:27pm | #3069

dddd

Posted by dd (dd)on Thursday, 11.22.07 @ 06:47am | #3082

bya

Posted by ammar (www.sharp.com)on Saturday, 11.24.07 @ 12:21am | #3087

bya

Posted by ammar (www.sharp.com)on Saturday, 11.24.07 @ 12:22am | #3088

bya

Posted by ammar (www.sharp.com)on Saturday, 11.24.07 @ 12:22am | #3089

bya

Posted by ammar (www.sharp.com)on Saturday, 11.24.07 @ 12:22am | #3090

please send me about leave a comment form.

Posted by airetz (www.geocities.com?airetzlastrilla/index.html)on Monday, 12.17.07 @ 06:44am | #3130

thanks a bunch for the tutorial!!!

Posted by Sumeet Wadhwa (http://www.designstage.net)on Friday, 04.18.08 @ 10:21am | #3299

cool

Posted by mi6 (www.mi63nce.hit.bg)on Saturday, 05.10.08 @ 03:46pm | #3330

If I added sub DIV to the Parent DIV using the same method, when I go back the form gets cleared but last DIV child remains. Is there a way that I can clear that?

<<select id='numflowers'
onChange="javascript: ShowMenu(document.getElementById('numflowers').value,'divColor', 3)/;">

<select id='numflowers'>
<option value='0'>Number of Flowers
<option value='1'>1
<option value='2'>2
<option value='3'>3
<option value='4'>4
<option value='5'>5
<option value='6'>6
</select>

<div id='divColor1' style="display: none/;"><br><br>

<select id='subdiv' onChange="javascript: ShowMenu(document.getElementById('subdiv').value,'divsub', 3)/;">
<option value='0' selected="selected">bla1
<option value='1'>bla2
<option value='2'>bla3
</div>



<div id='divsub1' style="display: none/;">
blabla1:<br><br>

</div>

<div id='divsub2' style="display: none/;">
blabla2:<br><br>

</div>



When I go back to

<select id='numflowers'>
<option value='0'>Number of Flowers
<option value='1'>1
<option value='2'>2
<option value='3'>3
<option value='4'>4
<option value='5'>5
<option value='6'>6
</select>

the last sub DIV/child will remain. here is Java script i am using is

<script>
function ShowMenu(num, menu, max)
{

//num is selected value, menu is the name of the div, max is the number of divs
for(i = 1/; i <= max/; i++){
//add number onto end of menu
var menu_div = menu + i/;

//if current show
if(i == num) {
document.getElementById(menu_div).style.display = 'block'/;

} else {
//if not, hide
document.getElementById(menu_div).style.display = 'none'/;

}

}

}

</script>

Posted by Moe on Wednesday, 10.29.08 @ 07:25am | #3716

http://www.online-electronic-products.blogspot.com/

Posted by jazy (http://www.online-electronic-products.blogspot.com/)on Friday, 11.14.08 @ 10:01pm | #3773

Your script sais:

"//if current show
if(i == num)"

it should be "if(i<=num)"

thanks for the tutorial though. It helped me a lot.

Posted by dgryphon on Monday, 12.1.08 @ 06:44am | #3811

I was searching for how to hide phone number from displaying to havesters

Posted by Atlant (www.glasoglas.rs)on Sunday, 01.25.09 @ 02:22pm | #3930

great script!

i noticed that the script wont work for too many options? lets say 50 options?

Instead of using values 1-9, can a div id work to show/hide the divs

Posted by Eric on Tuesday, 01.27.09 @ 11:19am | #3933

买/;<a title="不/;锈/;钢/;管/;" href="http://www.tjtgggc.com">不/;锈/;钢/;管/;</a>,要/;选/;品/;牌/;-浙/;江/;光/;大/;集/;团/;是/;华/;东/;地/;区/;最/;专/;业/;的/;<a title="不/;锈/;钢/;板/;" href="http://www.tjqdgg.cn">不/;锈/;钢/;板/;</a>,<a title="不/;锈/;钢/;无/;缝/;管/;" href="http://www.tgbxg8.com">不/;锈/;钢/;无/;缝/;管/;</a>,<a title="高/;压/;合/;金/;管/;" href="http://www.tggg8.com">高/;压/;合/;金/;管/;</a>,<a title="合/;金/;钢/;管/;" href="http://www.tggg8.com">合/;金/;钢/;管/;</a>生/;产/;商/;,拥/;有/;最/;先/;进/;的/;不/;锈/;钢/;管/;和/;不/;锈/;钢/;无/;缝/;钢/;管/;生/;产/;设/;备/;,凭/;借/;近/;20年/;的/;经/;验/;和/;强/;大/;的/;公/;司/;背/;景/;,公/;司/;已/;落/;成/;了/;多/;处/;<a title="316不/;锈/;钢/;管/;" href="http://www.tjqdgg.cn">316L不/;锈/;钢/;管/;</a>,合/;金/;钢/;管/;,<a title="不/;锈/;钢/;板/;" href="http://www.tjtgggc.com/buxiugangban/">不/;锈/;钢/;板/;</a>,<a title="无/;缝/;钢/;管/;" href="http://www.tjtgggc.com">无/;缝/;钢/;管/;</a>,不/;锈/;钢/;管/;,高/;压/;合/;金/;管/;等/;不/;锈/;钢/;材/;料/;生/;产/;基/;地/;,产/;品/;已/;经/;获/;得/;了/;iso质/;量/;管/;理/;体/;系/;认/;证/;.

Posted by 不锈钢管 (http://www.zjgdjt.com)on Monday, 02.9.09 @ 10:10pm | #3996

Posted by 不锈钢管 (http://www.zjgdjt.com)on Monday, 02.9.09 @ 10:11pm | #3997

Posted by papatekusa (http://www.sunvalleyus.com)on Wednesday, 02.11.09 @ 01:00am | #4003

best tutorial <a href="http://www.shophola.com">:)</a>

Posted by Anonymous (http://www.shophola.com)on Thursday, 02.19.09 @ 05:02pm | #4018

We provides the bestTiffany Co Jewellery.
It is a Tiffany Jewelleryonline store.
Everybody can afford discount tiffany's jewellery.
A uniqueTiffany Bracelets is the perfect gift for any occasions.
Tiffany Necklaces
Tiffany Rings
Tiffany Earrings
Tiffany Cufflinks

Posted by tuuih on Thursday, 03.19.09 @ 11:04pm | #4117

Posted by tuuih on Thursday, 03.19.09 @ 11:06pm | #4120

hi,guy this site runescape-money.eu it is about online game's web,we offer the news and important cheats,The main we sell runescape gold,if u want to buy runescape money,u need buy runescape gold from this site,it is cheapest,right,u want buy runescape gold,cheap runescape gold,plz click here:runescape gold,it is cool,isn't it?everyone who play runescape and want buy runescape gold can get some help from our.we We have mass available stock of runescape money on most of the servers, so that we can do a really instant way of runescape money delivery.We know what our buyers need so we offer an instant way of cheap cheap runescape gold, the cheapest runescape money delivery.lol…

Posted by Anonym on Wednesday, 04.8.09 @ 07:09pm | #4207

12V 5A LCD AC Adapter (60W) Dell Inspiron E1505 keyboard (Original ) [url=http://www.sunvalleyus.com/DellAdapter/3K360(PA-9).html]Dell 3K360 AC Adapter[/url] (20V 4.5A) Dell LCD 0R0423 AC Adapter (DC20V 4.5A ) HP TX1000 keyboard (Original ) Dell 0NK750 keyboard (Original ) Dell H5639 keyboard (Original ) Compaq 298239-001 AC Adapter (DC19V 4.74A ) sunvalleyus (website ) laptop batteries (laptop batteries ) Acer batteries (Acer batteries ) Apple batteries (Apple batteries) compaq batteries (batteries for compaq ) Dell batteries (batteries for dell ) HP batteries (batteries for hp ) IBM laptop batteries (laptop batteries for IBM) HP 1583 AC Adapter (19V 4.74A ) Dell 1581 Battery (11.1V) Gateway 1582 Battery (19V 3.42A) Apple A1185 Battery (10.8V ) Dell 9400 battery (11.1V ) IBM R60 9455 battery (7200mAh ) Dell D630 battery (11.1V )

Posted by rose (http://www.sunvalleyus.com)on Wednesday, 04.22.09 @ 06:55pm | #4295

http://www.t7b.com
http://www.chaat.t7b.com
http://www.voice.t7b.com
http://www.games.t7b.com
http://www.gallery.t7b.com
http://www.video.t7b.com
http://www.mob.t7b.com
http://www.topics.t7b.com
http://www.islame.t7b.com
http://www.translate.t7b.com
http://mnw3at.wordpress.com

Posted by t7b.com on Tuesday, 05.12.09 @ 07:49am | #4395

Posted by t7b.com on Tuesday, 05.12.09 @ 08:09am | #4420

Followed by dog training in secret in February 2, 2009，/; it has been repaired training your dog and was formally launched. This is the best-selling puppy training course for four years, and it was bought 64,000 dog owners worldwide. It was remarkable to recall the details of puppies training, I can fully understand why it continues to hold top spot. The revamped version promises are better! Puppy obedience training is an extremely comprehensive guide, written by world renowned coaches make, Daniel Stevens. Although the Guide to training a dog moving to 261 detailed, step-by-step format it to provide direct instructions on how to quickly training a puppy and resolve dog behavior problems. It also includes many excellent pictures! In the book, it describes how to train a puppy. All loyal and reliable methods of dog behavior training and dog training tips are tried.
Several different methods outlined in the course of dog obedience training, including the wooden box training, training, dog whispering, and so on. Secondly, teach dog tricks. More advanced behavioral problems, such as chewing, biting, aggression, digging, jumping, etc. are covered. We all love dogs training!
If you are like many new mothers, you want to lose weightas soon as possible. However, there are some fat here and there, so you actually have to learn how to lose weight after a baby.
Weight loss after the baby more easily than you imagined, but it is more difficult to see from another perspective: You have to take good care of your newborn baby, so the question of How to lose weight after the baby was your second priority.
I have been looking for solutions on how to lose weight after baby/; I got so many weight loss experiences after giving birth! Therefore, I will share some of the most important tips to answer your questions.
How to lose weight after the baby - 4 simple tips
1) Breastfeeding is the most important, not only is your baby - breastfeeding help lose weight fast! Your baby, "/;eat"/; your unnecessary heat, together with the milk from you.
2) Loss weight diet - this will make you lose weightand keep your body hydrated.
3) Walk out with your baby can now. These are good ways to lose weight, she, you will burn more calories!
4) How to lose pounds after the baby? Have enough rest! It will not directly affect your weight, but still have a great impact. When you and the rest, your body metabolism, and if the metabolism is good, you are more likely to lose pounds more easily.
Prevalence of teenage belly fat in developed countries such as the United States is appalling. 1 6-year-old in the United States to have a weight problem to some extent, with the majority of these young people's personal growth is unhealthy. The best way to get rid of belly fat can happen to them, they will be overweight and low productivity of adults and the most serious could happen is that they will lose belly fat.
This situation is quite alarming. If you are juvenile weight problems, you have to put it head-on now, because your body settles mature, more and more difficult to get rid of belly fat.
Many have written about how to lose belly fat which is unusual/; we can see that different sources give different views. But the fact of belly fat diet is that young people lose abdominal fat is not all the difficulties, because their body is still healthy and growing. Belly fat exercises and belly fat dietcan help them lose their belly fat and lead a healthy life a few decades ago.
When you find kids jobs can be a difficult task. If you are looking for jobs for kids, you can do from home then this is it. If you do not want to work at home, know that you work in other parts of the parent / parents will drive and pick you up. Who are you to deal with the boss/; I can almost guarantee jobs for 15 year olds. I am 16 years old, I have a lot of job opportunities for you to find jobs for kids and your pay check.
Some decent work is bus tables, help customers in retail stores like Circuit City or Best Buy, if you live in the park or the scope of help the horses can be too much of a decent work. The majority of jobs for 16 year oldsare helping the animals. I made a good amount of money to cut grass around, but my neighbor's lawn companies can price it is really difficult to introduce competition. If you are a good local computer repair shop computer is bound to employ the help of jobs for 15 year olds.
When running a home business to make money, there are many making money ideas you want to have to concentrate. From writing the content, in order to promote your business to deal with customers will be on your list. However, the important thing is that you are not starting your own business by ignoring the importance of design quality.
If you want to know how to make money at home web site, you must understand the design, your site can have a significant impact. First of all, make money online. Make Money on the Internet is the first thing people will see the arrival of your site. You want it to stand out so boldly Japan. Try to make money with a catchy phrase or something to attract people to read.
From there, you would like to emphasize a specific keyword or title of the site. Most people will not take the time to read all the content on your site. Highlight specific words, people will be able to quickly find information of interest to them
You must emphasize the benefits of starting a laundromat business. People are more interested in is how you will benefit from the provision of the opposition/; you can set up shop online a large number of specific details of your company. Maintain Furniture Making Business its customers.
Prompted the design of the next how to make money online is to allow all distribution. More chaotic look of your site within a short period of time, people will spend double-check everything. This is good advertising and graphics, and all attempts to spread. To too many making money ideas on the site will only turn off your visitors.
Is important that you have a good balance between the graphics and content, as well as. You do not want to start flower shop. In contrast, the exchange of the two should be uniform, so that smooth flow of your pages.
Finally, how to make money at home, start carpet cleaning business: Your web site somewhere so that people can easily find it. You want visitors to easily contact you any questions they may be. This shows that you are a professional in starting your own business.

Brining a new dog into your home is an exciting time for the whole family, not to mention the dog. The first dog training supplies you should buy, before you even bring the dog home, are a food and water bowl, collar, leash, food and a bed. If you have another dog in the home and were thinking of having them both share a bowl, think dog training products again. Sometimes a new dog can be aggressive, or be attacked when trying to feed in a joint bowl. It's best to let the dog know what is his , for food and water.

There are different types of anti bark collar. One type is remote dog collar. As the name suggests, it is used to stop a dog from constant, inappropriate barking. This collar is triggered by the dogs bark. remote bark collar works by either a vibration or a sound that is felt or heard by the dog the instant the barking starts. It can be set to different levels and responds only to your dogs bark. There are also dog bark collar that work by spraying an unpleasant spray towards the dogs face as soon as he starts barking.

Selecting a underground dog Fence or pet fence to install your self at your home can be very confusing. Most of the market is Dominated by Radio Systems Corporation. They are the makers of PetSafe, InvisibleFence, and Innotek. While these products do well at containing a dog within a in ground dog fence they do have their limitations. First the country of manufacture is China. Sometimes there is a problem with consistency of signal, the signal will expand or contract based on temperature, not all of these systems exhibit this problem, but it does exist.

Oil painting reproduction is an affordable way to display replicas of favorite works of art in the home or workplace. If you want to wholesale oil painting, A large number of companies in the US provide reproductions of almost any work of art at a surprisingly affordable price. A good reproduction can fool even the trained eye, and is far more appealing and visually satisfying than a paper reprint of any work of art.

Posted by qixinyan on Tuesday, 05.19.09 @ 07:08pm | #4497

http://www.chat.t7b.com/1.htm
http://www.chat.t7b.com/2.htm
http://www.chat.t7b.com/3.htm
http://www.chat.t7b.com/4.htm
http://www.chat.t7b.com/7.htm
http://www.chat.t7b.com/8.htm
http://www.chat.t7b.com/13.htm
http://www.chat.t7b.com/146.htm
http://www.chat.t7b.com/54.htm
http://www.chat.t7b.com/119.htm
http://www.chat.t7b.com/124.htm
http://www.chat.t7b.com/159.htm
http://www.chat.t7b.com/206.htm
http://www.chat.t7b.com/249.htm
http://www.ksall.com
http://www.ksall.com/vb

Posted by sdf on Friday, 05.22.09 @ 04:35pm | #4564

Posted by dfsd on Saturday, 05.23.09 @ 05:15am | #4585

laptop accessories wholesale (Brand New and Genuine) Acer AC Adapter wholesale ( Brand New and Genuine) Toshiba AC Adapter wholesale ( Brand New and Genuine) Dell battery wholesale (Brand New and Genuine ) LCD AC Adapter wholesale (Brand New and Genuine) Compaq AC Adapter wholesale (Brand New and Genuine) Gateway AC Adapter wholesale (Brand New and Genuine) Dell keyboard wholesale (Brand New and Genuine ) Liteon AC Adapter wholesale ( Brand New and Genuine) DELTA AC Adapter wholesale (Brand New and Genuine) LCD panel wholesale (Brand New and Genuine ) Laptop Accessories (Supply Genuine laptop Batteries) Acer AC Adapter (Supply high quality Acer laptop AC Adapters) Dell laptop battery (Supply high quality Dell laptop batteries) scooter battery charger (high quality ) Gateway keyboard (Supply high quality Gateway laptop keyboards) laptop AC Adapter (Supply high quality laptop AC Adapters ) Dell laptop keyboard (high quality Dell laptop keyboard) Gateway laptop keyboard (Supply high quality Gateway laptop keyboards ) HP laptop keyboard (Supply high quality HP laptop keyboards) Compaq laptop keyboard (Supply high quality Compaq laptop keyboards) Acer laptop battery (high quality ) IBM battery (specifically designed ) Asus AC Adapter (genuine factory direct ) Toshiba laptop battery (Supply high quality Toshiba laptop accessories ) Compaq AC Adapter (high quality ) Toshiba AC Adapter (Supply high quality Toshiba laptop AC Adapters ) Dell AC Adapter (Supply high quality Dell laptop AC Adapter ) GATEWAY AC Adapter (Supply high quality GATEWAY laptop AC Adapters ) Apple laptop battery (Supply high quality Apple laptop batteries ) laptop keyboard (Supply high quality laptop Keyboards) Toshiba laptop keyboard (Supply high quality Toshiba laptop keyboard) laptop battery (Supply high quality laptop batteries)

Posted by laptop accessories (http://www.papatek.com)on Tuesday, 06.9.09 @ 12:30am | #4731

Posted by laptop accessories (http://www.papatek.com)on Tuesday, 06.9.09 @ 12:31am | #4732

Thanks for your useful info, I think it’s a good topic. So would you like the info about the
Air jordan shoes
jordan shoes
Christian Louboutin
Bose headphones
Tiffany Jewelry
ugg Gypsy
wholesale electronics
Michael jordan shoes
Classic tall ugg boots
UGG Slippers
Classic short ugg boots
Cardy ugg boots

Posted by xinxi (http://www.airjordanmart.com)on Saturday, 06.13.09 @ 01:36am | #4805

Fujitsu Accessories

Posted by hootoo (http://www.hootoo.com)on Wednesday, 06.17.09 @ 12:43am | #4861

jobs for 14 year olds
jobs for 14 year olds
jobs for 14 year olds
jobs for 14 year olds
jobs for 14 year olds
jobs for 14 year olds
jobs for 14 year olds
jobs for 14 year olds
jobs for 14 year olds
Saraideas's Blog
Sara ideas
saraideas
saraideas
saraideas
saraideas
saraideas
saraideas
saraideas
Sara's Blog
sara's Site
Saraideas
saraideas

Posted by kids jobs on Saturday, 06.20.09 @ 01:09am | #4936

www.wikishoes.com
Jordan shoes
Air Jordan Shoes
Nike SB Dunks
Addia shoes
Handbag
Chanel Handbag
Fendi Handbag
LV shoes
Louis Vuitton sandals
ED hardy hoodies
ED hardy jeans
ED hardy belts
play boy underwear
bikini
Hoodies

Posted by wikishoes (http://www.wikishoes.com)on Sunday, 06.21.09 @ 06:15pm | #4968

Posted by wikishoes (http://www.wikishoes.com)on Sunday, 06.21.09 @ 06:16pm | #4969

Posted by wikishoes (http://www.wikishoes.com)on Sunday, 06.21.09 @ 06:16pm | #4970

www.wikishoes.com
Jordan shoes
Air Jordan Shoes
Nike SB Dunks
Addia shoes
Handbag
Chanel Handbag
Fendi Handbag
LV shoes
Louis Vuitton sandals

Posted by wikishoes (http://www.wikishoes.com)on Sunday, 06.21.09 @ 06:17pm | #4971

Posted by wikishoes (http://www.wikishoes.com)on Sunday, 06.21.09 @ 06:18pm | #4972

Posted by we (http://www.wikishoes.com)on Sunday, 06.21.09 @ 06:48pm | #5002

Posted by laptop ac adapter (http://www.usadapter.com)on Thursday, 06.25.09 @ 01:44am | #5099

<p><a title="ت/;و/;ب/;ي/;ك/;ا/;ت/; م/;ن/;و/;ع/;ه/;" href="http://topic.k1e1.com/cat1.htm">
http://topic.k1e1.com/cat1.htm</a></p>
<p><a href="http://topic.k1e1.com/cat2.htm">http://topic.k1e1.com/cat2.htm</a></p>
<p><a href="http://topic.k1e1.com/cat3.htm">http://topic.k1e1.com/cat3.htm</a></p>
<p><a href="http://topic.k1e1.com/cat4.htm">http://topic.k1e1.com/cat4.htm</a></p>
<p><a href="http://topic.k1e1.com/cat5.htm">http://topic.k1e1.com/cat5.htm</a></p>
<p><a href="http://topic.k1e1.com/cat6.htm">http://topic.k1e1.com/cat6.htm</a></p>
<p><a href="http://topic.k1e1.com/cat7.htm">http://topic.k1e1.com/cat7.htm</a></p>
<p><a href="http://topic.k1e1.com/cat8.htm">http://topic.k1e1.com/cat8.htm</a></p>
<p><a href="http://topic.k1e1.com/cat9.htm">http://topic.k1e1.com/cat9.htm</a></p>
<p><a href="http://topic.k1e1.com/cat10.htm">http://topic.k1e1.com/cat10.htm</a></p>
<p><a href="http://topic.k1e1.com/cat11.htm">http://topic.k1e1.com/cat11.htm</a></p>
<p><a href="http://topic.k1e1.com/cat12.htm">http://topic.k1e1.com/cat12.htm</a></p>
<p><a href="http://topic.k1e1.com/cat13.htm">http://topic.k1e1.com/cat13.htm</a></p>
<p><a href="http://topic.k1e1.com/cat14.htm">http://topic.k1e1.com/cat14.htm</a></p>
<p> /;</p>
<p> /;</p>
<p> /;</p>
<p> /;</p>
<p> /;</p>
<p> /;</p>
<p> /;</p>

Posted by lkj (http://vb.k1e1.com)on Saturday, 06.27.09 @ 05:07am | #5136

acer TravelMate 270 laptop batteries
[url=http://www.laptop-power-battery.com/laptop-power-supply/acer-TravelMate-250-Series-laptop-batteries.html]acer TravelMate 250 Series laptop batteries

[/url]
[url=http://www.laptop-power-battery.com/laptop-power-supply/acer-TravelMate-242FX(MS2138)-Series-laptop-batteries.html]acer TravelMate 242FX(MS2138) Series

laptop batteries[/url]
acer TravelMate 2001 laptop batteries
[url=http://www.laptop-power-battery.com/laptop-power-supply/acer-TravelMate-2500-Series-laptop-batteries.html]acer TravelMate 2500 Series laptop-batteries

[/url]
acer TravelMate 2501LC laptop batteries
acer TravelMate 242LC laptop batteries
[url=http://www.laptop-power-battery.com/laptop-power-supply/acer-TravelMate-4000-Series-laptop-batteries.html]acer TravelMate 4000 Series laptop batteries

[/url]
[url=http://www.laptop-power-battery.com/laptop-power-supply/acer-TravelMate-4400-Series-laptop-batteries.html]acer TravelMate 4400 Series laptop batteries

[/url]
[url=http://www.laptop-power-battery.com/laptop-power-supply/acer-TravelMate-280-Series-laptop-batteries.html]acer TravelMate 280 Series laptop batteries

[/url]

Posted by ADVENT Laptop Battery (http://www.laptop-power-battery.com/laptop-power-supply/advent-laptop-battery.htm)on Saturday, 06.27.09 @ 07:11am | #5177

Posted by sdfsd on Saturday, 06.27.09 @ 11:38am | #5225

When the wolf wow gold finally found the hole Buy Wow Gold in the chimney he Cheap WoW Gold crawled down and KERSPLASH right into that kettle of water cheapest wow gold and that was the end of his troubles with the big bad wolf.

game4power,buy cheap wow gold
WOW GOLD

The next day the wow gold cheap little pig invited his mother over . She said "You see it is just as buy gold wowI told you. The way to [url=http://www.
itemchannel.com]Wow Gold[/url]get along in the world is to do things as well as you can." Fortunately for that world of warcraft gold little pig, he Cheapest wow Goldlearned that lesson. And he just lived happily ever after!
aion kina.

Posted by 111 on Wednesday, 07.1.09 @ 02:38am | #5354

Leave your comment:

Learn how to add this comment form to your site with our comment form tutorial!

Name:

Email:

URL:

Comments:

	→ retype that here
Enter the correct letters and numbers from the image into the text box. This small test serves as access restriction against malicious bots. Simply reload the page if this graphic is too hard to read.

Note: Emails will not be visible or used in any way, and are not required. Please keep comments relevant. Any content deemed inappropriate or offensive may be edited and/or deleted.

No HTML code is allowed. Line breaks will be converted automatically. URLs will be auto-linked. Please use BBCode to format your text.