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.

http://www.genealogi.se/test/example_dropdown_to_url.jpg

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:

<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?

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.

Your example has three dropdown values but your code wants four. Here is what I think you want:

<!--<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>

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

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

<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!

if (mydropdown.value == "" || mydropdown1.value == "" || mydropdown2.value == "" || mydropdown.value3 == "") {
alert ("You must make a selection from all four lists");
return false;
}

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!

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?

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?

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;
}

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!