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 10 of 10
  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Construct url from dropdown values

    I am not a javascript wizard and I am not sure if this is possible. But I wish to make the values of five drop down menus to be added to an url. The aim is to use a search function I already have search for preset values instead of a free search. See image.



    I have a code that gathers the values from dropdowns in a text field but I don't know if I can use that in any way. The code so far:

    Code:
    <input id="mytext" name="something" type="text" />
        
    <select id="dropdown">
    <option value="">Number of men</option>
        <option value="1 man ">1 man</option>
        <option value="2 män ">2 men</option>
        <option value="3 män ">3 men</option>
    </select>
    <select id="dropdown1">
        <option value="">Number of women</option>
        <option value="1 kvinna ">1 woman</option>
        <option value="2 kvinnor ">2 women</option>
        <option value="3 kvinnor ">3 women</option>
    </select>
    <select id="dropdown2">
        <option value="">Number of children</option>
        <option value="1 barn ">1 child</option>
        <option value="2 barn ">2 children</option>
        <option value="3 barn ">3 children</option>
    </select>
    <select id="dropdown3">
        <option value="">Search in category</option>
        <option value="1 djur ">Family photos</option>
        <option value="2 djur ">School photos</option>
        <option value="3 djur ">Work photos</option>
    </select>
    <script type="text/javascript">
        var mytextbox = document.getElementById('mytext');
        var mydropdown = document.getElementById('dropdown');
    
        mydropdown.onchange = function(){
              mytextbox.value = mytextbox.value  + this.value; //to appened
             //mytextbox.innerHTML = this.value;
        }
    	    var mydropdown1 = document.getElementById('dropdown1');
    
        mydropdown1.onchange = function(){
              mytextbox.value = mytextbox.value  + this.value; //to appened
             //mytextbox.innerHTML = this.value;
        }
    		    var mydropdown2 = document.getElementById('dropdown2');
    
        mydropdown2.onchange = function(){
              mytextbox.value = mytextbox.value  + this.value; //to appened
             //mytextbox.innerHTML = this.value;
        }
    			    var mydropdown3 = document.getElementById('dropdown3');
    
        mydropdown3.onchange = function(){
              mytextbox.value = mytextbox.value  + this.value; //to appened
             //mytextbox.innerHTML = this.value;
        }
    	
    </script>
    Does anybody have any idea how to accomplish this?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    You get the value of a select list option with

    var mydropdown1 = document.getElementById('dropdown1').value;


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    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.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,348
    Thanks
    23
    Thanked 618 Times in 617 Posts
    Your example has three dropdown values but your code wants four. Here is what I think you want:
    Code:
    <!--<input id="mytext" name="something" type="text" />-->
    
    <select id="dropdown">
    <option value="">Number of men</option>
        <option value="1 man ">1 man</option>
        <option value="2 män ">2 men</option>
        <option value="3 män ">3 men</option>
    </select>
    <select id="dropdown1">
        <option value="">Number of women</option>
        <option value="1 kvinna ">1 woman</option>
        <option value="2 kvinnor ">2 women</option>
        <option value="3 kvinnor ">3 women</option>
    </select>
    <select id="dropdown2">
        <option value="">Number of children</option>
        <option value="1 barn ">1 child</option>
        <option value="2 barn ">2 children</option>
        <option value="3 barn ">3 children</option>
    </select>
    <select id="dropdown3">
        <option value="">Search in category</option>
        <option value="1 djur ">Family photos</option>
        <option value="2 djur ">School photos</option>
        <option value="3 djur ">Work photos</option>
    </select>
    
    <script type="text/javascript">
    var searchString = "http://www.something.com/index.php?searchquery=";
        var mytextbox = document.getElementById('mytext');
        var mydropdown = document.getElementById('dropdown');
    
        mydropdown.onchange = function(){
              //mytextbox.value = mytextbox.value  + this.value; //to appened
             searchString += this.value;
        }
    	    var mydropdown1 = document.getElementById('dropdown1');
    
        mydropdown1.onchange = function(){
              //mytextbox.value = mytextbox.value  + this.value; //to appened
             searchString += this.value;
        }
    		    var mydropdown2 = document.getElementById('dropdown2');
    
        mydropdown2.onchange = function(){
              //mytextbox.value = mytextbox.value  + this.value; //to appened
             searchString += this.value;
        }
    			    var mydropdown3 = document.getElementById('dropdown3');
    
        mydropdown3.onchange = function(){
              //mytextbox.value = mytextbox.value  + this.value; //to appened
             searchString += "&catid="+this.value;
    		 alert(searchString);
        }
    
    </script>

  • #4
    New Coder
    Join Date
    Dec 2008
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Perfect!

    Thanks sunfighter, it works perfectly! But how do I make it go to the url when the choice has been made?

  • #5
    New Coder
    Join Date
    Dec 2008
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Solved it!

    I solved the issue with go-button and url. This is the full result:

    Code:
    <select id="dropdown">
    <option value="">Antal män</option>
        <option value="1 man ">1 man</option>
        <option value="2 män ">2 män</option>
        <option value="3 män ">3 män</option>
        <option value="4 män ">3 män</option>
        <option value="5 män ">3 män</option>
        <option value="Gruppbild män ">Gruppbild män</option>
    </select>
    <select id="dropdown1">
        <option value="">Antal kvinnor</option>
        <option value="1 kvinna ">1 kvinna</option>
        <option value="2 kvinnor ">2 kvinnor</option>
        <option value="3 kvinnor ">3 kvinnor</option>
        <option value="4 kvinnor ">4 kvinnor</option>
        <option value="5 kvinnor ">5 kvinnor</option>
        <option value="Gruppbild kvinnor ">Gruppbild kvinnor</option>
    </select>
    <select id="dropdown2">
        <option value="">Antal barn</option>
        <option value="1 barn ">1 barn</option>
        <option value="2 barn ">2 barn</option>
        <option value="3 barn ">3 barn</option>
        <option value="4 barn ">4 barn</option>
        <option value="5 barn ">5 barn</option>
        <option value="Gruppbild barn ">Gruppbild barn</option>
    </select>
    <select id="dropdown3">
      <option value="">Välj plats</option>
        <option value="0">Alla</option>
        <option value="76">Blekinge</option>
        <option value="77">Bohuslän</option>
        <option value="78">Dalarna</option>
    </select>
    
    <script type="text/javascript">
    var searchString = "http://somelink.com/searchby&cf_id=28&value=";
        var mytextbox = document.getElementById('mytext');
        var mydropdown = document.getElementById('dropdown');
    
        mydropdown.onchange = function(){
             searchString += this.value;
        }
    	    var mydropdown1 = document.getElementById('dropdown1');
    
        mydropdown1.onchange = function(){
             searchString += this.value;
        }
    		    var mydropdown2 = document.getElementById('dropdown2');
    
        mydropdown2.onchange = function(){
             searchString += this.value;
        }
    			    var mydropdown3 = document.getElementById('dropdown3');
    
        mydropdown3.onchange = function(){
             searchString += "&catid="+this.value+"=&Itemid=552";
        }
    	function navigateToURL() {
    window.location.href = searchString;
    }
    
    </script>
    
    <input type="button" onClick="navigateToURL();" value='OK'>
    Now the question is how to prompt a warning if no selection has been made because if no selection is made the url goes to nothing.

    Thanks everybody!

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Code:
    if (mydropdown.value == "" || mydropdown1.value == "" || mydropdown2.value == "" || mydropdown.value3 == "") {
    alert ("You must make a selection from all four lists");
    return false;
    }

    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.

  • #7
    New Coder
    Join Date
    Dec 2008
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks Philip M, it did the trick! I am so happy that there are people like you guys in the world, it really made my day!

  • #8
    New Coder
    Join Date
    Dec 2008
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    A new tricky question regarding this. If only one choice in one of the dropdowns are required, how to validate if nothing is chosen? Can you set such a criteria with if statements?

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by bonnie_lass View Post
    A new tricky question regarding this. If only one choice in one of the dropdowns are required, how to validate if nothing is chosen? Can you set such a criteria with if statements?
    Surely you can work that out for yourself?

    Code:
    if (mydropdown.value == "" && mydropdown1.value == "" && mydropdown2.value == "" && mydropdown.value3 == "") {
    alert ("You must make a selection from at least one of the four lists");
    return false;
    }

    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.

  • #10
    New Coder
    Join Date
    Dec 2008
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks, I did something similar but I must have missed something. It's so obvious when I see your example. I am not lazy, just stupid! Thanks!


  •  

    Posting Permissions

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