Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2003
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    triple combo box with 'go' button

    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>

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    -27° 28' 22" , 153° 1' 22"
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is just one way that you could do this, see how you go. Also I would suggest you check out W3Schools, has lots of good learning stuff.

    Replace the following code:

    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:

    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:

    Code:
    function redirect2(z){
    window.location=temp1[z].value
    }
    Cheers...
    "Computers are considered female - As soon as you make a commitment to one, you find yourself spending half your paycheck on accessories for it."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •