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 2 of 2
  1. #1
    New Coder
    Join Date
    Feb 2012
    Location
    Finland
    Posts
    59
    Thanks
    3
    Thanked 9 Times in 9 Posts

    Show content based on data from 2 inputs

    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
    Last edited by Riku; 07-02-2012 at 11:06 AM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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
    Last edited by Philip M; 07-02-2012 at 11:28 AM.

    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:

    Riku (07-02-2012)


  •  

    Posting Permissions

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