onchange problem

chrisboots

01-17-2012, 05:38 PM

Im new to javascript i know this is pretty simple stuf but i still cant work it.

when the drop down box is changed i need the text box "depo" to change to either £150 or £250 depending on the selection, ive done what i think should do it, but it dosent work( function in bold)

thanks <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" profile="http://gmpg.org/xfn/11">
<head>
<meta http-equiv="Content-Type" content="UTF-8" />
<title>Car Hire Ottershaw | Van Hire Ottershaw | Car Rental | Van Rental </title>
<meta name="keywords" content="Car Hire Ottershaw, Surrey, Van Rental Ottershaw, Van Hire Ottershaw, Car Rental Ottershaw, " />
<link rel="stylesheet" href="layout-ff.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />


<script type="text/javascript">

function calculate()
{
var
days = parseInt('0' + document.date.days.value, 10),
groupstring, total = 0;

switch (document.date.car.value) {
case 'A': groupstring = '2500,5000,7500,10000,12500,12800,13000,45000,42000,25000,10'; break;
case 'B': groupstring = '2650,5300,7950,10600,13250,13500,14500,48000,46000,25000,10'; break;
case 'C': groupstring = '2800,5600,8400,11200,14000,14500,15500,49900,48000,25000,10'; break;
case 'D': groupstring = '2800,5600,8400,11200,14000,14500,15500,49900,48000,25000,10'; break;
case 'E': groupstring = '3000,6000,9000,12000,15000,15500,16500,53500,51000,25000,10'; break;
case 'F': groupstring = '3200,6400,9600,12800,16000,17000,17500,58000,54000,25000,15'; break;
case 'G': groupstring = '3500,7000,10500,14000,17500,19000,20000,62000,59000,25000,15'; break;
case 'H': groupstring = '3800,7600,11400,15200,19000,21500,22500,72000,62000,25000,15'; break;
case 'O': groupstring = '4100,8200,12300,16400,20500,20800,21000,75000,72500,40000,15'; break;
}
groupstring = groupstring.split(',');

if (days > 0 && days < 8) {total = (groupstring[days - 1]); } else
if (days < 29) {total = (groupstring[6] / 7) * days; } else
{total = (groupstring[7] / 28) * days;}

document.date.rentalamount.value = "£" + (Math.round(total) / 100).toFixed(2);

}


function depo(){
if(document.date.car.value=="A")
{
document.date.depo.value="£150.00"
}
if(document.date.car.value=="B")
{
document.date.depo.value="£250.00"
}
if(document.date.car.value=="CD")
{
document.date.depo.value="£150.00"
}
}

</script>


</head>
<body>


<form name="date">
<select name="car" id="car" onchange= "depo()">
<option value="A">Manual Panda / Auto Smart</option>
<option value="B">Manual Clio 3 3Dr or 5 Dr / Manual Picanto</option>
<option value="CD">Manual Rio / Clio 1.2T / Auto Picanto</option>
<option value="E">Manual Venga / Auto Rio</option>
<option value="F">Auto Focus / Cee'd / Manual Megane</option>
<option value="G">Auto Cee'd Estate / Manual Megane Estate</option>
<option value="H">Auto Mondeo</option>
<option value="I">Manual Sportage 2WD</option>
<option value="J">Auto Sportage 4X4</option>
<option value="K">Auto Galaxy / Manual RCZ</option>
<option value="L">Auto Sorento 4X4</option>
<option value="M">Manual Kangoo Van</option>
<option value="O">Manual LWB LL29 Trafic</option>
</select>

<p>start date:</p>
<input type="text" name="firstDate" value="" size="10" maxlength="10">

<p>end date:</p>
<input type="text" name="secondDate" value="" size="10" maxlength="10">

<p>Days:</p>
<input type="text" name="days" />

<p>Price:
<input type="text" name="rentalamount" /></p>
<p>Deposit:
<input type="text" id="depo" name="depo" /></p>
<p>Excess mile price
<input type="text" name="mile" /> </p>

<input type="button" value="Quote" onclick="dateDiff() ;calculate()" />

</form>

<p> GAV: input start and end date as DD/MM/YYYY and press quote, cureently have to press quote twice, im looking into fixing that now</p>


</body>

</html>

xelawho

01-17-2012, 05:58 PM

turns out that calling your function "depo" throws an error (at least in my versions of FF and IE)

it would be nice to have a definitive list of reserved words, if anybody knows of one...

but as to the problem, you can rename the function dePo() and it will work ok, I don't know about the rest of your code. It will help you in future to be more specific about your problem than "it doesn't work" :thumbsup:

felgall

01-17-2012, 06:16 PM

The problem is that depo is being used twice - one as a function name and once as the name of an input field. As Internet Explorer maps all HTML field names to JavaScript variables of the same name the input field overwrites the function in IE. As other browsers do not do that mapping the code should work in all browsers except IE.

It has nothing to do with reserved words unless you consider that you reserved it yourself by specifying name="depo" in the HTML.

xelawho

01-17-2012, 06:27 PM

thanks for the explanation, although it was failing in FF as well...

Philip M

01-17-2012, 06:40 PM

Also note that in Internet Explorer, names and id's are global variables and thus you should NEVER use a global variable or function name which is the same as an HTML element name or id. Example:-

<input id = "text">

<script type = "text/javascript">
text = "Hello World"; // global variable
document.getElementById('text').value = text;
</script>

Even if duplicate names does not conflict in other browsers, it is very poor coding practice to use the same name/id for two different things.

Cremator

01-29-2012, 08:00 PM

I would like to point out that the Date() object is also able to determine a date / time reference from a string object and in many cases help simplify scripts.

For example,
dateObject = new Date("30 Apr 1960");

With a time
dateObject = new Date("1960/04/30 10:45:00");
alert( dateObject.toUTCString() );
which outputs an alert Sat, 30 Apr 1960 09:45:00 GMT, the hour difference must be something to do with DLS.

So with a bit of a tweak you can do something like this
function dateDiff() {
var obj = document.date;
var t1 = obj.firstDate.value.split("/").reverse().join("/");
var t2 = obj.secondDate.value.split("/").reverse().join("/");
// now get the date difference
var Diff = Math.ceil(( new Date(t2).getTime() - new Date(t1).getTime() )/86400000);
obj.days.value = ( Diff +" days");
}
which will also mean that you can pass dates like 28/oct/2012 if you increase the maxlength value in the input fields to allow an extra character <input type="text" name="firstDate" value="" size="10" maxlength="11">

With a bit of adaptation you can use times as well to judge how many hours of the day a returning vehicle is over.

Philip M

01-30-2012, 08:02 AM

cremator - yes, great. But how is your post supposed to relate to the problem raised by chrisboots in this thread?