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,716
    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.
    signature under construction

  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,716
    anytime )
    signature under construction

  5. #5
    Join Date
    Nov 2010
    Posts
    1,276
    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,716
    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
    signature under construction

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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.14239 seconds
  • Memory Usage 2,931KB
  • Queries Executed 15 (?)
More Information
Template Usage (34):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (4)bbcode_code
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (7)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (7)postbit
  • (7)postbit_onlinestatus
  • (7)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (72):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates