Help - Search - Members - Calendar
Full Version: Making Text Boxes Appear On Request From Dropdown Box - Need Help BAD!
HTMLHelp Forums > Programming > Client-side Scripting
miz
Hello there. We are right at the finish line of being done with our site. We are one of the biggest Youtube Optimizers on the net. We are the ones that get your videos to the top We have just been building a whole new site.

Ok Basically it is set up to where there are multiple packages for the user to order. Each package they can pick how many videos they would like to have optimized. I have started with this script but i'm lost. I'm a software developer not real deep in html.

All I am needing it to do is if you pick 1 for 1 video only 1 text box appears. If you pick 4 for 4 videos only 4 text boxes appears.(The text boxes are for the user to enter in there Youtube Video url) And of course if they enter in 9 text boxes 9 will appear.

The problem right now is it doesn't matter which number you press all 9 text boxes appear.

I'm sure this is something very simple I am just not experienced in javascript if statements. If you can help it will be so much of a blessing!

Here is what I have:

CODE


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>


<form action="">
<select onchange="if (this.selectedIndex==1){this.form['box'].style.visibility='visible'}
{this.form['box2'].style.visibility='hidden'} {this.form['box3'].style.visibility='hidden'}
{this.form['box4'].style.visibility='hidden'} {this.form['box6'].style.visibility='hidden'}
{this.form['box7'].style.visibility='hidden'} {this.form['box8'].style.visibility='hidden'} {this.form['box9'].style.visibility='hidden'}
if (this.selectedIndex==2){this.form['box2'].style.visibility='visible'} {this.form['box'].style.visibility='visible'}
if (this.selectedIndex==3){this.form['box3'].style.visibility='visible'} {this.form['box'].style.visibility='visible'} {this.form['box2'].style.visibility='visible'} {this.form['box4'].style.visibility='hidden'}
{this.form['box5'].style.visibility='hidden'} {this.form['box6'].style.visibility='hidden'}
{this.form['box7'].style.visibility='hidden'} {this.form['box8'].style.visibility='hidden'} {this.form['box9'].style.visibility='hidden'}
if (this.selectedIndex==4){this.form['box4'].style.visibility='visible'} {this.form['box'].style.visibility='visible'} {this.form['box2'].style.visibility='visible'} {this.form['box3'].style.visibility='visible'}
{this.form['box5'].style.visibility='hidden'} {this.form['box6'].style.visibility='hidden'}
{this.form['box7'].style.visibility='hidden'} {this.form['box8'].style.visibility='hidden'} {this.form['box9'].style.visibility='hidden'}
if (this.selectedIndex==5){this.form['box5'].style.visibility='visible'} {this.form['box'].style.visibility='visible'} {this.form['box2'].style.visibility='visible'} {this.form['box3'].style.visibility='visible'}
{this.form['box4'].style.visibility='visible'} {this.form['box6'].style.visibility='hidden'}
{this.form['box7'].style.visibility='hidden'} {this.form['box8'].style.visibility='hidden'} {this.form['box9'].style.visibility='hidden'}
if (this.selectedIndex==6){this.form['box6'].style.visibility='visible'} {this.form['box'].style.visibility='visible'} {this.form['box2'].style.visibility='visible'} {this.form['box3'].style.visibility='visible'}
{this.form['box4'].style.visibility='visible'} {this.form['box5'].style.visibility='visible'}
{this.form['box7'].style.visibility='hidden'} {this.form['box8'].style.visibility='hidden'} {this.form['box9'].style.visibility='hidden'}
if (this.selectedIndex==7){this.form['box7'].style.visibility='visible'} {this.form['box'].style.visibility='visible'} {this.form['box2'].style.visibility='visible'} {this.form['box3'].style.visibility='visible'} {this.form['box4'].style.visibility='visible'} {this.form['box5'].style.visibility='visible'} {this.form['box6'].style.visibility='visible'} {this.form['box8'].style.visibility='hidden'}
if (this.selectedIndex==8){this.form['box8'].style.visibility='visible'} {this.form['box'].style.visibility='visible'} {this.form['box2'].style.visibility='visible'} {this.form['box3'].style.visibility='visible'} {this.form['box4'].style.visibility='visible'} {this.form['box5'].style.visibility='visible'} {this.form['box6'].style.visibility='visible'} {this.form['box7'].style.visibility='visible'}
{this.form['box9'].style.visibility='hidden'}
if (this.selectedIndex==9){this.form['box9'].style.visibility='visible'} {this.form['box'].style.visibility='visible'} {this.form['box2'].style.visibility='visible'} {this.form['box3'].style.visibility='visible'} {this.form['box4'].style.visibility='visible'} {this.form['box5'].style.visibility='visible'} {this.form['box6'].style.visibility='visible'} {this.form['box7'].style.visibility='visible'} {this.form['box8'].style.visibility='visible'};">

<option value="">0</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>

</select>
<br />
<input style="visibility:hidden;" type="text" name="box"><br />
<input style="visibility:hidden;" type="text" name="box2"><br />
<input style="visibility:hidden;" type="text" name="box3"><br />
<input style="visibility:hidden;" type="text" name="box4"><br />
<input style="visibility:hidden;" type="text" name="box5"><br />
<input style="visibility:hidden;" type="text" name="box6"><br />
<input style="visibility:hidden;" type="text" name="box7"><br />
<input style="visibility:hidden;" type="text" name="box8"><br />
<input style="visibility:hidden;" type="text" name="box9"><br />
</form>


<body>
</body>
</html>


pandy
Try searching for "dynamic forms".
http://www.google.com/search?q=JavaScript+dynamic+forms
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.