www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] Add a "filter" to my page

  1. #1
    Join Date
    Dec 2011
    Posts
    79

    resolved [RESOLVED] Add a "filter" to my page

    Hi.

    I run my works website. We are a car hire company.

    On our main "index" page is a "list" of all our cars( http://www.pennycarhire.co.uk)


    What i want to add is a "filter", what i mean by this is have, say a drop down box, with different criteria in it, e.g Diesel only, auto only e.c.t. So when you first load the page you see all cars, but when you chose a filter, say auto only, it would only show Automatic cars.

    So my question is, where the hell do i start ? . can this even be done with javascript? I just need a point in the right direction

    thanks

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    if i were you i would mark every block which describes a car so to make filtering easier. for example, it may be a div having the proper class:

    Code:
    <div class="fiat robomech petrol">
    <!-- <a id="" href="panda.html" title="Panda 1.2" accesskey="1"></a> -->
    <p><img align="right" alt="Panda 1.2" id="image47" title="Clio 1.2" src="images/panda.jpg" width="150" height="115"></img></p>
    <div class="c2"><big><a href="Panda.html"><strong>Fiat Panda 1.2 5Dr:</strong></a></big><br></br>
    &pound;25.00 per Day<p>
    &pound;130.00 per week</p>
    </div>
    </div>
    then using JQuery (as for me, i haven't used any other) you could hide/show/fade/etc. these divs according to which class it has. these actions are not that difficult to code up.

    Code:
    // this hides every div which has class fiat among all it's classes
    $('div[class*=fiat]').css('display','none');
    
    // *= means has among smth else
    
    // this hides every div which has class petrol among all it's classes
    $('div[class*=petrol]').css('display','none');
    etc.

    my english is not good, but i hope this makes sense
    Last edited by Padonak; 05-08-2012 at 11:24 AM.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Dec 2011
    Posts
    79
    Quote Originally Posted by Padonak View Post
    if i were you i would mark every block which describes a car so to make filtering easier. for example, it may be a div having the proper class:


    my english is not good, but i hope this makes sense
    Sounds good, ill take a look at doing that. Thank you very much

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    anytime )
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Nov 2010
    Posts
    1,085
    another possibility would be making your cars into objects and having them filterable by their properties. here's a script I worked on for another, similar post - the objects aren't constructed the way I would (I'd do it like this for readability's sake):
    Code:
    cars=[{name: "Lamborghini Aventador",mpgrange: 1,passenger: 2,luggage:0,fuel: "Petrol", gearbox: "Manual", aircon: "Yes", daycost: 2000, weekendcost: 38000, weeklycost: 12000, thumbnail: "Images/aventador.jpg"},
    {name:"Peugeot 107",
    //etc
    }]
    and there's some other stuff going on that you might not want, but it may give you some ideas...

    Code:
    <body >
    <div id="form_container">
    <h1><a>Car Hires</a></h1>
    <form name="hireform" class="appnitro"  method="post" action="">
    <div class="form_description">
    <h2>Car Hires</h2>
    <p>Fill the form below, and we will provide you with a list of cars that match your requirements.</p>
    </div>						
    			<ul >
    <li id="li_1" >
    <label class="description" for="element_1">Name </label>
    <span>
    <input id="element_1_1" name= "fname" class="element text" maxlength="255" size="8" value=""/>
    			<label>First</label>
    		</span>
    		<span>
    			<input id="element_1_2" name= "element_1_2" class="element text" maxlength="255" size="14" value=""/>
    			<label>Last</label>
    		</span> 
    		</li>		<li id="li_2" >
    		<label class="description" for="element_2">Email </label>
    		<div>
    			<input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/> 
    		</div> 
    		</li>		<li class="section_break">
    			<h3>Section Break</h3>
    			<p></p>
    		</li>		<li id="li_4" >
    		<label class="description" for="element_4">No. of Passengers </label>
    		<div>
    			<input id="element_4" name="passengers" class="element text small" type="text" maxlength="255" value=""/> 
    		</div><p class="guidelines" id="guide_4"><small>Enter the number of passengers in numerical format</small></p> 
    		</li>		<li id="li_5" >
    		<label class="description" for="element_5">Items of Luggage </label>
    		<span>
    			<input id="element_5_0" name="luggage" class="element radio" type="radio" value="0" />
    <label class="choice" for="element_5_0">0</label>
    			<input id="element_5_1" name="luggage" class="element radio" type="radio" value="1" />
    <label class="choice" for="element_5_1">1</label>
    <input id="element_5_2" name="luggage" class="element radio" type="radio" value="2" />
    <label class="choice" for="element_5_2">2</label>
    <input id="element_5_3" name="luggage" class="element radio" type="radio" value="3" />
    <label class="choice" for="element_5_3">3</label>
    <input id="element_5_4" name="luggage" class="element radio" type="radio" value="4" />
    <label class="choice" for="element_5_4">4</label>
    
    		</span> 
    		</li>		<li id="li_6" >
    		<label class="description" for="element_6">Fuel Type </label>
    		<span>
    			<input id="element_6_1" name="fuel" class="element radio" type="radio" value="Diesel" />
    <label class="choice" for="element_6_1">Diesel</label>
    <input id="element_6_2" name="fuel" class="element radio" type="radio" value="Petrol" />
    <label class="choice" for="element_6_2">Petrol</label>
    
    		</span> 
    		</li>		<li id="li_7" >
    		<label class="description" for="element_7">Transmission/Gear Box </label>
    		<span>
    			<input id="element_7_1" name="gearbox" class="element radio" type="radio" value="Automatic" />
    <label class="choice" for="element_7_1">Automatic</label>
    <input id="element_7_2" name="gearbox" class="element radio" type="radio" value="Manual" />
    <label class="choice" for="element_7_2">Manual</label>
    <input id="element_7_3" name="gearbox" class="element radio" type="radio" value="Semi-Automatic" />
    <label class="choice" for="element_7_3">Semi-Automatic</label>
    
    		</span> 
    		</li>		<li id="li_8" >
    		<label class="description" for="element_8">Airconditioning </label>
    		<span>
    			<input id="element_8_1" name="aircon" class="element radio" type="radio" value="Yes" />
    <label class="choice" for="element_8_1">Yes</label>
    <input id="element_8_2" name="aircon" class="element radio" type="radio" value="No" />
    <label class="choice" for="element_8_2">No</label>
    
    		</span> 
    		</li>		
    		
    <li id="li_9" >
    		<label class="description" for="element_5">Miles Per Gallon</label>
    		<span>
    			<input id="element_5_1" name="MPG" class="element radio" type="radio" value="1" />
    <label class="choice" for="element_5_1">10-35 MPG</label>
    <input id="element_5_2" name="MPG" class="element radio" type="radio" value="2" />
    <label class="choice" for="element_5_2">35-45 MPG</label>
    <input id="element_5_3" name="MPG" class="element radio" type="radio" value="3" />
    <label class="choice" for="element_5_3">Above 45 MPG</label>
    		</span> 
    		</li> 	<li id="li_10" >
    		<label class="description" for="element_9">Duration of Rental </label>
    		<div>
    		<select class="element select medium" id="element_9" name="element_9"> 
    			<option value="daycost" selected="selected">Day</option>
    <option value="weekendcost" >Weekend</option>
    <option value="weeklycost" >Full Week</option>
    
    
    		</select>
    		</div> 
    		</li>
    			
    					<li class="buttons">
    			    <input type="hidden" name="form_id" value="365314" />
    			    
    				<input id="saveForm" class="button_text" type="button" name="submit" value="Submit" onclick="submitform()"/>
    		</li>
    			</ul>
    		<div id="matchdiv">
    		</div>
    			</form>
    
    		<div id="footer">
    			Reference - <a href="http://www.phpform.org">pForm</a>
    		</div>
    	</div>
    	<img id="bottom" src="bottom.png" alt="">
    	</body>
    	<script>
    	//array information */
    var car=["Lamborghini Aventador", "Peugeot 107", "VW Golf", "Toyota Prius", "Kia Sedona", "Citroen 2CV", "Vauxhall Insignia", "Mercedes C180", "Reliant Robin", "Ford Fiesta"];
    var mpgrange=[1, 3, 3, 3, 1, 3, 2, 1, 3, 3];
    var passenger=[2, 4, 5, 5, 7, 4, 5, 5, 2, 5];
    var luggage=[0, 1, 2, 2, 4, 1, 3, 2, 1, 2];
    var fuel=["Petrol", "Petrol", "Diesel", "Petrol", "Diesel", "Petrol", "Diesel", "Petrol", "Petrol", "Petrol"];
    var gearbox=["Semi-Automatic", "Manual", "Manual", "Manual", "Manual", "Manual", "Automatic", "Automatic", "Manual", "Automatic"];
    var aircon=["Yes", "No", "Yes", "Yes", "Yes", "No", "Yes", "Yes", "No", "Yes"];
    var daycost=[2000, 30, 34, 44, 40, 25, 45, 87, 10, 31];
    var weekendcost=[3800, 90, 97, 110, 99, 25, 115, 243, 25, 90];
    var weeklycost=[12000, 135, 167, 183, 162, 124, 173, 560, 65, 130];
    var thumbnail=["Images/aventador.jpg", "Images/peugeot.jpg", "Images/golf.jpg", "Images/prius.jpg", "Images/kia.jpg", "Images/citroen.jpg", "Images/vauxhall", "Images/merc.jpg", "Images/robin.jpg", "Images/ford.jpg"];
    
    
    var cars = [];
    for(var i=0;i<car.length;i++)
    {
    cars[i] = {
    name: car[i],
    mpgrange: mpgrange[i],
    passenger: passenger[i],
    luggage: luggage[i],
    fuel: fuel[i],
    gearbox: gearbox[i],
    aircon: aircon[i],
    daycost: daycost[i],
    weekendcost: weekendcost[i],
    weeklycost: weeklycost[i],
    display:true,
    thumbnail: thumbnail[i]
    }
    }
    
    function submitform(){
    var space="";
    var fueltype="";
    var gbox="";
    var airconditioning="";
    var economy="";
    var hireprice = document.hireform.element_9.value;
    var passno = document.hireform.passengers.value;
    thediv=document.getElementById("matchdiv")
    
    while (thediv.firstChild) {
      thediv.removeChild(thediv.firstChild);
    }
    var passno = document.hireform.passengers.value;
    var radios = document.getElementsByTagName('input');
    for (var a = 0; a < radios.length; a++) {
        if (radios[a].name == 'luggage' && radios[a].checked) {
    		space = radios[a].value;
    	}
    	if (radios[a].name=='fuel' && radios[a].checked) {
    		fueltype = radios[a].value;
    	}
    	if (radios[a].name=='gearbox' && radios[a].checked) {
    		gbox = radios[a].value;
    	}
    	if (radios[a].name=='aircon' && radios[a].checked) {
    		airconditioning = radios[a].value;
    	}
    	if (radios[a].name=='MPG' && radios[a].checked) {
    		economy = radios[a].value;
    	}
    }
    
    
    var radioCount=0;
    var prices=[];
    for(var x=0;x<car.length;x++){
    if ((cars[x].passenger>=passno||passno=="")&&(cars[x].luggage>=space||space=="")&&(cars[x].fuel==fueltype||fueltype=="")&&(cars[x].gearbox==gbox||gbox=="")&&(cars[x].aircon==airconditioning||airconditioning=="")&&(cars[x].mpgrange>=economy||economy=="")) {
    prices.push(cars[x][hireprice])
    var newRadio = document.createElement("input");
    var br = document.createElement("br");
    newRadio.type = "radio";
    newRadio.id = "myRadio"+radioCount;
    newRadio.name = "myRadio";
    newRadio.value = cars[x].name;
    var newLabel = document.createElement("label");
    newLabel.htmlFor = cars[x].name;
    newLabel.appendChild(document.createTextNode(cars[x].name+" "+cars[x][hireprice]));
    var newImage = document.createElement("IMG");
    newImage.setAttribute("src",cars[x].thumbnail);
    thediv.appendChild(newRadio);
    thediv.appendChild(newLabel);
    thediv.appendChild(br);
    thediv.appendChild(newImage);
    radioCount++
    	}
    }
    
    	
    if (radioCount>1){
    var mess=document.createTextNode("The following cars meets your requirements:");
    thediv.insertBefore(mess,document.getElementById("myRadio0"));
    thediv.insertBefore(br,document.getElementById("myRadio0"));		
    for(var a=0;a<prices.length;a++){
    if (prices[a]===Math.min.apply(Math,prices)){
    nextElement(document.getElementById("myRadio"+a)).style.backgroundColor="red";
    nextElement(document.getElementById("myRadio"+a)).innerHTML+=" (the cheapest)";
    document.getElementById("myRadio"+a).checked=true;
    		}
    	}
    } else if (radioCount==0){
    thediv.appendChild(document.createTextNode("sorry, we have nothing meeting your requirements"));	
    	} else if (radioCount==1){
    var mess=document.createTextNode("The following car meets your requirements:");
    thediv.insertBefore(mess,document.getElementById("myRadio0"));
    thediv.insertBefore(br,document.getElementById("myRadio0"));	
    document.getElementById("myRadio0").checked=true;
    }
    
    
    
    }
    
    function nextElement(el) {
        while((el = el.nextSibling) && el.nodeType!== 1);
        return el;
    	}
    	</script>
    </body>
    </html>

  6. #6
    Join Date
    Dec 2011
    Posts
    79
    Quote Originally Posted by Padonak View Post
    anytime )
    just tested what you said, my FIRST every time using jquery, and it works, perfectly,. Thank you so much !

  7. #7
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    xelawho's code is based on much deeper understanding of JavaScript than just using a thirdparty frameworks like JQ or smth like. i do highly recommend you to try xelawho's code even if you are going to use mine
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles