PDA

Click to See Complete Forum and Search --> : Can someone help me with this script?

Tasmanian Devil
08-29-2003, 12:51 PM
Can someone help me add a third pull-down menu for this script?
<head>

<SCRIPT LANGUAGE="JavaScript">
var supported = (window.Option) ? 1 : 0;
if (supported) {
var active;
var ar = new Array();

ar[0] = new Array();
ar[0][0] = new makeOption(" ", "");

ar[1] = new Array();
ar[1][0] = new makeOption("Pick A Number:", "");
ar[1][1] = new makeOption("1", "http://www.w3.org/");
}
function makeOption(text, url) {
this.text = text;
this.url = url;
}

function relate(form) {
if (!supported) {
load(form, "topics");
return;
}
var options = form.list.options;
for (var i = options.length - 1; i > 0; i--) {
options[i] = null;
}
var curAr = ar[form.topics.selectedIndex];
for (var j = 0; j < curAr.length; j++) {
options[j] = new Option(curAr[j].text, curAr[j].url);
}
options[0].selected = true;
}

function load(form, name) {
var url = form[name].options[form[name].selectedIndex].value;
if (url != "") location.href = url;
return false;
}
</SCRIPT>
</head>

<body>
<FORM NAME="menu" METHOD="POST" onSubmit="return load(this, active)"
ACTION="http://www.mydomain.com/cgi-bin/js/load.pl">

<SELECT NAME="topics" onChange="relate(this.form)">
<OPTION VALUE="" SELECTED>Pick A Day:
<OPTION VALUE="">Sunday
</SELECT>

<SELECT NAME="list">
<OPTION VALUE="" SELECTED>
</SELECT>
<INPUT TYPE="submit" NAME="child" VALUE="Load" onClick="active='list'">
</FORM>

Thanks

Attached is the load.pl - although beleive it will not be a factor
gcrowan
08-29-2003, 09:35 PM
Here is one I wrote to do the same thing. It was originally creating the arrays from a database. You may want to write them differently.

<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">

Sunday=new Array();
Sunday[0]="1";

Sunday1=new Array();
Sunday1[0]="Black";
Sunday1[1]="Charcoal Grey";
Sunday1[2]="Steele";
Sunday1[3]="Granite";
Sunday1[4]="Bone";
Sunday1[5]="Silver Belly";
Sunday1[6]="Saddle";
Sunday1[7]="Whiskey";
Sunday1[8]="Brown";
Sunday1[9]="Rust";
Sunday1[10]="Dark Moss";
Sunday1[11]="Navy";
Sunday1[12]="Silver Mist";
Sunday1[13]="Burgandy";
Sunday1[14]="Forest Green";
Sunday1[15]="Willow";
Sunday[1]="2";

Sunday2=new Array();
Sunday2[0]="Black";
Sunday2[1]="Charcoal Grey";
Sunday2[2]="Steele";
Sunday2[3]="Granite";
Sunday2[4]="Bone";
Sunday2[5]="Silver Belly";
Sunday2[6]="Saddle";
Sunday2[7]="Whiskey";
Sunday2[8]="Brown";
Sunday2[9]="Rust";
Sunday2[10]="Dark Moss";
Sunday2[11]="Navy";

Monday=new Array();
Monday[0]="1";

Monday1=new Array();
Monday1[0]="Black";
Monday1[1]="Natural";
Monday1[2]="Dark Grey";
Monday1[3]="Bone";
Monday1[4]="Sand";
Monday1[5]="Silver Belly";
Monday1[6]="Silver Mist";
Monday1[7]="Sahara";
Monday1[8]="Saddle";
Monday[1]="2";

Monday2=new Array();
Monday2[0]="Black";
Monday2[1]="Natural";

PickADay=new Array();

PickANumber=new Array();

function setList(f) {
var str = f.btid.options[f.btid.selectedIndex].text;
var parstext = str.replace(/ /gi,"");
var secondlist=eval(parstext);
f.bsize.options.length=1;
for(i=0;i<secondlist.length;i++) {
var j = i+1;
f.bsize.options[j]=new Option(secondlist[i]);
if(f.btid.selectedIndex!=0){
f.bsize.options[j].value = f.bsize.options[j].text;
}
}
f.bsize.selectedIndex=0;
f.cname.options.length=1;
}
function setList2(f) {
var str = f.btid.options[f.btid.selectedIndex].text;
var parstext = str.replace(/ /gi,"");
var secondlist=eval(parstext);
var strb = f.bsize.options[f.bsize.selectedIndex].text;
var parstextb = strb.replace(/ /gi,"");
var thirdlist=parstextb;
if(f.bsize.selectedIndex!=0){
thirdlist=parstext + parstextb;
}else{ thirdlist.length = 0; }
thirdlist=eval(thirdlist);
f.cname.options.length=1;
for(i=0;i<thirdlist.length;i++) {
var k = i+1;
f.cname.options[k]=new Option(thirdlist[i]);
if(f.bsize.selectedIndex!=0){
f.cname.options[k].value = f.cname.options[k].text;
}
}
f.cname.selectedIndex=0;
}
</script>
</head>
<body onLoad="setList(document.product)">
<form action="some.url" method="post" name="product">
<table border="0" cellspacing="0" cellpadding="10" align="center">
<tr valign="top">
<td>Step 1.<br>
<select name="btid" onChange="setList(this.form)" style="width:140px">
<option value="">Pick A Day</option>
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
</select></td>
<td>Step 2.<br>
<select name="bsize" onChange="setList2(this.form)" style="width:140px">
<option value="">Pick A Number</option>
</select></td>
<td>Step 3.<br>
<select name="cname" style="width:140px">
<option value="">Pick A Color</option>
</select></td>
<td valign="bottom">
<input type="submit" name="sub" value="Load" style="font:10pt MS Serif;font-weight:bold;" onclick="if(product.cname.value.length==0||product.bsize.value.length==0||product.btid.value.length==0){ alert('Please complete all selections'); return false; }else{ if(this.value=='Load'){ this.value='Loading...'; }else{ return false; } }"></td>
</tr>
</table>
</form>
</body>
</html>
Tasmanian Devil
08-30-2003, 02:58 PM
gcrowan~

When everything is picked, and load is pressed, what and where do I put the pages that I want the user to go to?

Thanks
gcrowan
08-30-2003, 09:11 PM
<form action="some.url" method="post" name="product">

Replace "some.url" with the name of the page to which you will submit.
Ex.<form action="page1.html" method="post" name="product">


One caution - array names cannot have spaces, quotes, periods or any kind of punctuation. The value of the first array becomes part of the name of the second array. I have eliminated the spaces by using;

var parstext = str.replace(/ /gi,"");

If your first or second drop downs had any selections with punctuation marks, then you might want to use additional statements such as;

var parstext = parstext.replace(/./gi,"");
var parstext = parstext.replace(/,/gi,"");
and
var parstextb = parstextb.replace(/./gi,"");
var parstextb = parstextb.replace(/,/gi,"");

This would eliminate all periods and commas.
Tasmanian Devil
08-30-2003, 09:18 PM
I am a little confused, I am looking for which ever the last choice is picked, it will take the user to a different page based on the third choice.

Thanks
gcrowan
08-30-2003, 09:23 PM
give me just a minute...
gcrowan
08-30-2003, 09:53 PM
Add this script in the head of the document;

function sendit(){
var loc = document.product.cname.value;
switch (loc) {
case "Black": loc = "some1.html"; break;
case "Natural": loc = "some2.html"; break;
case "Charcoal Grey": loc = "some3.html"; break;
case "Steele": loc = "some4.html"; break;
case "Granite": loc = "some5.html"; break;
case "Bone": loc = "some6.html"; break;
case "Silver Belly": loc = "some7.html"; break;
case "Saddle": loc = "some8.html"; break;
case "Whiskey": loc = "some9.html"; break;
case "Brown": loc = "some10.html"; break;
case "Rust": loc = "some11.html"; break;
case "Dark Moss": loc = "some12.html"; break;
case "Navy": loc = "some13.html"; break;
case "Silver Mist": loc = "some14.html"; break;
case "Burgandy": loc = "some15.html"; break;
case "Forest Green": loc = "some16.html"; break;
case "Willow": loc = "some17.html"; break;
}
document.location.href=loc;
}


In this script each color is given a url. You will need to replace the form tag with this;

<form action="javascript:sendit()" method="post" name="product">

Ok?
Tasmanian Devil
08-31-2003, 09:06 AM
gcrowan~

:D:D Thank you so much!!! :D:D
:D:D You are the Wo/man which ever applies!!! :D:D

Thanks
Devil