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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Pre-selecting a value in a DropDownList in JS

    I have a drop down list I'm working at which has multiple values inside of it. I want to change the value that is automatically in the dropdownlist when the page loads based on the URL of the page.

    Code:
    <script type="text/javascript">
    <!--
    var url = window.location.href;
    var size = url.charAt(55); //Picks up the size (from the URL string).
    var level = url.charAt(63); //Picks up the level (either Unlimited or Essential).
    var term = url.charAt(78); //Picks up the term.
    
    var select_1 = document.getElementById("p_lt_zonePagePlaceHolder_pp1_pp1_lt_zoneContent_ed1_widget1_ctl00_viewBiz_ctl00_OrganizationSize_dropDownList");
    var select_2 = document.getElementById("p_lt_zonePagePlaceHolder_pp1_pp1_lt_zoneContent_ed1_widget1_ctl00_viewBiz_ctl00_ChooseHelpDeskLevel_dropDownList");
    var select_3 = document.getElementById("p_lt_zonePagePlaceHolder_pp1_pp1_lt_zoneContent_ed1_widget1_ctl00_viewBiz_ctl00_DesiredContractLength_dropDownList");
    
    alert("JS"); //Test
    
    switch(size)
    {
    case "1":
    select_1.options[1].selected = true;
    break;
    
    case "2":
    select_1.options[2].selected = true;
    break;
    
    case "3":
    select_1.options[3].selected = true;
    break;
    
    case "4":
    select_1.options[4].selected = true;
    break;
    
    case "5":
    select_1.options[5].selected = true;
    break;
    
    }
    
    switch(level)
    {
    case "U":
    select_2.options[1].selected = true;
    break;
    
    case "S":
    select_2.options[2].selected = true;
    break;
    
    }
    
    switch(term)
    {
    case "1":
    select_3.options[1].selected = true;
    break;
    
    case "2":
    select_3.options[2].selected = true;
    break;
    
    case "3":
    select_2.options[3].selected = true;
    break;
    }
    
    //-->
    </script>
    I can't figure out why this code isn't doing it. This code runs fine on jLint and other checkers. Does anyone with more experience mind looking at it? I'm a novice in JS. Thanks.

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    I use document.URL for the URL that includes URL parameters.

    I then split that on "?"; index 0 is the URL, index 1 is the parameters.

    I then split index 1 on "&" to get each NVP, then split each on "=" to get the NVP array.

    Much more accurate for getting URL parameters and values.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    BTW.. here is some code I wrote a while ago that will break down URL parameters and make JS global variables based upon the parameter names. Play around with it..

    Code:
    var delim1, delim2, delim3, URL_qs, URLArray, thisURL, qs, qsArray, thisIteration;
    delim1 = "?", delim2 = "&", delim3 = "=";
    URL_qs = document.URL;
    if(URL_qs.indexOf(delim1) > -1){// If there are any URL parameters..
        URLArray = URL_qs.split(delim1);
        if(URLArray[1].length > 0) {// If there is length to the URL parameters.. (prevents error in cases like "www.domain.com/file.htm?" - question mark, but no actual parameter.)
            thisURL = URLArray[0], qs = URLArray[1];
            qsArray = qs.split(delim2);// Isolate each NVP..
            for(i=0;i<qsArray.length;i++){
                thisIteration = qsArray[i].split(delim3);// Loop through them..
    // This declares JavaScript global variables that are named the same as the parameters in the query string of the URI, and sets their value to their associated value.
                window[unescape(thisIteration[0])] = unescape(thisIteration[1]);
                }
            }
        // Test to see if it works.  It does.  :)
        if(typeof(email) != "undefined"){alert("There is an email variable in the URI, and it's value is: " + email);}
        }
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #4
    New to the CF scene
    Join Date
    May 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by WolfShade View Post
    BTW.. here is some code I wrote a while ago that will break down URL parameters and make JS global variables based upon the parameter names. Play around with it..

    Code:
    var delim1, delim2, delim3, URL_qs, URLArray, thisURL, qs, qsArray, thisIteration;
    delim1 = "?", delim2 = "&", delim3 = "=";
    URL_qs = document.URL;
    if(URL_qs.indexOf(delim1) > -1){// If there are any URL parameters..
        URLArray = URL_qs.split(delim1);
        if(URLArray[1].length > 0) {// If there is length to the URL parameters.. (prevents error in cases like "www.domain.com/file.htm?" - question mark, but no actual parameter.)
            thisURL = URLArray[0], qs = URLArray[1];
            qsArray = qs.split(delim2);// Isolate each NVP..
            for(i=0;i<qsArray.length;i++){
                thisIteration = qsArray[i].split(delim3);// Loop through them..
    // This declares JavaScript global variables that are named the same as the parameters in the query string of the URI, and sets their value to their associated value.
                window[unescape(thisIteration[0])] = unescape(thisIteration[1]);
                }
            }
        // Test to see if it works.  It does.  :)
        if(typeof(email) != "undefined"){alert("There is an email variable in the URI, and it's value is: " + email);}
        }
    That's a much better code for doing that, so thank you for that. But when I tried to use it with my code, this still didn't work. Do you mind checking on my Switch syntax to see if I'm doing that properly? I think that's the issue.

  • #5
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Using the code I provided for making the URL parameters into global variables, hypothetically, if the url is "index.htm?select_1=1":

    Code:
    document.getElementById("p_lt_zonePagePlaceHolder_pp1_pp1_lt_zoneContent_ed1_widget1_ctl00_viewBiz_ctl00_OrganizationSize_dropDownList").options[select_1].selected = true;
    This would mean NOT initializing a variable called "select_1" because the code I provided would replace select_1 with the value of the URL parameter.

    You shouldn't need a switch/case statement for this. If the value passed in the parameter is the selectedIndex value, just use that. If the value is a string, or a different number other than selectedIndex, then you could set the selectedIndex based upon the value (not the text) of the option that you want pre-selected.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    WolfShade,

    • Instead of using document.URL, you can simply use location.search. That contains just the querystring part of the URL.
    • Using decodeURIComponent is more preferred than unescape.
    • For example, if you have alert=1&location=whatever, that would overwrite alert method and location object. It's better to put the parameters in a JSON object.


  •  

    Posting Permissions

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