Page 2 of 2 FirstFirst 12
Results 11 to 20 of 20

Thread: Modify a double drop menu to a triple

  1. #11
    Join Date
    Aug 2010
    Location
    Vancouver, Canada
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Yep, that worked. I am going to use airport codes (i.e Vancouver = YVR - Los Angeles = LAX) for each of the cities, so as to ensure that there is no duplication. My next challenge is to create a link for each city, so that when the user clicks on Canada - British Columbia - Vancouver s/he will be taken to a regular html page that contains only text about what is happening in Vancouver. The html pages will all reside on our server in California, and there will be one for each city (globally). fun, fun, fun.

    Thanks again for your valued input.

  2. #12
    Join Date
    Aug 2010
    Location
    Vancouver, Canada
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I'm getting nowhere on this. I had a user at another site suggest:

    "Assuming the last field will also be a select list, just use the html pages for each city as the value of the options. Then use an onchange event such as this:" onchange="window.location=this.options[this.selectedIndex].value;"

    However, I do not know where this would plug into the javascript that I'm using. There is only one onChange in that script (near the bottom) and it relates to:

    ('stateSelect').parentNode;
    parentObj.removeChild(selObj);
    var inputSel = document.createElement("SELECT");
    inputSel.setAttribute("name","state");
    inputSel.setAttribute("id","stateSelect");
    inputSel.setAttribute("onchange","javascript:

    So, assuming for the moment that the location of the required file is c:/capsulecomments.com/vancouver.html, where in onchange="window.location=this.options[this.selectedIndex].value;" does it go? Will it then read onchange="window.location=this.options[this.selectedindex].vancouver.html"?

  3. #13
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default

    I think the user was suggesting you add the code where the city SELECT options list was created. This way, all the "this" values used will refer to the city SELECT object. Hence, "this.selectedIndex" would tell you which city was selected.

    To add it in, simply look for the function: "populateCity". Next, scroll down until you find the line:

    if ( selObj.type == 'text' ) {

    Continue down to the line:

    inputSel.setAttribute("id","citySelect");

    And add this code just below that line:

    inputSel.setAttribute("onchange","javascript: if (this.selectedIndex!=0) {window.location='/capsulecomments.com/' + (this.options[this.selectedIndex].text) + '.html';}");

    This means that immediately after a city is chosen the page will redirect you to: "/capsulecomments.com/" + cityNAME + ".html". This is a relative address so you may need to change "/capsulecomments.com/" to whatever you need.

    As you can see, there are a few changes to the code. Firstly, the if statement prevents the user from selecting "select City" as their actual city. This should not be possible anyway, but just in case. Also, I have used the ".text" property instead of the ".value" property because this returns the city name. If you wanted the city code to be used in your html address, then you can change this back to ".value".

    I think this will do what it is supposed to. However, at the moment, if a user on the site selects the wrong city by accident then s/he will immediately be redirected to the other page, before s/he can change their answer. It would not be too difficulty to change this so the person is asked if they are sure, although that itself may be more annoying anyway.

  4. #14
    Join Date
    Aug 2010
    Location
    Vancouver, Canada
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    The script now works exactly the way I need. You have the heartfelt thanks of an old guy. Nice to know that there are other people like me out there. Help others when you can, and it comes back around to you in multiples.

    Thanks again.

  5. #15
    Join Date
    Aug 2010
    Location
    Vancouver, Canada
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Well, at least it worked fine on my computer, where the web page and the .js are in the same directory. The same cannot be said when they are in the same directory on the web hosting server. I have been informed by my web hosting service that they want extra money for allowing me to have the .js on the server, which would double my annual costs. So, I have taken the contents of the .js file and place it at the very bottom of my html, just before /body. I enclosed it within <script type="text/javascript" language="javascript"> and </script> and uploaded that as my index.html file. Now my drop down boxes have stopped working. Fun, fun, fun...

  6. #16
    Join Date
    Aug 2010
    Location
    Vancouver, Canada
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hmmm... I think this may have to be changed, now that the .js info is in the html home page.

    ("onchange","java_script: if (this.selectedIndex!=0)

    {window.location='capsulecomments.com/' + (this.options

    [this.selectedIndex].text) + '.html';}");

  7. #17
    Join Date
    Aug 2010
    Location
    Vancouver, Canada
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I give up! I'll pay Lunarpages the monthly fee that they demand, in order to have them let my .js file run on the hosting server. With that enabled, the entire site works as it should. Thanks for any and all input from everyone. I really appreciate it.

  8. #18
    Join Date
    Aug 2010
    Location
    Vancouver, Canada
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    If anyone wants to look at the web page coding, with the .js embedded, feel free to view it at capsulecomments.com. If anyone wants the .js script, tell me where you want me to send it and it's yours.

  9. #19
    Join Date
    Aug 2010
    Location
    Vancouver, Canada
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Lunarpages admitted that they erred in requiring a fee, and did some substantial backpedaling. So, I have removed the javascript from the html page and installed it on the server. All appears well with one exception, and that is the drop down menu for City shows a box, but it does not populate. Country and State work fine. You can see what I mean at capsulecomments.com. The part of the .js that pertains to City is below, and all suggestions are welcome:

    function populateCity() {
    var selObj = document.getElementById('citySelect');
    var foundCity = false;
    // Empty options just in case new drop down is shorter
    if ( selObj.type == 'select-one' ) {
    for (var i = 0; i < selObj.options.length; i++) {
    selObj.options[i] = null;
    }
    selObj.options.length=null;
    selObj.options[0] = new Option('Select City','');
    selObj.selectedIndex = 0;
    }
    // Populate the drop down with states from the selected

    state (and country)
    var cityLineArray = city.split("|"); // Split into lines
    //alert (cityLineArray);
    var optionCntr = 1;
    for (var loop = 0; loop < cityLineArray.length; loop++) {
    lineArray = cityLineArray[loop].split(":");
    if (foundState==true) { //take a city only from a

    specified state:
    typeCode = TrimString(lineArray[0]);
    countryCode = TrimString(lineArray[1]);
    stateCode = TrimString(lineArray[2]);
    cityCode = TrimString(lineArray[3]);
    cityName = TrimString(lineArray[4]);
    } else { //no states so take a city from the

    country itself:
    typeCode = TrimString(lineArray[0]);
    countryCode = TrimString(lineArray[1]);
    stateCode = "";
    cityCode = TrimString(lineArray[2]);
    cityName = TrimString(lineArray[3]);
    }
    if (((typeCode=="STATE" && foundState==true) ||

    (typeCode=="COUNTRY" && foundState==false)) &&

    document.getElementById('countrySelect').value == countryCode &&

    (document.getElementById('stateSelect').value == stateCode ||

    foundState==false) && countryCode != '' && (stateCode != '' ||

    foundState==false)) {
    // If it's a input element, change it to

    a select
    if ( selObj.type == 'text' ) {
    parentObj =

    document.getElementById('citySelect').parentNode;
    parentObj.removeChild(selObj);
    var inputSel =

    document.createElement("SELECT");
    inputSel.setAttribute

    ("name","city");
    inputSel.setAttribute

    ("id","citySelect");

    inputSel.setAttribute

    ("onchange","java_script: if (this.selectedIndex!=0)

    {window.location='/capsulecomments.com/' + (this.options

    [this.selectedIndex].text) + '.html';}");
    parentObj.appendChild(inputSel) ;
    selObj = document.getElementById

    ('citySelect');
    selObj.options[0] = new Option

    ('Select City','');
    selObj.selectedIndex = 0;
    }
    if ( cityCode != '' ) {
    selObj.options[optionCntr] = new

    Option(cityName, cityCode);
    }
    // See if it's selected from a previous

    post
    if ( cityCode == postCity && countryCode

    == postCountry && stateCode == postState) {
    selObj.selectedIndex =

    optionCntr;
    }
    foundCity = true;
    optionCntr++
    }
    }
    // If the state has no cities, change the select to a

    text box
    if ( ! foundCity ) {
    parentObj = document.getElementById

    ('citySelect').parentNode;
    parentObj.removeChild(selObj);
    // Create the Input Field
    var inputEl = document.createElement("INPUT");
    inputEl.setAttribute("id", "citySelect");
    inputEl.setAttribute("type", "text");
    inputEl.setAttribute("name", "city");
    inputEl.setAttribute("size", 20);
    inputEl.setAttribute("value", postCity);
    parentObj.appendChild(inputEl) ;
    }
    }

  10. #20
    Join Date
    Aug 2010
    Location
    Vancouver, Canada
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    For the hopefully final time, it now works. Again, thanks to those who assisted me with this.

Bookmarks

Posting Permissions

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