...

View Full Version : HTML Form + JS Object



cstones
03-28-2012, 03:40 PM
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!


//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]
}
}


<!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>

xelawho
03-28-2012, 09:30 PM
one possibility would be to put all your cars onto an array (var cars = []; not var cars = {};)

collect all your inputs as variables:


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:


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)
}
}

felgall
03-28-2012, 10:39 PM
How are you handling it on the server? The JavaScript version should basically be a repeat of whatever server side validation you are doing.

cstones
03-29-2012, 01:43 PM
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

cstones
03-29-2012, 02:06 PM
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;

xelawho
03-29-2012, 04:35 PM
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:

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:

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:

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.


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

<form name="myform" class="appnitro" method="post" action="">
...
var passno = document.myform.passengers.value

will work just as well as

<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:

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

cstones
03-29-2012, 06:14 PM
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:


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:


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


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

xelawho
03-29-2012, 06:52 PM
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

cstones
03-29-2012, 07:28 PM
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.


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?

xelawho
03-29-2012, 07:40 PM
in that case it would make sense to use the "equal to or greater than" operator:

cars[x].luggage>=space

I've been playing around with your code a little...



<!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>

cstones
03-29-2012, 07:55 PM
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?


<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>


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)

xelawho
03-29-2012, 08:21 PM
I would change your fuel array so that each car is assigned a "range" to match the radio button values. I think like this:

var mpg=new Array(1, 3, 2, 3, 2, 3, 2, 1, 3, 2);

so that

cars[x].mpg>=mileage

will match any car that has that fuel efficiency or better

xelawho
03-29-2012, 08:26 PM
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?

cstones
03-29-2012, 09:04 PM
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?

xelawho
03-29-2012, 09:16 PM
in the code I posted the radioCount variable counts matches

cstones
04-12-2012, 05:22 PM
Apologies for not replying sooner, but I've been away so haven't worked on this much!

However I've changed a few things in the code mainly how the form inputs effect the output of the chosen cars - if the user fills only some of the options the form will still output some cars.

Also added to the existing DOM and put car images in.

Now I'm just trying to add a price for the chosen duration, say a user selects Weekly - I want the actual price thats held in the array to appear next to each matching car. I've put the value of the "duration" field into a variable and I was then thinking that I could put that variable within the DOM section so it chooses the correct attribute from the array - am I going about this in the correct way?


//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 actualmpg=new Array(13, 61, 47, 65, 32, 62, 40, 30, 70, 49);
var mpgrange=new Array (1, 3, 3, 3, 1, 3, 2, 1, 3, 3);
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 thumbnail=new Array("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]
}
}

/*Collects form inputs from user as variables. Loops through per number of radio inputs on the form,
gathering values from those that are checked*/

function submitform(){
//from here
while (document.matches.firstChild) {
document.matches.removeChild(document.matches.firstChild);
}
//to here
var passno = document.hireform.passengers.value;
var hireprice = document.hireform.element_9.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;
}

if (radios[a].name=='gearbox' && radios[a].checked) {
var gbox = radios[a].value;
}

if (radios[a].name=='aircon' && radios[a].checked) {
var airconditioning = radios[a].value;
}
if (radios[a].name=='MPG' && radios[a].checked) {
var economy = radios[a].value;
}

}

var radioCount=0;

for(var x=0;x<cars.length;x++){
cars[x].display=true;

if (cars[x].passenger<passno){
cars[x].display = false;
}
if (cars[x].luggage<space){
cars[x].display = false;
}
if (cars[x].fuel!=fueltype){
cars[x].display = false;
}
if (cars[x].gearbox!=gbox){
cars[x].display = false;
}
if (cars[x].aircon!=airconditioning){
cars[x].display = false;
}
if (cars[x].mpgrange<economy){
cars[x].display = false;
}

for(var x=0;x<cars.length;x++){
if(cars[x].display == false) {
continue;
}
//need to put some DOM script here to insert car images, h3 tags and price of rental, shows elements based on the count of radio buttons if there are matches.

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));
var newImage = document.createElement("IMG");
newImage.setAttribute("src",cars[x].thumbnail);
var priceLabel = document.createElement("label");
priceLabel.htmlFor = cars[x].hireprice;
priceLabel.appendChild(document.createTextNode(cars[x].hireprice));
document.matches.appendChild(newRadio);
document.matches.appendChild(newLabel);
document.matches.appendChild(br);
document.matches.appendChild(newImage);
radioCount++
}

if (radioCount>1){
var mess=document.createTextNode("The following car(s) meets your requirements:");
document.matches.insertBefore(mess,document.getElementById("myRadio0"));
document.matches.insertBefore(br,document.getElementById("myRadio0"));
document.getElementById("myRadio0").checked=true;
} else if (radioCount==0){
document.matches.appendChild(document.createTextNode("sorry, we have nothing meeting your requirements"));
}
}


//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)
}
*/

xelawho
04-12-2012, 07:29 PM
it doesn't look right to me, but if you have changed your html in the meantime, too, maybe you can give the whole code?

cstones
04-12-2012, 07:56 PM
Here's my HTML 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_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="" selected="selected"></option>
<option value="daycost" >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>
</form>
<form name="matches">
</form>
<div id="footer">
Reference - <a href="http://www.phpform.org">pForm</a>
</div>
</div>
<img id="bottom" src="bottom.png" alt="">
</body>
</html>


//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 actualmpg=new Array(13, 61, 47, 65, 32, 62, 40, 30, 70, 49);
var mpgrange=new Array (1, 3, 3, 3, 1, 3, 2, 1, 3, 3);
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 thumbnail=new Array("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]
}
}

/*Collects form inputs from user as variables. Loops through per number of radio inputs on the form,
gathering values from those that are checked*/

function submitform(){
//from here
while (document.matches.firstChild) {
document.matches.removeChild(document.matches.firstChild);
}
//to here
var passno = document.hireform.passengers.value;
//var hireprice = document.hireform.element_9.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;
}

if (radios[a].name=='gearbox' && radios[a].checked) {
var gbox = radios[a].value;
}

if (radios[a].name=='aircon' && radios[a].checked) {
var airconditioning = radios[a].value;
}
if (radios[a].name=='MPG' && radios[a].checked) {
var economy = radios[a].value;
}

}

var radioCount=0;

for(var x=0;x<cars.length;x++){
cars[x].display=true;

if (cars[x].passenger<passno){
cars[x].display = false;
}
if (cars[x].luggage<space){
cars[x].display = false;
}
if (cars[x].fuel!=fueltype){
cars[x].display = false;
}
if (cars[x].gearbox!=gbox){
cars[x].display = false;
}
if (cars[x].aircon!=airconditioning){
cars[x].display = false;
}
if (cars[x].mpgrange<economy){
cars[x].display = false;
}

for(var x=0;x<cars.length;x++){
if(cars[x].display == false) {
continue;
}
//need to put some DOM script here to insert car images, h3 tags and price of rental, shows elements based on the count of radio buttons if there are matches.

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));
var newImage = document.createElement("IMG");
newImage.setAttribute("src",cars[x].thumbnail);
//var priceLabel = document.createElement("label");
//priceLabel.htmlFor = cars[x].hireprice;
//priceLabel.appendChild(document.createTextNode(cars[x].hireprice));
document.matches.appendChild(newRadio);
document.matches.appendChild(newLabel);
document.matches.appendChild(br);
document.matches.appendChild(newImage);
radioCount++
}

if (radioCount>1){
var mess=document.createTextNode("The following car(s) meets your requirements:");
document.matches.insertBefore(mess,document.getElementById("myRadio0"));
document.matches.insertBefore(br,document.getElementById("myRadio0"));
document.getElementById("myRadio0").checked=true;
} else if (radioCount==0){
document.matches.appendChild(document.createTextNode("sorry, we have nothing meeting your requirements"));
}
}
}



//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)
}
*/

xelawho
04-12-2012, 11:07 PM
your problem is that you are taking the string value from the select and trying to use it as a variable to access the object property. Try this:


newLabel.appendChild(document.createTextNode(cars[x].name+" "+cars[x][hireprice]));

cstones
04-13-2012, 02:31 AM
Thanks for the advice again, that sorted one issue but has lead to another - Using the method you posted, I'm now trying to take the hire prices that are outputted and put them into a variable which then loops to find the cheapest one - I then want to use DOM to put a tag/highlight the cheapest option for the customer. Here's what I came up with so far but it doesn't appear to work as expected.

Again I appreciate your continued input!


//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 actualmpg=new Array(13, 61, 47, 65, 32, 62, 40, 30, 70, 49);
var mpgrange=new Array (1, 3, 3, 3, 1, 3, 2, 1, 3, 3);
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 thumbnail=new Array("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]
}
}

/*Collects form inputs from user as variables. Loops through per number of radio inputs on the form,
gathering values from those that are checked*/

function submitform(){
//from here
while (document.matches.firstChild) {
document.matches.removeChild(document.matches.firstChild);
}
//to here
var passno = document.hireform.passengers.value;
var hireprice = document.hireform.element_9.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;
}

if (radios[a].name=='gearbox' && radios[a].checked) {
var gbox = radios[a].value;
}

if (radios[a].name=='aircon' && radios[a].checked) {
var airconditioning = radios[a].value;
}
if (radios[a].name=='MPG' && radios[a].checked) {
var economy = radios[a].value;
}

}

var radioCount=0;

for(var x=0;x<cars.length;x++){
cars[x].display=true;

if (cars[x].passenger<passno){
cars[x].display = false;
}
if (cars[x].luggage<space){
cars[x].display = false;
}
if (cars[x].fuel!=fueltype){
cars[x].display = false;
}
if (cars[x].gearbox!=gbox){
cars[x].display = false;
}
if (cars[x].aircon!=airconditioning){
cars[x].display = false;
}
if (cars[x].mpgrange<economy){
cars[x].display = false;
}


for(var x=0;x<cars.length;x++){
if(cars[x].display == false) {
continue;
}
//need to put some DOM script here to insert car images, h3 tags and price of rental, shows elements based on the count of radio buttons if there are matches.


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+"\u00A3"+cars[x][hireprice]));
var newImage = document.createElement("IMG");
newImage.setAttribute("src",cars[x].thumbnail);
document.matches.appendChild(newRadio);
document.matches.appendChild(newLabel);
document.matches.appendChild(br);
document.matches.appendChild(newImage);
radioCount++


if (radioCount>1){
var mess=document.createTextNode("The following car(s) meets your requirements:");
document.matches.insertBefore(mess,document.getElementById("myRadio0"));
document.matches.insertBefore(br,document.getElementById("myRadio0"));
document.getElementById("myRadio0").checked=true;
} else if (radioCount==0){
document.matches.appendChild(document.createTextNode("sorry, we have nothing meeting your requirements"));
}
}

var cheapest = (cars[x][hireprice]);
for (x=1;x>cars.length;x++) {
cheapest = cars[x][hireprice]
}
if (cars[x]=cheapest){
var cheapTag = document.createElement("label");
cheapTag.appendChild(document.createTextNode("This car is the cheapest to hire"));
document.matches.appendChild(cheapTag);
}
}
}



//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)
}
*/

xelawho
04-13-2012, 06:24 AM
I didn't really understand what your two loops are supposed to be doing (particularly with one inside the other) and all that display=false stuff I don't get, either... maybe it has somethinmg to do with the continue but I had to comment that out to get it to work at all, but anyway... this is what I figured (I'm sure there is a fancier way to do it):
- push the prices onto an array
- loop through the displayed cars (this is the bit that I don't get, because the way the code works now all the cars are displayed, always) and if their price matches the lowest price of the array of prices for that selection, highlight the label and add the text.
That bit seems to work, but like I say, I think you're a way off displaying the cars according to the selected criteria...



//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 actualmpg=new Array(13, 61, 47, 65, 32, 62, 40, 30, 70, 49);
var mpgrange=new Array (1, 3, 3, 3, 1, 3, 2, 1, 3, 3);
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 thumbnail=new Array("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]
}
}

/*Collects form inputs from user as variables. Loops through per number of radio inputs on the form,
gathering values from those that are checked*/

function submitform(){
//from here
while (document.matches.firstChild) {
document.matches.removeChild(document.matches.firstChild);
}
//to here
var passno = document.hireform.passengers.value;
var hireprice = document.hireform.element_9.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;
}

if (radios[a].name=='gearbox' && radios[a].checked) {
var gbox = radios[a].value;
}

if (radios[a].name=='aircon' && radios[a].checked) {
var airconditioning = radios[a].value;
}
if (radios[a].name=='MPG' && radios[a].checked) {
var economy = radios[a].value;
}

}

var radioCount=0;
var prices=[];
for(var x=0;x<cars.length;x++){
cars[x].display=true;

if (cars[x].passenger<passno){
cars[x].display = false;
}
if (cars[x].luggage<space){
cars[x].display = false;
}
if (cars[x].fuel!=fueltype){
cars[x].display = false;
}
if (cars[x].gearbox!=gbox){
cars[x].display = false;
}
if (cars[x].aircon!=airconditioning){
cars[x].display = false;
}
if (cars[x].mpgrange<economy){
cars[x].display = false;
}

/*for(var x=0;x<cars.length;x++){
if(cars[x].display == false) {
continue;
}*/
//need to put some DOM script here to insert car images, h3 tags and price of rental, shows elements based on the count of radio buttons if there are matches.

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);
//var priceLabel = document.createElement("label");
//priceLabel.htmlFor = cars[x].hireprice;
//priceLabel.appendChild(document.createTextNode(cars[x].hireprice));
document.matches.appendChild(newRadio);
document.matches.appendChild(newLabel);
document.matches.appendChild(br);
document.matches.appendChild(newImage);
radioCount++
}

for(var a=0;a<cars.length;a++){
if (cars[a][hireprice]===Math.min.apply(Math,prices)){
nextElement(document.getElementById("myRadio"+a)).style.backgroundColor="red";
nextElement(document.getElementById("myRadio"+a)).innerHTML+=" (the cheapest)";
}
}

if (radioCount>1){
var mess=document.createTextNode("The following car(s) meets your requirements:");
document.matches.insertBefore(mess,document.getElementById("myRadio0"));
document.matches.insertBefore(br,document.getElementById("myRadio0"));
document.getElementById("myRadio0").checked=true;
} else if (radioCount==0){
document.matches.appendChild(document.createTextNode("sorry, we have nothing meeting your requirements"));
}
//}
}

function nextElement(el) {
while((el = el.nextSibling) && el.nodeType!== 1);
return el;
}

//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)
}
*/

cstones
04-13-2012, 12:20 PM
What i've tried to do with the criteria loop is this:

All the cars start with a display value of true, the loop then goes through each criteria and say the customer wants cars that hold 2 passengers it will show those that are 2 or greater - it should then move onto the next criteria but if there's nothing been chosen it will simply carry on.

The problem before was having each criteria in the same statement, if any of the criteria were left untouched i.e. an option not selected, the form would produce no output/matches.

I know there's an issue with the != not statements on the fuel, gearbox and airconditioning. I tried to if there is a match == display=true, but it would still show all the cars. So I tried the not comparison, and it works but now you still have to select all the criterias.


for(var x=0;x<cars.length;x++){
cars[x].display=true; //all cars have have a display value of true until the loop for critieria is ran

if (cars[x].passenger<passno){
cars[x].display = false;
}
//if the cars in the array have a larger capacity of passengers than the customer has selected DISPLAY those cars

if (cars[x].luggage<space){
cars[x].display = false;
}
//if the cars in the array have more boot space/luggage capcity than the customer has selected DISPLAY those cars

if (cars[x].fuel!=fueltype){
cars[x].display = false;
}

//etc etc

if (cars[x].gearbox!=gbox){
cars[x].display = false;
}
if (cars[x].aircon!=airconditioning){
cars[x].display = false;
}
if (cars[x].mpgrange<economy){
cars[x].display = false;
}


for(var x=0;x<cars.length;x++){
if(cars[x].display == false) {
continue;
If there are still cars with the display value of false, proceed with the next loop anyway? I believe this is what it's doing
}

xelawho
04-13-2012, 05:17 PM
interesting. if you feel that approach is the way forward, you should pursue it, but to me it seems like you are adding alot of code for very little result. Sometimes I find it useful to put into plain English what I want the code to do and then translate that into javascript. So in this case:

- Have all values default as empty (to reflect the fact that the page starts off without selections made):

var space="";
- If the user does select something, change that value to the selection:

for (var a = 0; a < radios.length; a++) {
if (radios[a].name == 'luggage' && radios[a].checked) {
space = radios[a].value;
}
- once it comes time to loop through the objects, accept anything that meets the criteria OR accept everything if the criteria is not specified:

if (cars[x].luggage>=space||space=="")

Note that with this method you can also have an "I don't care" option with an empty value, which can be handy if people change their mind after making a selection (some browsers don't empty form fields even on page refresh, so you can be stuck choosing one of the options, but can't choose none).

The only place this approach doesn't make sense is with the hire period - the way the code is now, that one has to have a value for the price to show. It seemed sensible to have the default as "daily".

I made another small change, putting the results into a div inside the form instead of into a separate form... I'm guessing that when it comes time to actually submit you will want to submit the whole thing.

Anyway. The below was hobbled together from 3 versions of the code and I changed some of the values around for testing, so you will want to look it over, but to me it seems like it does what it's supposed to do...


<!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_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=new Array("Lamborghini Aventador", "Peugeot 107", "VW Golf", "Toyota Prius", "Kia Sedona", "Citroen 2CV", "Vauxhall Insignia", "Mercedes C180", "Reliant Robin", "Ford Fiesta");
var mpgrange=new Array(1, 3, 3, 3, 1, 3, 2, 1, 3, 3);
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, 25, 115, 243, 25, 90);
var weeklycost=new Array(12000, 135, 167, 183, 162, 124, 173, 560, 65, 130);
var thumbnail=new Array("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);
//var priceLabel = document.createElement("label");
//priceLabel.htmlFor = cars[x].hireprice;
//priceLabel.appendChild(document.createTextNode(cars[x].hireprice));
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;
}



//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)
}*/

</script>
</html>

cstones
04-23-2012, 02:38 PM
I've been playing with the DOM elements of the form and came up with the below - thought I would post the finalised soultion.

I've changed the script that styles the label element which is the cheapest, and also added alot of the DOM elements such as a table and other divs.


//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 actualmpg=new Array(13, 61, 47, 65, 32, 62, 40, 30, 70, 49);
var mpgrange=new Array (1, 3, 3, 3, 1, 3, 2, 1, 3, 3);
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 thumbnail=new Array("Images/aventador.jpg", "Images/peugeot.jpg", "Images/golf.jpg", "Images/prius.jpg", "Images/kia.jpg", "Images/citroen.jpg", "Images/vauxhall.jpg", "Images/merc.jpg", "Images/robin.jpg", "Images/ford.jpg");

var cars = [];
for(var i=0;i<car.length;i++)
{
cars[i] = {
name: car[i],
actualmpg: actualmpg[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],
thumbnail: thumbnail[i]
}
}

/*Collects form inputs from user as variables. Loops through per number of radio inputs on the form,
gathering values from those that are checked*/

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) { //loops until the child of "thediv" is removed/
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 matchCount=0; //sets variable called match count with value of 0
var prices=[]; //sets a variable called prices with an empty array

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])//creates an array of prices based on number of matches found

var discountPrices = cars[x][hireprice]-(cars[x][hireprice]/100)*5;

var br = document.createElement("br");

var carDiv = document.createElement("div");
carDiv.id = "car"+matchCount;
carDiv.name = "car";
carDiv.style.width ="100%";
carDiv.style.marginTop = "15px";

var imgDiv = document.createElement("div");
imgDiv.id = "imageHolder"+matchCount;
imgDiv.style.width = "166px";
imgDiv.style.cssFloat = "left";

var imgThumb = document.createElement("IMG");
imgThumb.id = "car_thumb"+matchCount;
imgThumb.setAttribute("src",cars[x].thumbnail);
imgThumb.style.margin = "5px";

var detailsDiv = document.createElement("div");
detailsDiv.id = "details"+matchCount;
detailsDiv.name = "details";
detailsDiv.style.cssFloat = "left";
detailsDiv.style.marginLeft = "105px";

var carTitle = document.createElement("h2");
carTitle.htmlFor = cars[x].name;
carTitle.appendChild(document.createTextNode(cars[x].name));
carTitle.style.borderBottom = "thin dashed #666666";
carTitle.style.marginTop = "5px";
carTitle.style.marginBottom = "10px";

var specTable = document.createElement("table");
specTable.style.width = "120%";
specTable.style.color = "#666666";
specTable.style.fontSize = "12px";
specTable.style.borderCollapse = "collapse";


var specRow1 = document.createElement("tr");

specSeats = document.createElement("td");
specSeats.appendChild(document.createTextNode("Seats: "+cars[x].passenger));

specLuggage = document.createElement("td");
specLuggage.appendChild(document.createTextNode("Luggage: "+cars[x].luggage));

specEconomy = document.createElement("td");
specEconomy.appendChild(document.createTextNode("Economy: "+cars[x].actualmpg));

var specRow2 = document.createElement("tr");
specGearbox = document.createElement("td");
specGearbox.appendChild(document.createTextNode("Gearbox: "+cars[x].gearbox));

specAircon = document.createElement("td");
specAircon.id = "aircon";
specAircon.appendChild(document.createTextNode("Air-conditioning: "+cars[x].aircon));
//specAircon.appendChild(document.createTextNode("Aircon: "+cars[x].aircon+acIcon));
//document.GetElementById("aircon").innerHTML+="<span><img src=/Images/AirCondition.n /></span>";

specFuel = document.createElement("td");
specFuel.appendChild(document.createTextNode("Fuel Type: "+cars[x].fuel));

var clearDiv = document.createElement("div");
clearDiv.id = "clear";
clearDiv.style.clear = "both";

var priceTable = document.createElement("table");
priceTable.style.color = "#666666";
priceTable.style.fontSize = "15px";
priceTable.style.fontWeight = "bold";
priceTable.style.borderCollapse = "collapse";
priceTable.style.borderTop = "thin solid #00338D";
priceTable.style.marginLeft = "5px";

var priceRow = document.createElement("tr");
priceData1 = document.createElement("td");
priceData1.id = "myMatch"+matchCount;
priceData1.name ="myMatch";
priceData1.appendChild(document.createTextNode("Pay at rental location \u00A3" +cars[x][hireprice]));
priceData1.style.borderRight = "thin solid #00338D";
priceData1.style.paddingRight = "15px";


priceData2 = document.createElement("td");
priceData2.id = "discount_price";
priceData2.appendChild(document.createTextNode("Pay online today \u00A3" +discountPrices));
priceData2.style.borderLeft = "thin solid #00338D";
priceData2.style.paddingLeft = "15px";


//car div holder
thediv.appendChild(carDiv);
thediv.appendChild(br);

//individual car details
carDiv.appendChild(imgDiv);
imgDiv.appendChild(imgThumb);
carDiv.appendChild(detailsDiv);
detailsDiv.appendChild(carTitle);
detailsDiv.appendChild(specTable);
specTable.appendChild(specRow1);
specRow1.appendChild(specSeats);
specRow1.appendChild(specLuggage);
specRow1.appendChild(specEconomy);
specTable.appendChild(specRow2);
specRow2.appendChild(specGearbox);
specRow2.appendChild(specAircon);
specRow2.appendChild(specFuel);

//clear floats
carDiv.appendChild(clearDiv);

//price details
carDiv.appendChild(priceTable);
priceTable.appendChild(priceRow);
priceRow.appendChild(priceData1);
priceTable.appendChild(priceRow);
priceRow.appendChild(priceData2);



matchCount++
}
}

if (matchCount>=1){
var mess=document.createTextNode("The following car(s) meets your requirements:");
thediv.insertBefore(mess,document.getElementById("car0"));
thediv.insertBefore(br,document.getElementById("car0"));
for(var a=0;a<prices.length;a++){
if (prices[a]===Math.min.apply(Math,prices)){

document.getElementById("myMatch"+a).style.color="blue";
document.getElementById("myMatch"+a).style.fontWeight="bold";
document.getElementById("myMatch"+a).innerHTML+=" This is our Cheapest Deal!";

}
}
} else if (matchCount==0){
thediv.appendChild(document.createTextNode("sorry, we have nothing meeting your requirements"));
}
}


//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)
}
*/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum