Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

javascript help

Options
  • 05-07-2011 5:23pm
    #1
    Neodymium
    Registered Users Posts: 179 ✭✭


    Hi everyone,

    I have made a series of 3 dynamic drop down lists using html forms and javascript where the options in the next drop down list change according the the option selected in the previous list. Now these are working fine, I just need to know how, when I have selected all of my options the javascript will bring me to a new webpage according to the options I have selected. I hope I am making my self clear.

    For example if I have these 3 options selected:
    listsu.png

    It will take me to a new page.


    My HTML is here:
    [HTML]<!doctype html public "-//w3c//dtd html 3.2//en">
    <html>
    <head>
    <script language="javascript" src="list.js"></script>
    </head>

    <body onload="SelectContinent()">

    <form name="drop_list">
    <select name="continent" onChange="SelectCountry()">
    <option value=""> Select Continent</option>
    </select>

    <select name="country" onChange="SelectCity()">
    <option value="">Select Country</option>
    </select>

    <select name="city">
    <option value="">Select City</option>
    </select>
    </form>

    </body>
    </html>[/HTML]

    my javascript is here:
    [HTML]function SelectContinent(){
    // this function is used to fill the list with continents on load of the body
    addOption(document.drop_list.continent, "europe", "Europe","");
    addOption(document.drop_list.continent, "asia", "Asia", "");
    addOption(document.drop_list.continent, "north america", "North America", "");
    }

    function SelectCountry(){
    // on selection of a continent this function will work

    removeAllOptions(document.drop_list.country);
    addOption(document.drop_list.country,"","Select Country","");

    if(document.drop_list.continent.value == "europe"){
    addOption(document.drop_list.country,"ireland", "Ireland", "");
    addOption(document.drop_list.country,"france", "France", "");
    }
    if(document.drop_list.continent.value == "asia"){
    addOption(document.drop_list.country,"japan", "Japan","");
    addOption(document.drop_list.country,"china", "China","");
    }
    if(document.drop_list.continent.value == "north america"){
    addOption(document.drop_list.country,"usa", "USA","");
    addOption(document.drop_list.country,"canada", "Canada","");
    }
    }

    function SelectCity(){
    // on selection of a country this function will work

    removeAllOptions(document.drop_list.city);
    addOption(document.drop_list.city, "", "Select City", "");

    if(document.drop_list.country.value == "ireland"){
    addOption(document.drop_list.city,"cork", "Cork","");
    }
    if(document.drop_list.country.value == "france"){
    addOption(document.drop_list.city,"paris", "Paris","");
    }
    if(document.drop_list.country.value == "japan"){
    addOption(document.drop_list.city,"tokyo", "Tokyo","");
    }
    if(document.drop_list.country.value == "china"){
    addOption(document.drop_list.city,"beijing","Beijing","");
    }
    if(document.drop_list.country.value == "usa"){
    addOption(document.drop_list.city,"boston","Boston","");
    }
    if(document.drop_list.country.value == "canada"){
    addOption(document.drop_list.city,"vancouver","Vancouver","");
    }
    }
    //////////////////

    function removeAllOptions(selectbox)
    {
    var i;
    for(i=selectbox.options.length-1;i>=0;i--)
    {
    selectbox.options.remove(i);

    }
    }

    function addOption(selectbox, value, text)
    // this function adds options to the list
    {
    var optn = document.createElement("option");
    optn.text = text;
    optn.value = value;

    selectbox.options.add(optn);
    }
    [/HTML]

    If you copy and paste the html and javascript into your text editor, it should work.
    Thank you very much for taking the time to read this long post, any help would be greatly appreciated. Thanks


Comments

  • Options
    #2
    Giblet
    Registered Users Posts: 11,979 ✭✭✭✭Giblet


    The last dropdown is actually the only one that matters as each value seems to be unique, meaning it can be tied directly to a page, as the first two are acting as filters. How are you loading the data on the other page for the cities?


  • Options
    #3
    Neodymium
    Registered Users Posts: 179 ✭✭Neodymium


    Thanks Giblet. I think I got it sorted now.

    I added a new function in the javascript file called GoToPage:
    function GoToPage(){
    if(document.drop_list.city.value == "cork"){
    window.location = "http://google.com";
    }
    }

    and added a window.location for the other cities aswell.

    In my html, in the form I added an input button:
    <input type="button" value="go!" onClick="GoToPage()"/>

    Thanks for looking, I know it must have seemed like a trivial question but I've only been doing a bit of javascript properly for about a week now and I'm still trying to get to grips with it.


Advertisement