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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 24
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts

    HTML Form + JS Object

    Wondering if anyone could point me in the right direction!

    I am trying to create a HTML form for a hire company that has multiple selection criterias i.e. mpg, passenger/seats, gearbox etc etc - based on these selections I need the form information to check against my JS object/array and find those objects which match the relevant attributes.

    The form itself has only radio buttons and one text field - I know how to take the data from an element of the form and put it into a variable so I can check it, but what I really want is to have all the information on the form matched against my object - Would I be looking at perhaps putting the form selections into a blank/new array and then comparing that to the object? If so any help/guidance would be greatly appreciated!

    Code:
    //array information */
    var car=new Array("Lamborghini Aventador", "Peugeot 107", "VW Golf", "Toyota Prius", "Kia Sedona", "Citroen 2CV", "Vauxhall Insignia", "Mercedes C180", "Reliant Robin", "Ford Fiesta");
    var mpg=new Array(13, 61, 47, 65, 32, 62, 40, 30, 70, 49);
    var passenger=new Array(2, 4, 5, 5, 7, 4, 5, 5, 2, 5);
    var luggage=new Array(0, 1, 2, 2, 4, 1, 3, 2, 1, 2);
    var fuel=new Array("Petrol", "Petrol", "Diesel", "Petrol", "Diesel", "Petrol", "Diesel", "Petrol", "Petrol", "Petrol");
    var gearbox=new Array("Semi-Automatic", "Manual", "Manual", "Manual", "Manual", "Manual", "Automatic", "Automatic", "Manual", "Automatic");
    var aircon=new Array("Yes", "No", "Yes", "Yes", "Yes", "No", "Yes", "Yes", "No", "Yes");
    var daycost=new Array(2000, 30, 34, 44, 40, 25, 45, 87, 10, 31);
    var weekendcost=new Array(3800, 90, 97, 110, 99, 70, 115, 243, 25, 90);
    var weeklycost=new Array(12000, 135, 167, 183, 162, 124, 173, 560, 65, 130);
    
    var cars = {};
    for(var i=0;i<car.length;i++)
    {
    cars[i] = {
    name: car[i],
    mpg: mpg[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]
    }
    }
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Car Hires</title>
    <link rel="stylesheet" type="text/css" href="view.css" media="all">
    <script type="text/javascript" src="array.js"></script>
    
    </head>
    <body id="main_body" >
    	
    	<img id="top" src="top.png" alt="">
    	<div id="form_container">
    	
    		<h1><a>Car Hires</a></h1>
    		<form id="myform" 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_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="1" />
    <label class="choice" for="element_6_1">Diesel</label>
    <input id="element_6_2" name="fuel" class="element radio" type="radio" value="2" />
    <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="1" />
    <label class="choice" for="element_7_1">Automatic</label>
    <input id="element_7_2" name="gearbox" class="element radio" type="radio" value="2" />
    <label class="choice" for="element_7_2">Manual</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="1" />
    <label class="choice" for="element_8_1">Yes</label>
    <input id="element_8_2" name="aircon" class="element radio" type="radio" value="2" />
    <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-30</label>
    <input id="element_5_2" name="MPG" class="element radio" type="radio" value="2" />
    <label class="choice" for="element_5_2">30-50</label>
    <input id="element_5_3" name="MPG" class="element radio" type="radio" value="3" />
    <label class="choice" for="element_5_3">50-80</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="" selected="selected"></option>
    <option value="1" >Day</option>
    <option value="2" >Weekend</option>
    <option value="3" >Full Week</option>
    
    
    		</select>
    		</div> 
    		</li>
    			
    					<li class="buttons">
    			    <input type="hidden" name="form_id" value="365314" />
    			    
    				<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
    		</li>
    			</ul>
    		</form>	
    		<div id="footer">
    			Car Hire Form</a>
    		</div>
    	</div>
    	<img id="bottom" src="bottom.png" alt="">
    	</body>
    </html>
    Last edited by cstones; 03-28-2012 at 04:01 PM.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    one possibility would be to put all your cars onto an array (var cars = []; not var cars = {};)

    collect all your inputs as variables:

    Code:
    var passno = document.myform.passengers.value
    var radios = document.getElementsByTagName('input');
    for (var a = 0; a < radios.length; a++) {
        if (radios[a].name == 'luggage' && radios[a].checked) {
           var space = radios[a].value;       
        }
    }
    //etc

    (the first line will only work with <form name="myform"> not <form id="myform">)

    then loop through your objects making sure every characteristic matches:

    Code:
    for(var x=0;x<cars.length;x++){
    if (cars[x].passenger==passno&&cars[x].luggage==space) { //etc
    alert("sounds like you want a "+ cars[x].name)
      }
    }

  • Users who have thanked xelawho for this post:

    cstones (03-29-2012)

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    How are you handling it on the server? The JavaScript version should basically be a repeat of whatever server side validation you are doing.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    New Coder
    Join Date
    Mar 2012
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts
    The section of code you highlighed and said to change - What different does that make other than one being a condensed array and the other a literal?

    Cheers for the pointers aswell

  • #5
    New Coder
    Join Date
    Mar 2012
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Also just another issue I've come up against -

    I tried the method of document.name etc - but no matter what I changed the form "name" to it kept saying there was an error in firebug - not defined.

    So I've tried this instead which appears to be working, but doesn't show the alert event once both variables have been met. (and they definitely do meet the criteria of the attributes in the list)

    //var passno = document.hireform.passengers.value; - undefined error in FB
    var passno = document.getElementById("myform").passengers.value;

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by cstones View Post
    What different does that make other than one being a condensed array and the other a literal?
    really not a whole lot until it comes time to loop through the various objects looking for matches. The array has a length whereas the object doesn't, so with an array you can do this:
    Code:
    for(var x=0;x<cars.length;x++){
    whereas if all the other objects are stored in a larger object you have to find some other way to determine how many loops you want to perform. it could be this:
    Code:
    for(var x=0;x<car.length;x++){
    (where "car" could be replaced by mpg or fuel or any other array name)
    or you could hardcode it like this:
    Code:
    for(var x=0;x<10;x++){
    but in terms of code maintenance it would seem better to me to push them all onto a separate array so the loop will self-adjust if you change the data structure later.

    Quote Originally Posted by cstones
    I tried the method of document.name etc - but no matter what I changed the form "name" to it kept saying there was an error in firebug - not defined.
    It doesn't matter what you name the form as long as you reference it the same way, so
    Code:
    <form name="myform" class="appnitro"  method="post" action="">
    ...
    var passno = document.myform.passengers.value
    will work just as well as
    Code:
    <form name="blahblah" class="appnitro"  method="post" action="">
    ...
    var passno = document.blahblah.passengers.value
    but bear in mind that an id is not a name.

    if you are going the document.getElementById route, the simpler method would be accessing the element directly:
    Code:
    var passno = document.getElementById("element_4").value;
    but being that form elements need names to submit to server I prefer the dot notation as it is simpler

    the code I gave you works for me, but there are a couple of other changes I had to make - mostly changing the submit button to a normal button that fires a function and putting the code I posted into that function. If you're still having trouble, post your updated code

  • #7
    New Coder
    Join Date
    Mar 2012
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts
    There won't be any need to change the structure of the data as it's going to be a relatively simple application.

    I've used the first method and the literal array example you posted - Could you just check if I am doing this correct also:

    Code:
    function submitform()
    {
    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) {
    	var space = radios[a].value;
    	}
    }
    	
    for (var b = 0; b < radios.length; b++) {
    	if (radios[b].name=='fuel' && radios[b].checked) {
    	var fueltype = radios[b].value;
    	}
    }
    
    
    
    for(var x=0;x<cars.length;x++){
    if (cars[x].passenger==passno&&cars[x].luggage==space&&cars[x].fuel==fueltype) {
    alert("sounds like you want a "+ cars[x].name)
      }
    }
    }
    
    //check to see if event handler is working
    
    /*function submitform(){
        alert("working");
    };
    
    var btn;
    btn=document.getElementById("saveForm");
    if(btn.addEventListener){
        btn.addEventListener("click", submitform, false)
    }else{
        btn.attachEvent("onclick", submitform)
    }*/
    Am I right assuming I need a variable/loop a,b,c,d for each of the radio boxes? Or should it be like so:

    Code:
    function submitform()
    {
    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) {
    	var space = radios[a].value;
    	}
    	
    	if (radios[a].name=='fuel' && radios[a].checked) {
    	var fueltype = radios[a].value;
    	}
    }
    
    
    for(var x=0;x<cars.length;x++){
    if (cars[x].passenger==passno&&cars[x].luggage==space&&cars[x].fuel==fueltype) {
    alert("sounds like you want a "+ cars[x].name)
      }
    }
    }
    
    //check to see if event handler is working
    
    /*function submitform(){
        alert("working");
    };
    
    var btn;
    btn=document.getElementById("saveForm");
    if(btn.addEventListener){
        btn.addEventListener("click", submitform, false)
    }else{
        btn.attachEvent("onclick", submitform)
    }*/
    Or

    Code:
    function submitform()
    {
    var passno = document.hireform.passengers.value;
    var radios = document.getElementsByTagName('input');
    
    for (var a = 0; a < radios.length; a++) 
    for (var b = 0; b < radios.length; b++) {
        if (radios[a].name == 'luggage' && radios[a].checked) {
    	var space = radios[a].value;
    	}
    	if (radios[b].name=='fuel' && radios[b].checked) {
    	var fueltype = radios[b].value;
    	}
    }
    	
    for(var x=0;x<cars.length;x++){
    if (cars[x].passenger==passno&&cars[x].luggage==space&&cars[x].fuel==fueltype) {
    alert("sounds like you want a "+ cars[x].name)
      }
    }
    }
    thanks again
    Last edited by cstones; 03-29-2012 at 06:32 PM.

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    there was only one problem when I tested that. your fuel radios have numerical values (1,2) but the array holds strings (Petrol, Diesel)

    so you will never get a match there. You should change one or the other so you are comparing apples with apples. I guess you will have the same problem with aircon and transmission.

    the second loop that you posted for the radios makes more sense to me - you are already looping through all of the radios (actually you are looping through all of the inputs, but no biggie...) so you do not need to make a separate loop to look at each set of radios

  • #9
    New Coder
    Join Date
    Mar 2012
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Will the issue of the variable only holding strings etc be the reason why I cannot seem to get this comparison operator to work? (Both the array and the radiobutton have numerical values)

    I'm trying to get the form to show those cars which meet the criteria and also surpass it i.e. if you want luggage capcity of 2 cases, but there's a car which has 4 it will show it.

    Code:
    for(var x=0;x<cars.length;x++){
    if (cars[x].passenger>=passno&&cars[x].luggage>=space&&cars[x].fuel==fueltype&&cars[x].gearbox==gbox) {
    alert("sounds like you want a "+ cars[x].name)
      }
    }
    }
    Scrap that ^ - I've realised it's working fine! However I've just come up stumped on how I should approach the MPG radio. If each option has it's own particular value and the script takes that and then checks it against the array it will come up with nothing at the present moment.

    Other than adding 10+ radio options for MPG e.g. below 10mpg, above 10mpg etc what do you think the best solution would be?
    Last edited by cstones; 03-29-2012 at 07:57 PM.

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    in that case it would make sense to use the "equal to or greater than" operator:
    Code:
    cars[x].luggage>=space
    I've been playing around with your code a little...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Car Hires</title>
    <link rel="stylesheet" type="text/css" href="view.css" media="all">
    <script type="text/javascript" src="array.js"></script>
    
    </head>
    <body id="main_body" >
    	
    	<img id="top" src="top.png" alt="">
    	<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_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="1" />
    <label class="choice" for="element_7_1">Automatic</label>
    <input id="element_7_2" name="gearbox" class="element radio" type="radio" value="2" />
    <label class="choice" for="element_7_2">Manual</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="1" />
    <label class="choice" for="element_8_1">Yes</label>
    <input id="element_8_2" name="aircon" class="element radio" type="radio" value="2" />
    <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-30</label>
    <input id="element_5_2" name="MPG" class="element radio" type="radio" value="2" />
    <label class="choice" for="element_5_2">30-50</label>
    <input id="element_5_3" name="MPG" class="element radio" type="radio" value="3" />
    <label class="choice" for="element_5_3">50-80</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="" selected="selected"></option>
    <option value="1" >Day</option>
    <option value="2" >Weekend</option>
    <option value="3" >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" onclick="showCar()" name="submit" value="Check for availability" />
    		</li>
    			</ul>
    		</form>	
    		<form name="submit_form"
    		</form>
    		<div id="footer">
    			Car Hire Form</a>
    		</div>
    	</div>
    	<img id="bottom" src="bottom.png" alt="">
    	</body>
    	<script>
    	//array information */
    var car=new Array("Lamborghini Aventador", "Peugeot 107", "VW Golf", "Toyota Prius", "Kia Sedona", "Citroen 2CV", "Vauxhall Insignia", "Mercedes C180", "Reliant Robin", "Ford Fiesta");
    var mpg=new Array(13, 61, 47, 65, 32, 62, 40, 30, 70, 49);
    var passenger=new Array(2, 4, 5, 5, 7, 4, 5, 5, 2, 5);
    var luggage=new Array(0, 1, 2, 2, 4, 1, 3, 2, 1, 2);
    var fuel=new Array("Petrol", "Petrol", "Diesel", "Petrol", "Diesel", "Petrol", "Diesel", "Petrol", "Petrol", "Petrol");
    var gearbox=new Array("Semi-Automatic", "Manual", "Manual", "Manual", "Manual", "Manual", "Automatic", "Automatic", "Manual", "Automatic");
    var aircon=new Array("Yes", "No", "Yes", "Yes", "Yes", "No", "Yes", "Yes", "No", "Yes");
    var daycost=new Array(2000, 30, 34, 44, 40, 25, 45, 87, 10, 31);
    var weekendcost=new Array(3800, 90, 97, 110, 99, 70, 115, 243, 25, 90);
    var weeklycost=new Array(12000, 135, 167, 183, 162, 124, 173, 560, 65, 130);
    
    
    var cars = {};
    for(var i=0;i<car.length;i++)
    {
    cars[i] = {
    name: car[i],
    mpg: mpg[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]
    }
    
    }
    
    function showCar(){
    while (document.submit_form.firstChild) {
      document.submit_form.removeChild(document.submit_form.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) {
    	var space = radios[a].value;
    	}
    	
    	if (radios[a].name=='fuel' && radios[a].checked) {
    	var fueltype = radios[a].value;
    	}
    }
    
    var radioCount=0;
    for(var x=0;x<car.length;x++){
    if (cars[x].passenger==passno&&cars[x].luggage>=space&&cars[x].fuel==fueltype) {
    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));
    document.submit_form.appendChild(newRadio);
    document.submit_form.appendChild(newLabel);
    document.submit_form.appendChild(br);
    radioCount++
      }
    }
    if (radioCount>1){
    var mess=document.createTextNode("Please select your car:");
    document.submit_form.insertBefore(mess,document.getElementById("myRadio0"));
    document.submit_form.insertBefore(br,document.getElementById("myRadio0"));
    	} else if (radioCount==1){
    var mess=document.createTextNode("The following car meets your requirements:");
    document.submit_form.insertBefore(mess,document.getElementById("myRadio0"));
    document.submit_form.insertBefore(br,document.getElementById("myRadio0"));	
    document.getElementById("myRadio0").checked=true;	
    	} else if (radioCount==0){
    document.submit_form.appendChild(document.createTextNode("sorry, we have nothing meeting your requirements"));	
    	}
    }	
    	</script>
    </html>

  • Users who have thanked xelawho for this post:

    cstones (03-29-2012)

  • #11
    New Coder
    Join Date
    Mar 2012
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts
    lol I posted just before hand!

    I had a look at your scripting and it's great! I'll certainly be disecting some of it when it comes to the final output as I will be using alot of DOM to show pictures and car aspects etc.

    After some thought I don't think multiple radios would even suffice - that script compares the two values of the array against the "value" of the radio selected. So they can either be =, >,< etc etc. What if I wanted to do something equal to 30mpg but less than, and on the second radio have equal to 30mpg but more than. Would I need another statement in the script like an else if?

    Code:
    			<input id="element_5_1" name="MPG" class="element radio" type="radio" value="10" />
    <label class="choice" for="element_5_1">Above 10 MPG</label>
    <input id="element_5_2" name="MPG" class="element radio" type="radio" value="30" />
    <label class="choice" for="element_5_2">Above 30 MPG</label>
    <input id="element_5_3" name="MPG" class="element radio" type="radio" value="50" />
    <label class="choice" for="element_5_3">Above 50 MPG</label>
    Code:
    for(var x=0;x<cars.length;x++){
    if (cars[x].passenger>=passno&&cars[x].luggage>=space
    		&&cars[x].fuel==fueltype&&cars[x].gearbox==gbox&&
    				cars[x].aircon==airconditioning&&cars[x].mpg>=economy) {
    alert("sounds like you want a "+ cars[x].name)
    Last edited by cstones; 03-29-2012 at 08:15 PM.

  • #12
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I would change your fuel array so that each car is assigned a "range" to match the radio button values. I think like this:
    Code:
    var mpg=new Array(1, 3, 2, 3, 2, 3, 2, 1, 3, 2);
    so that
    Code:
    cars[x].mpg>=mileage
    will match any car that has that fuel efficiency or better

  • #13
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by cstones View Post
    What if I wanted to do something equal to 30mpg but less than, and on the second radio have equal to 30mpg but more than. Would I need another statement in the script like an else if?
    I'm not sure that I understood this question, but does my post above provide a better method?

  • #14
    New Coder
    Join Date
    Mar 2012
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts
    That does answer the question - I've just placed the cars into another array based on mpg ranges which relate to my radio button selections.

    That test you did with regards to creating new elements/radio buttons - if I was to insert a h3 tag everytime a car was matched, could I do a count on those if the ids were unique?

  • #15
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    in the code I posted the radioCount variable counts matches


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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