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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    What needs to be done to make this work?

    I'm trying to make a basic script that would filter down a large array of options (over 800) into just a hand full. I think I've got most of the guts down, but my button does nothing. It sits on the same page. I'm fairly new to scripting and coding. Any pointers or fixes would be GREATLY appreciated.

    Here is what I have so far:
    [CODE]<html>
    <title></title>
    <head></head>

    <body>


    Tonnage
    <select id="Tonnage" onchange="Tonnage(this.value)">
    <option value="Any">Any</option>
    <option value="1.5 Ton">1.5 Ton</option>
    <option value="2">2 Ton</option>
    <option value="2.5">2.5 Ton</option>
    <option value="3">3 Ton</option>
    <option value="3.5">3.5 Ton</option>
    <option value="4">4 Ton</option>
    <option value="5">5 Ton</option>
    </select>



    SEER
    <select id="SEER" onchange="SEER(this.value)">
    <option value="Any">Any</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="20">20</option>
    </select>


    Manufacturer
    <select id="Manufacturer" onchange="Manufacturer(this.value)">
    <option value="Any">Any</option>
    <option value="Amana">Amana</option>
    <option value="Bryant">Bryant</option>
    <option value="Carrier">Carrier</option>
    <option value="Goodman">Goodman</option>
    <option value="Nordyne">Nordyne</option>
    <option value="Payne">Payne</option>
    <option value="Ruud>Ruud</option>
    <option value="Trane">Trane</option>
    </select>



    Unit Type
    <select id="Type" onchange="Type(this.value)">
    <option value="Any">Any</option>
    <option value="Split Heat Pump">Split Heat Pump</option>
    <option value="Packaged Heat Pump">Packaged Heat Pump</option>
    </select>


    <script>
    function Tonnage(value) {
    document.getElementById('output').innerHTML=value
    }

    function SEER(value) {
    document.getElementById('output').innerHTML=value
    }

    function Type(value) {
    document.getElementById('output').innerHTML=value
    }

    function Manufacturer(value) {
    document.getElementById('output').innerHTML=value
    }

    </script>

    <button onclick="Manufacture(this.value)">Results</button>

    <!--Amana 1.5 Ton Options-->
    <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="13" data-Type="Split Heat Pump"</div>
    <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="13" data-Type="Packaged Heat Pump"</div>
    <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="14" data-Type="Split Heat Pump"</div>
    <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="14" data-Type="Packaged Heat Pump"</div>
    <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="15" data-Type="Split Heat Pump"</div>
    <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="15" data-Type="Packaged Heat Pump"</div>
    <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="16" data-Type="Split Heat Pump"</div>
    <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="16" data-Type="Packaged Heat Pump"</div>
    <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="17" data-Type="Split Heat Pump"</div>
    <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="17" data-Type="Packaged Heat Pump"</div>
    <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="18" data-Type="Split Heat Pump"</div>
    <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="18" data-Type="Packaged Heat Pump"</div>
    <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="20" data-Type="Split Heat Pump"</div>
    <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="20" data-Type="Packaged Heat Pump"</div>
    </body>

    </html>
    Code:
    
    

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    <select id="Tonnage" onchange="Tonnage(this.value)">

    To start with, do not use the same word as the id of a HTML element and a Javascript function.

    You have no function named Manufacture(). And you have no HTML element with the id of output.

    You should make the first (default) option in each select list selected.
    <option value="Any" selected>Any</option>

    I am quite unclear what you want the output to be. Please give an example.



    Quizmaster: What crop is grown in a paddy field?
    Contestant: Potatoes

    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:

    Codename Jinn (12-26-2013)

  • #3
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I've got a list of over 800 air conditioning units. I want the list to display below the drop down menus, and have the drop menus filter the list down to all the units that meet the criteria. Currently, I have all the units as <div class> with the attributes listed in the tag.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,883
    Thanks
    56
    Thanked 539 Times in 536 Posts
    I don't like the "results" button - if I understand what you are trying to do, it's an unnecessary step. You can go about filtering as the user selects options, but if you don't like that, you can just remove the onchange from the selects and have a button that fires the filterModels function...

    Code:
    <html>
    <title></title>
    
    <head></head>
    
    <body>
    
        Tonnage
        <select id="tonnage" onchange="filterModels()">
            <option value="Any">Any</option>
            <option value="1.5">1.5 Ton</option>
            <option value="2">2 Ton</option>
            <option value="2.5">2.5 Ton</option>
            <option value="3">3 Ton</option>
            <option value="3.5">3.5 Ton</option>
            <option value="4">4 Ton</option>
            <option value="5">5 Ton</option>
        </select>
    
        SEER
        <select id="seer" onchange="filterModels()">
            <option value="Any">Any</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="20">20</option>
        </select>
    
        Manufacturer
        <select id="manufacturer" onchange="filterModels()">
            <option value="Any">Any</option>
            <option value="Amana">Amana</option>
            <option value="Bryant">Bryant</option>
            <option value="Carrier">Carrier</option>
            <option value="Goodman">Goodman</option>
            <option value="Nordyne">Nordyne</option>
            <option value="Payne">Payne</option>
            <option value="Ruud">Ruud</option>
            <option value="Trane">Trane</option>
        </select>
    
        Unit Type
        <select id="utype" onchange="filterModels()">
            <option value="Any">Any</option>
            <option value="Split Heat Pump">Split Heat Pump</option>
            <option value="Packaged Heat Pump">Packaged Heat Pump</option>
        </select>
    
        <!--Amana 1.5 Ton Options-->
        <div id="aircons">
            <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="13" data-Type="Split Heat Pump">Split Heat Pump 13</div>
            <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="13" data-Type="Packaged Heat Pump">Packaged Heat Pump 13</div>
            <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="14" data-Type="Split Heat Pump">Split Heat Pump 14</div>
            <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="14" data-Type="Packaged Heat Pump">Packaged Heat Pump 14</div>
            <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="15" data-Type="Split Heat Pump">Split Heat Pump 15</div>
            <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="15" data-Type="Packaged Heat Pump">Packaged Heat Pump 15</div>
            <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="16" data-Type="Split Heat Pump">Split Heat Pump 16</div>
            <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="16" data-Type="Packaged Heat Pump">Packaged Heat Pump 16</div>
            <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="17" data-Type="Split Heat Pump">Split Heat Pump 17</div>
            <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="17" data-Type="Packaged Heat Pump">Packaged Heat Pump 17</div>
            <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="18" data-Type="Split Heat Pump">Split Heat Pump 18</div>
            <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="18" data-Type="Packaged Heat Pump">Packaged Heat Pump 18</div>
            <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="20" data-Type="Split Heat Pump">Split Heat Pump 20</div>
            <div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="20" data-Type="Packaged Heat Pump">Packaged Heat Pump 20</div>
        </div>
    
        <script>
            function filterModels() {
                var ton = document.getElementById("tonnage").value;
                var sr = document.getElementById("seer").value;
                var mfr = document.getElementById("manufacturer").value;
                var ut = document.getElementById("utype").value;
    
                var alldivs = document.getElementById("aircons").getElementsByTagName("div");
    
                for (var i = 0; i < alldivs.length; i++) { // make all models visible before filtering
                    alldivs[i].style.display = "block";
                }
    
                //filter says if select option is not "Any" AND the model attribute does not meet the criteria, hide that model
    
                for (var a = 0; a < alldivs.length; a++) {
                    if (ton != "Any" && ton != alldivs[a].getAttribute("data-Tonnage")) {
                        alldivs[a].style.display = "none";
                    }
                    if (sr != "Any" && sr != alldivs[a].getAttribute("data-SEER")) {
                        alldivs[a].style.display = "none";
                    }
                    if (mfr != "Any" && mfr != alldivs[a].getAttribute("data-Manufacturer")) {
                        alldivs[a].style.display = "none";
                    }
                    if (ut != "Any" && ut != alldivs[a].getAttribute("data-Type")) {
                        alldivs[a].style.display = "none";
                    }
                }
    
            }
        </script>
    
    </body>
    
    </html>

  • Users who have thanked xelawho for this post:

    Codename Jinn (12-26-2013)

  • #5
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That's exactly it! Thanks amillion!

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Once again - you should make the first (default) option in each select list selected.
    <option value="Any" selected>Any</option>

    Otherwise the user can select the "Any" option only by first selecting some other option.

    You might wish to block the selecton of "Any" for all of the select lists.

    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
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,883
    Thanks
    56
    Thanked 539 Times in 536 Posts
    Quote Originally Posted by Philip M View Post
    Once again - you should make the first (default) option in each select list selected.
    <option value="Any" selected>Any</option>

    Otherwise the user can select the "Any" option only by first selecting some other option.

    You might wish to block the selecton of "Any" for all of the select lists.
    This sounds right, but I'm having difficulty applying it to the code provided.

    If "Any" is the first option, it will be selected anyway, so there would be no need for the user to select some other option to then go back and select that.

    The code shows all of the models, then narrows down the list as selections are made. So having all the selects set to any (and therefore all the models shown) would seem to make sense.

    Or has all that pudding gone to my head?

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    If the script is triggered by onchange then a change of the option selected must take place to invoke it.

    I think I would prefer the button rather than filter as the user selects various options. The changes of display could be confusing!

    If "Any" is selected for all four select lists then presumably the user gets a list of all the 800 air-conditioning units. It might make sense to allow only (any) one of the four select lists to be "Any".


    Edit: Looking again, I agree that with your code there is no need to define the "Any" option as selected.
    Last edited by Philip M; 12-27-2013 at 07:51 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.


  •  

    Tags for this Thread

    Posting Permissions

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