...

View Full Version : Construct url from dropdown values



bonnie_lass
11-20-2012, 03:41 PM
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?

Philip M
11-20-2012, 04:52 PM
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.

sunfighter
11-20-2012, 05:46 PM
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>

bonnie_lass
11-21-2012, 09:35 AM
Thanks sunfighter, it works perfectly! But how do I make it go to the url when the choice has been made?

bonnie_lass
11-21-2012, 01:59 PM
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!

Philip M
11-21-2012, 04:17 PM
if (mydropdown.value == "" || mydropdown1.value == "" || mydropdown2.value == "" || mydropdown.value3 == "") {
alert ("You must make a selection from all four lists");
return false;
}

bonnie_lass
11-21-2012, 04:52 PM
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!

bonnie_lass
11-22-2012, 11:22 AM
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?

Philip M
11-22-2012, 12:44 PM
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;
}

bonnie_lass
11-23-2012, 10:00 AM
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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum