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.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    onchange problem

    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
    Code:
    <!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" />
    
    	<!-- put java here................................. -->
    	<script type="text/javascript">
    
    		function calculate()
    		{
    			var
    				days = parseInt('0' + document.date.days.value, 10),
    				groupstring, total = 0;
    <!-- 1 day, 2 days, 3 days, 4 days, 5 days, 6 days, 7 days, 28 DaySummer, 28 DayWinter, Excess Amount, excess miles ................................. -->
    			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);
    
    		}
    <!-- DATE DIFFRENCE
    
    function dateDiff() {
    
    t1 = document.date.firstDate.value;
    t2 = document.date.secondDate.value;
    
    var one_day=1000*60*60*24; 
    var x=t1.split("/"); 
    var y=t2.split("/");
    //date format(Fullyear,month,date) 
    var date1=new Date(x[2],(x[1]-1),x[0]);
    var date2=new Date(y[2],(y[1]-1),y[0])
    var month1=x[1]-1;
    var month2=y[1]-1;
    var Diff=Math.ceil((date2.getTime()-date1.getTime())/(one_day)); 
    document.date.days.value = (Diff +" days");;
    }
    // End -->
    
    
    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>
    	<!-- stop java here ................................. -->
    
    	</head>
    	<body>
    
    		<!-- content ................................. -->
    		<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>
    		<!-- /content -->
    
    	</body>
    
    </html>
    Last edited by chrisboots; 01-17-2012 at 06:44 PM.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    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"

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    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.

  • Users who have thanked felgall for this post:

    xelawho (01-17-2012)

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    thanks for the explanation, although it was failing in FF as well...

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,298
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    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.
    Last edited by Philip M; 01-17-2012 at 07:51 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    New Coder
    Join Date
    Jan 2012
    Location
    in the uk.
    Posts
    99
    Thanks
    2
    Thanked 6 Times in 4 Posts
    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,
    Code:
    dateObject = new Date("30 Apr 1960");
    With a time
    Code:
    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
    Code:
    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
    Code:
    <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.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,298
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    cremator - yes, great. But how is your post supposed to relate to the problem raised by chrisboots in this thread?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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