...

View Full Version : triple combo box with 'go' button



imagine
06-12-2003, 02:50 AM
hi, i am a new user with javascript and html. i am trying to use a triple combo box which populates the data based on choices on the previous drop downs. i have successfully with the help of this site, added 3 drop down boxes on my page however, i want the user to click a 'NEXT' button when the third option is chosen. instead of going to the desired location when the third option is chosen, i want the user to chose their options then press a next button to go to the desired website. can anyone please help me, i would appreciate it very much.

thanks

imagine

the code is below



<form name="first">
<select name="example" style="font-family:Arial;height:22px;width:462px;Z-INDEX: 105; LEFT: -59px; POSITION: absolute; TOP: 130px" onChange="redirect(this.options.selectedIndex)">
<option selected>---Please Select--------------</option>
<option>Financials</option>
<option>IT Systems</option>
<option>Human Resources</option>
</select>


<select name="stage2" style="font-family:Arial;height:22px;width:462px;Z-INDEX: 105; LEFT: -59px; POSITION: absolute; TOP: 180px" onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Please Select--------------</option>
<option value=" " selected>---Please Select--------------</option>
</select>

<select name="stage3" style="font-family:Arial;height:22px;width:462px;Z-INDEX: 105; LEFT: -59px; POSITION: absolute; TOP: 230px" onChange="redirect2(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Please Select--------------</option>
<option value=" " selected>---Please Select--------------</option>
</select>

<script>
<!--

var groups=document.first.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("---Please Select---"," ");

group[1][0]=new Option("Please Select A Report Type"," ");
group[1][1]=new Option("Graphs","47");
group[1][2]=new Option("Detailed Reports","46");

group[2][0]=new Option("Please Select A Report Type"," ");
group[2][1]=new Option("Graphs","115");
group[2][2]=new Option("Detailed Reports","116");

group[3][0]=new Option("Please Select A Report Type"," ");
group[3][1]=new Option("Graphs","115");
group[3][2]=new Option("Detailed Reports","116");

var temp=document.first.stage2


function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
redirect1(0)
}



var secondGroups=document.first.stage2.options.length
var secondGroup=new Array(groups)
for (i=0; i<groups; i++) {
secondGroup[i]=new Array(group[i].length)
for (j=0; j<group[i].length; j++) {
secondGroup[i][j]=new Array() }}

secondGroup[0][0][0]=new Option("---Please Select---"," ");
secondGroup[1][0][0]=new Option("---Please Select---"," ");
secondGroup[1][1][0]=new Option("Please Select A Graph"," ");
secondGroup[1][1][1]=new Option("End of Month Graph","S:/Products/Aperio - IP Benchmarking/Reports/Graphs/Monthly Financials Page.htm");
secondGroup[1][1][2]=new Option("Client Terms Graph","");
secondGroup[1][1][3]=new Option("Budgets Graph","");

secondGroup[1][2][0]=new Option("Please Select A Report"," ");
secondGroup[1][2][1]=new Option("End of Month Report","S:/Products/Aperio - IP Benchmarking/Reports/Report - Financials.htm");
secondGroup[1][2][2]=new Option("Budget and Client Terms Report","");

secondGroup[2][0][0]=new Option("---Select 3---"," ");
secondGroup[2][1][0]=new Option("Please Select A Graph"," ");
secondGroup[2][1][1]=new Option("IT Graph 1","");
secondGroup[2][1][2]=new Option("IT Graph 2","");

secondGroup[2][2][0]=new Option("Please Select A Report"," ");
secondGroup[2][2][1]=new Option("PMS Report","");
secondGroup[2][2][2]=new Option("Accounting Package Report","");

secondGroup[3][0][0]=new Option("---Select 3---"," ");
secondGroup[3][1][0]=new Option("Please Select A Graph"," ");
secondGroup[3][1][1]=new Option("HR Graph 1","");
secondGroup[3][1][2]=new Option("HR Graph 2","");

secondGroup[3][2][0]=new Option("Please Select A Report"," ");
secondGroup[3][2][1]=new Option("Staffing Levels Report","");
secondGroup[3][2][2]=new Option("Total Package Report","");

var temp1=document.first.stage3
function redirect1(y){
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for (i=0;i<secondGroup[document.first.example.options.selectedIndex][y].length;i++){
temp1.options[i]=new Option(secondGroup[document.first.example.options.selectedIndex][y][i].text,secondGroup[document.first.example.options.selectedIndex][y][i].value)
}
temp1.options[0].selected=true
}

function redirect2(z){
window.location=temp1[z].value
}

//-->
</script>


</form>

JustAsking
06-12-2003, 03:34 AM
Here is just one way that you could do this, see how you go. Also I would suggest you check out W3Schools (http://www.w3schools.com), has lots of good learning stuff.

Replace the following code:



<select name="stage3" style="font-family:Arial;height:22px;width:462px;Z-INDEX: 105; LEFT: -59px; POSITION: absolute; TOP: 230px" onChange="redirect2(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Please Select--------------</option>
<option value=" " selected>---Please Select--------------</option>
</select>


With this code:



<select name="stage3" style="font-family:Arial;height:22px;width:462px;Z-INDEX: 105; POSITION: absolute; TOP: 230px" onclick="document.first.next.disabled=false">
<option value=" " selected> </option>
<option value=" " selected>---Please Select--------------</option>
<option value=" " selected>---Please Select--------------</option>
</select>

<input type="button" name="next" value="Next" onclick="window.location=stage3.options[stage3.options.selectedIndex].value;" style="font-family:Arial;Z-INDEX: 105; POSITION: absolute; TOP: 270px" disabled>


And also remove this function:



function redirect2(z){
window.location=temp1[z].value
}


Cheers...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum