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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Concatenating form values into Submit link

    I'd like to have a number of dropdown forms whose options each include a different url as their value...easy enough. But then I want the "submit" button to take the visitor to a url that was created by concatenating together the values of the options.

    For example if one of the selected option values is "color/blue/" and another selected option values in "size/large/", I'd want my "submit" button to change into a link to "http://www.example.com/color/blue/size/large/" ... any suggestions on how to accomplish this? It's been awhile since I've touched javascript.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,913
    Thanks
    56
    Thanked 545 Times in 542 Posts
    start with the base url as a string, lets say
    Code:
    var str="http://www.example.com/"
    loop through the values of the selects, concatenating the values to the string:

    Code:
    str+=sels[i].value
    once the loop is finished, redirect the page:
    Code:
    location.href=str;
    of course, you may want to put in some backstops for if the user doesn't select something on one of the selects

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Here you are:-

    Code:
    <select id = "color">
    <option value = "red" selected>Red</option>
    <option value = "green" >Green</option>
    <option value = "blue" >Blue</option><
    </select>
    
    <select id = "size">
    <option value = "small" selected>Small</option>
    <option value = "medium" >Medium</option>
    <option value = "large">Large</option><
    </select>
    
    <input type = "button" value = "Go To Page" onclick = "makeURL()">
    
    <script type = "text/javascript">
    function makeURL() {
    var colval = document.getElementById("color").value;
    var sizeval = document.getElementById("size").value;
    var url = "http://www.example.com/color/" + colval  + "/size/" + sizeval + "/";
    window.location.href = url;
    }
    </script>
    “A gentleman is one who never hurts anyone's feelings unintentionally.” -
    Oscar Wilde (Irish Poet, Novelist, Dramatist and Critic, 1854-1900)

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    bewildebeest (10-03-2012)

  • #4
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Nice...

    Thank you so much, Phillip. I'll swap in my options and let you know.


  •  

    Posting Permissions

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