Show content based on data from 2 inputs

Riku · 07-02-2012, 10:57 AM

Hello, some helpfull guy already helped me to get started with my code and I thought it was close enough for me to modify it for me needs. After many hours I can't still figure out how to modify it to fit my needs :s

Here's my modified code:

Code:

<div class="ay_container">

<form> FROM 
<select id="fromcity"> 
<option value="NYC">New York</option> 
<option value="BOS">Boston</option> 
<option value="LOS">Los Angeles</option> 
<option value="SAN">San Francisco</option> 
</select> 

TO 
<select id="tocity"> 
<option value="NYC">New York</option> 
<option value="BOS">Boston</option> 
<option value="LOS">Los Angeles</option> 
<option value="SAN">San Francisco</option> 
</select> 


<input value="Show Info" onclick="showStuff()" type="button" /> </form>
<div id="container">
<div class="NYCtoLOS LOStoNYC cities" style="display: none;">Info about route between New York and Los Angeles</div>
<div class="NYCtoSAN SANtoNYC cities" style="display: none;">Info about route New York and San Francisco</div>
<div class="BOStoLOS LOStoBOS cities" style="display: none;">Info about route Boston and Los Angeles</div>
<div class="BOStoSAN SANtoBOS cities" style="display: none;">Info about route Boston and San Francisco</div>
</div>
<script type="text/javascript">// <![CDATA[
function showStuff() {
var fr =  document.getElementById("fromcity").value;
var to = document.getElementById("tocity").value;

var d  = document.getElementById('container').getElementsByClassName('cities');
var len = d.length;
for (var i = 0; i <len; i++) 

var div2show = fr + "to" + to;
document.getElementsByClassName('div2show').style.display="block";

}
// ]]></script>
</div>

Here is the code that someone gave it to me;

Code:

<html> 
<head> 

<style = "text/css">
.mydivhide {display:none;}
.mydivshow {display:block;}
</style>
<body>

<form>

FROM <select id = "fromcity">
<option value = "NYC" >New York</option>
<option value = "BOS">Boston</option>
</select>

TO <select id = "tocity">
<option value = "LOS" >Los Angeles</option>
<option value = "SAN">San Francisco</option>
</select>

<input type = "button" value = "Show Info" onclick = "showStuff()">
</form>

<div id = "container">
<div id = "NYC-LOS" class = "mydivhide" >Info about New York to Los Angeles</div>
<div id = "NYC-SAN" class = "mydivhide" >Info about New York to San Francisco</div>
<div id = "BOS-LOS" class = "mydivhide" >Info about Boston to Los Angeles</div>
<div id = "BOS-SAN" class = "mydivhide" >Info about Boston to San Francisco</div>
</div>

<script type = "text/javascript">

function showStuff() {
var fr =  document.getElementById("fromcity").value;
var to = document.getElementById("tocity").value;

var d  = document.getElementById('container').getElementsByTagName('div');
var len = d.length;
for (var i = 0; i <len; i++) {
d[i].className = "mydivhide";
}

var div2show = fr + "-" + to;
document.getElementById(div2show).className = "mydivshow";

}

</script>

</body>
</html>

So what I try to accomplish here is to have two lists with exactly same content, but the content is same if you go from New York to Los Angeles as Los angeles to New York.

I can use jQuery also if there is simpler way to do this with it.

So you could choose any departure city and any destination city.

If anything is unclear please tell me and I will try to be more specific!

-Riku

Philip M · 07-02-2012, 11:14 AM

I have the idea that you ought to be able to make these simple alterations to the code that "someone" gave you yourself.

getElementsByClassName() is supported only in IE9, and requires another script to use with older browsers. That is why I deliberately avoided it.

Code:

<html> 
<head> 

<style = "text/css">
.mydivhide {display:none;}
.mydivshow {display:block;}
</style>
<body>

<form>

FROM <select id = "fromcity">
<option value = "NYC" >New York</option>
<option value = "BOS">Boston</option>
<option value = "LOS" >Los Angeles</option>
<option value = "SAN">San Francisco</option>
</select>

TO <select id = "tocity">
<option value = "NYC" >New York</option>
<option value = "BOS">Boston</option>
<option value = "LOS" >Los Angeles</option>
<option value = "SAN">San Francisco</option>
</select>

<input type = "button" value = "Show Info" onclick = "showStuff()">
</form>

<div id = "container">
<div id = "NYC-LOS" class = "mydivhide" >Info about New York to Los Angeles</div>
<div id = "NYC-SAN" class = "mydivhide" >Info about New York to San Francisco</div>
<div id = "BOS-LOS" class = "mydivhide" >Info about Boston to Los Angeles</div>
<div id = "BOS-SAN" class = "mydivhide" >Info about Boston to San Francisco</div>
<div id = "ERROR" class = "mydivhide" >Info for those selections does not exist</div>

</div>

<script type = "text/javascript">

function showStuff() {
var fr =  document.getElementById("fromcity").value;
var to = document.getElementById("tocity").value;
if (fr==to) {
alert ("You must choose different cities to go from and to.");
return false;
}

var d  = document.getElementById('container').getElementsByTagName('div');
var len = d.length;
for (var i = 0; i <len; i++) {
d[i].className = "mydivhide";
}

var div2show = fr + "-" + to;
if (document.getElementById(div2show) == null) {  // if div does not exist switch from and to
div2show = to + "-" + fr;
}   
if (document.getElementById(div2show) == null) {  // if still no such div show error message
div2show = "ERROR";
}   

document.getElementById(div2show).className = "mydivshow";

}

</script>

</body>
</html>

</body>
</html>

Quizmaster: What D do you call a native of Denmark?
Contestant: Dutch