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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Calculation field not working right

    Can someone PLEASE show me what I am doing wrong with my code here?

    Basically, I have a registration form. In this registration form, I have 4 people register. It depends on each person birthyear to determine the amount of fees for each person.

    The fees are: Registration Fee, Hotel Fee, Meal Fee, Discount

    Also, the trick is only first and second persons get Hotel Fee and Discount Fee. Third and Fourth person only pay Registration Fee and Meal Fee.

    So when user select birthyear from a dropdown menu for each person, the fees will be automatically filled in the input fields for each person and then do a total calculation.

    Each person will have a total of fees and there is another total field to automatically total up all 4 total fields from those 4 people.

    So here is my code so far

    Javascript
    Code:
    <script type="text/javascript">
    			function doUpdate(year, num)
    			{
    				if (isNaN(year)) return;
    				var regfee = '0';
    				var meal = '0';
    				var hotel = '0';
    //REGISTRATION Price
    				if (year >= 2000)
    					{
    						regfee = '0';
    					}
    				else if (year < 2000 && year > 1995 )
    					{
    						regfee = '20';
    					}
    				else
    					{
    						regfee = '30';
    					}
    //MEAL Price
    				if (year < 2001)
    					{
    						meal = '80';
    					}
    				else if (year >= 2001 && year <= 2009)
    					{
    						meal = '60';
    					}
    				else
    					{
    						meal = '0';
    					}
    // HOTEL Price
    				if(document.getElementById('year1').value!='')
    					{
    					hotel='199';
    					}
    				else if (document.getElementById('year2').value!='')
    					{
    					hotel='199';
    					}
    				
    //DISCOUNT Price
    				if (document.getElementById('vip'+num).checked==true)
    					{
    						if (year > 1993)
    						{
    						discount = '0';
    						}
    						else if (year == 1993)
    						{
    						discount = '0';
    						}
    						else
    						{
    						discount = '-20';
    						}
    					}
    					else 
    					{
    						if (year > 1993)
    						{
    						discount = '0';
    						}
    						else if (year == 1993)
    						{
    						discount = '0';
    						}
    						else
    						{
    						discount = '-10';
    						}
    					
    					}
    				
    
    
    				document.getElementById('regfee' + num).value = regfee;
    				document.getElementById('meal' + num).value = meal;
    				
    				if(document.getElementById('year1').value!=''){
    				
    				document.getElementById('hotel1').value = hotel;
    				document.getElementById('discount1').value = discount;
    
                                    //Write to total field for second person
    				document.getElementById('total1').value = parseInt(regfee)+parseInt(meal)+parseInt(hotel)+parseInt(discount); 
    				}
    				if(document.getElementById('year2').value!=''){
    				document.getElementById('hotel2').value = hotel;
    				document.getElementById('discount2').value = discount;
                                    
                                   //Write to total field for second person
    				document.getElementById('total2').value = parseInt(regfee)+parseInt(meal)+parseInt(hotel)+parseInt(discount); 
    				}
    				if(document.getElementById('year3').value!='' && document.getElementById('year4').value!=''){
    				document.getElementById('hotel3').value == '0';
    				document.getElementById('discount3').value == '0';
    				document.getElementById('hotel4').value == '0';
    				document.getElementById('discount4').value == '0';
                                    
                                   // Write to total fields for third and fourth person
    				document.getElementById('total3').value = parseInt(regfee)+parseInt(meal); 
    				document.getElementById('total4').value = parseInt(regfee)+parseInt(meal); 
    				}
    				
    // Write to subtotal field by sum up all 4 total fields				 	
    document.getElementById('subtotal1').value = parseInt(document.getElementById('total1').value) + parseInt(document.getElementById('total2').value) + parseInt(document.getElementById('total3').value) + parseInt(document.getElementById('total4').value); 	
    		}
    
    		</script>
    and here is my form
    Code:
    <form action="form.html" method="post" class="js_submit" name="form1" id="form1">
    <table>
    <tr>
    <td>VIP</td>
    <td>Birthyear</td>
    <td>Registration Fee</td>
    <td>Hotel Fee</td>
    <td>Meal Fee</td>
    <td>Discount</td>
    <td>Total</td>
    </tr>
    <!-----------First Persion ------------------->
    <tr>
    <td><input type="checkbox" name="vip1" id="vip1" value="Y" class="inpt_c"  /></td>
    <td><select name="year1" id="year1" onchange='doUpdate(this.value * 1,1);'>
    <option selected="selected"></option>
    <option value="2011">2011<option>
    <option value="2010">2010</option>
    <option value="2009">2009</option>
    <option value="2008">2008</option>
    <option value="2007">2007</option>
    <option value="2006">2006</option>
    <option value="2005">2005</option>
    <option value="2004">2004</option>
    <option value="2003">2003</option>
    <option value="2002">2002</option>
    <option value="2001">2001</option>
    <option value="2000">2000</option>
    <option value="1999">1999</option>
    <option value="1998">1998</option>
    <option value="1997">1997</option>
    <option value="1996">1996</option>
    <option value="1995">1995</option>
    <option value="1994">1994</option>
    <option value="1993">1993</option>
    <option value="1992">1992</option>
    <option value="1991">1991</option>
    <option value="1990">1990</option>
    <option value="1989">1989</option>
    <option value="1988">1988</option>
    <option value="1987">1987</option>
    <option value="1986">1986</option>
    <option value="1985">1985</option>
    <option value="1984">1984</option>
    <option value="1983">1983</option>
    <option value="1982">1982</option>
    <option value="1981">1981</option>                                                                                                    
    </select></td>
    <td><input type="text" id="regfee1" name="regfee1" class="inpt_a" value=""/></td>
    <td><input type="text" value="" id="hotel1" name="hotel1" class="inpt_a" /></td>
    <td><input type="text" value="" id="meal1" name="meal1" class="inpt_a" /></td>
    <td><input type="text" value="" id="discount1" name="discount1" class="inpt_a"/></td>
    <td><input type="text" value="" id="total1" name="total1" class="inpt_a" /></td>
    </tr>
    <!------------Second Person ----------------->
    <tr>
    <td><input type="checkbox" name="vip2" id="vip2" value="Y" class="inpt_c"  /></td>
    <td><select name="year2" id="year2" onchange='doUpdate(this.value * 1,2);'>
    <option selected="selected"></option>
    <option value="2011">2011<option>
    <option value="2010">2010</option>
    <option value="2009">2009</option>
    <option value="2008">2008</option>
    <option value="2007">2007</option>
    <option value="2006">2006</option>
    <option value="2005">2005</option>
    <option value="2004">2004</option>
    <option value="2003">2003</option>
    <option value="2002">2002</option>
    <option value="2001">2001</option>
    <option value="2000">2000</option>
    <option value="1999">1999</option>
    <option value="1998">1998</option>
    <option value="1997">1997</option>
    <option value="1996">1996</option>
    <option value="1995">1995</option>
    <option value="1994">1994</option>
    <option value="1993">1993</option>
    <option value="1992">1992</option>
    <option value="1991">1991</option>
    <option value="1990">1990</option>
    <option value="1989">1989</option>
    <option value="1988">1988</option>
    <option value="1987">1987</option>
    <option value="1986">1986</option>
    <option value="1985">1985</option>
    <option value="1984">1984</option>
    <option value="1983">1983</option>
    <option value="1982">1982</option>
    <option value="1981">1981</option>                                                                                                    
    </select></td>
    <td><input type="text" id="regfee2" name="regfee2" class="inpt_a" value=""/></td>
    <td><input type="text" value="" id="hotel2" name="hotel2" class="inpt_a" /></td>
    <td><input type="text" value="" id="meal2" name="meal2" class="inpt_a" /></td>
    <td><input type="text" value="" id="discount2" name="discount2" class="inpt_a"/></td>
    <td><input type="text" value="" id="total2" name="total2" class="inpt_a" /></td>
    </tr>
    <!-----------Third Person ------------------->
    <tr>
    <td><input type="checkbox" name="vip3" id="vip3" value="Y" class="inpt_c"  /></td>
    <td><select name="year3" id="year3" onchange='doUpdate(this.value * 1,3);'>
    <option selected="selected"></option>
    <option value="2011">2011<option>
    <option value="2010">2010</option>
    <option value="2009">2009</option>
    <option value="2008">2008</option>
    <option value="2007">2007</option>
    <option value="2006">2006</option>
    <option value="2005">2005</option>
    <option value="2004">2004</option>
    <option value="2003">2003</option>
    <option value="2002">2002</option>
    <option value="2001">2001</option>
    <option value="2000">2000</option>
    <option value="1999">1999</option>
    <option value="1998">1998</option>
    <option value="1997">1997</option>
    <option value="1996">1996</option>
    <option value="1995">1995</option>
    <option value="1994">1994</option>
    <option value="1993">1993</option>
    <option value="1992">1992</option>
    <option value="1991">1991</option>
    <option value="1990">1990</option>
    <option value="1989">1989</option>
    <option value="1988">1988</option>
    <option value="1987">1987</option>
    <option value="1986">1986</option>
    <option value="1985">1985</option>
    <option value="1984">1984</option>
    <option value="1983">1983</option>
    <option value="1982">1982</option>
    <option value="1981">1981</option>                                                                                                    
    </select></td>
    <td><input type="text" id="regfee3" name="regfee3" class="inpt_a" value=""/></td>
    <td><input type="text" value="" id="hotel3" name="hotel3" class="inpt_a" /></td>
    <td><input type="text" value="" id="meal3" name="meal3" class="inpt_a" /></td>
    <td><input type="text" value="" id="discount3" name="discount3" class="inpt_a"/></td>
    <td><input type="text" value="" id="total3" name="total3" class="inpt_a" /></td>
    </tr>
    <!----------Fourth Person -------------------->
    <tr>
    <td><input type="checkbox" name="vip4" id="vip4" value="Y" class="inpt_c"  /></td>
    <td><select name="year1" id="year1" onchange='doUpdate(this.value * 1,4);'>
    <option selected="selected"></option>
    <option value="2011">2011<option>
    <option value="2010">2010</option>
    <option value="2009">2009</option>
    <option value="2008">2008</option>
    <option value="2007">2007</option>
    <option value="2006">2006</option>
    <option value="2005">2005</option>
    <option value="2004">2004</option>
    <option value="2003">2003</option>
    <option value="2002">2002</option>
    <option value="2001">2001</option>
    <option value="2000">2000</option>
    <option value="1999">1999</option>
    <option value="1998">1998</option>
    <option value="1997">1997</option>
    <option value="1996">1996</option>
    <option value="1995">1995</option>
    <option value="1994">1994</option>
    <option value="1993">1993</option>
    <option value="1992">1992</option>
    <option value="1991">1991</option>
    <option value="1990">1990</option>
    <option value="1989">1989</option>
    <option value="1988">1988</option>
    <option value="1987">1987</option>
    <option value="1986">1986</option>
    <option value="1985">1985</option>
    <option value="1984">1984</option>
    <option value="1983">1983</option>
    <option value="1982">1982</option>
    <option value="1981">1981</option>                                                                                                    
    </select></td>
    <td><input type="text" id="regfee4" name="regfee4" class="inpt_a" value=""/></td>
    <td><input type="text" value="" id="hotel4" name="hotel4" class="inpt_a" /></td>
    <td><input type="text" value="" id="meal4" name="meal4" class="inpt_a" /></td>
    <td><input type="text" value="" id="discount4" name="discount4" class="inpt_a"/></td>
    <td><input type="text" value="" id="total4" name="total4" class="inpt_a" /></td>
    </tr>
    <!------------Subtotal of all 4 totals above ------------>
    <tr>
    <td colspan="6"> <input name="subtotal1" type="text" id="subtotal1" class="inpt_a" value="" readonly="readonly"  /></td>
    </tr>
    </form>
    Here is my form URL: http://daihoibaptit.org/form.html

    Thanks for your help

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    DELETE

    Code:
    // Write to total fields for third and fourth person
    				document.getElementById('total3').value = parseInt(regfee)+parseInt(meal); 
    				document.getElementById('total4').value = parseInt(regfee)+parseInt(meal); 
    				}
    And replace by:-

    Code:
    // Write to total fields for third and fourth person
    if(document.getElementById('year3').value!='') {
    document.getElementById('total3').value = parseInt(regfee)+parseInt(meal); 
    }
    if(document.getElementById('year4').value!='') {
    document.getElementById('total4').value = parseInt(regfee)+parseInt(meal); 
    }
    Change as indicated

    Code:
    <!----------Fourth Person -------------------->
    <tr>
    <td><input type="checkbox" name="vip4" id="vip4" value="Y" class="inpt_c"  /></td>
    <td><select name="year4" id="year4" onchange='doUpdate(this.value * 1,4);'>
    Then it appears to work.

    You are defining the values as strings regfee = '20'; and so on, but they are in fact numbers (no quotes). Remove the quotes and then you will not need to use parseInt() to convert them back into numbers. That will save quite a lot of useless code!

    “A man ceases to be a beginner in any given science and becomes a master in that science when he has learned that he is going to be a beginner all his life.” Robin G. Collingwood (English Philosopher, 1889-1943)
    Last edited by Philip M; 01-13-2012 at 03:59 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.

  • #3
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    I'm sure your answer quite is correct. Let's hope the OP checks all the places he squirted the same queston.

    http://forums.devshed.com/javascript...ht-876552.html

    http://www.webdeveloper.com/forum/sh...d.php?t=255568

    http://www.sitepoint.com/forums/show...-working-right

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    chichai -

    If you post in multiple forums you will find that you may not get an answer in any of them. People do not want to waste time answering a question when it has perhaps already been answered elsewhere.
    There are few things in forums more irritating than taking the time to unsnarl someone's markup, javascript and css, figure out the fix, and post it only to find you've wasted your time because a duplicate post in another forum has already been answered.

    You were lucky on this occasion, but in future you will be ignored here if you post in multiple forums.

    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.

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,301
    Thanks
    23
    Thanked 612 Times in 611 Posts
    I grabbed the code from the site chichai gave us. I liked working on this even if good answers were already given.
    This is not to say anybody here was wrong. It's just what I found working on the code. I also tried to simplify it.
    Missing the </table> tag
    All 4 <option value="2011">2011<option> are missing a / in end tag.

    Had a bad time on the Discounts. You use discount = 'whatever'; and this is used in the First Person and Second Person areas, so when the discount is changed by checking the box it changes both.

    I simplified and if you do come back here for an answer and have questions Just Ask.

    The new code:
    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>
    <title>Functions</title>
    <script type="text/javascript">
    
    function doUpdate(year, num)
    {
    	var regfee = '0';
    	var discount = '0';
    	var meal = '0';
    	var hotel = '0';
    	var subtotal1 = '0';
    	var subtotal2 = '0';
    	var subtotal3 = '0';
    	var subtotal4 = '0';
    	var total = '0';
    //REGISTRATION Price
    	if (year < 2000 && year > 1995 )
    	{
    		regfee = '20';
    	}
    	if (year <= 1995)
    	{
    		regfee = '30';
    	}
    //MEAL Price
    	if (year < 2001)
    	{
    		meal = '80';
    	}
    	else if (year >= 2001 && year <= 2009)
    	{
    		meal = '60';
    	}
    
    	document.getElementById('regfee' + num).value = regfee;
    	document.getElementById('meal' + num).value = meal;
    	if(num == '1')
    	{
    		document.getElementById('hotel1').value = '199';
    		((document.getElementById('vip1').checked) && (year < 1993)) ? b='-20' : b='-10';
    		document.getElementById('discount1').value = b;
    		//Write to total field for second person
    		document.getElementById('total1').value = Number('199') + Number(b);
    	}
    	if(num == '2')
    	{
    		document.getElementById('hotel2').value = '199';
    		((document.getElementById('vip2').checked) && (year < 1993)) ? b2='-20' : b2='-10';
    		document.getElementById('discount2').value = b2;
    	     //Write to total field for second person
    		document.getElementById('total2').value = Number('199') + Number(b2);
    	}
    	if(num == '3')
    	{
    		document.getElementById('hotel3').value = '0';
    		document.getElementById('discount3').value = '0';
    		subtotal3 = Number(regfee)+Number(meal);
    		document.getElementById('total3').value = subtotal3;
    	}
    	if(num == '4')
    	{
    		document.getElementById('hotel4').value = '0';
    		document.getElementById('discount4').value = '0';
    		subtotal4 = Number(regfee)+Number(meal);
    		document.getElementById('total4').value = subtotal4;
    	}
    
    	document.getElementById('total').value = Number(document.getElementById('total1').value)
    	+ Number(document.getElementById('total2').value)
    	+ Number(document.getElementById('total3').value)
    	+ Number(document.getElementById('total4').value);
    }
    
    </script>
    </head>
    
    <body>
    <form action="form.html" method="post" class="js_submit" id="form1">
    	<table>
    	<tr>
    		<td>VIP</td>
    		<td>Birthyear</td>
    		<td>Registration Fee</td>
    		<td>Hotel Fee</td>
    		<td>Meal Fee</td>
    		<td>Discount</td>
    		<td>Total</td>
    	</tr>
    	<!-----------First Person ------------------->
    	<tr>
    		<td><input type="checkbox" name="vip1" id="vip1" value="Y" class="inpt_c"  /></td>
    		<td>
    			<select name="year1" id="year1" onchange="doUpdate(this.value,'1');">
    				<option selected="selected"></option>
    				<option value="2011">2011</option>
    				<option value="2010">2010</option>
    				<option value="2009">2009</option>
    				<option value="2008">2008</option>
    				<option value="2007">2007</option>
    				<option value="2006">2006</option>
    				<option value="2005">2005</option>
    				<option value="2004">2004</option>
    				<option value="2003">2003</option>
    				<option value="2002">2002</option>
    				<option value="2001">2001</option>
    				<option value="2000">2000</option>
    				<option value="1999">1999</option>
    				<option value="1998">1998</option>
    				<option value="1997">1997</option>
    				<option value="1996">1996</option>
    				<option value="1995">1995</option>
    				<option value="1994">1994</option>
    				<option value="1993">1993</option>
    				<option value="1992">1992</option>
    				<option value="1991">1991</option>
    				<option value="1990">1990</option>
    				<option value="1989">1989</option>
    				<option value="1988">1988</option>
    				<option value="1987">1987</option>
    				<option value="1986">1986</option>
    				<option value="1985">1985</option>
    				<option value="1984">1984</option>
    				<option value="1983">1983</option>
    				<option value="1982">1982</option>
    				<option value="1981">1981</option>
    			</select>
    		</td>
    		<td><input type="text" id="regfee1" name="regfee1" class="inpt_a" value=""/></td>
    		<td><input type="text" value="" id="hotel1" name="hotel1" class="inpt_a" /></td>
    		<td><input type="text" value="" id="meal1" name="meal1" class="inpt_a" /></td>
    		<td><input type="text" value="" id="discount1" name="discount1" class="inpt_a"/></td>
    		<td><input type="text" value="" id="total1" name="total1" class="inpt_a" /></td>
    	</tr>
    	<!------------Second Person ----------------->
    	<tr>
    	<td><input type="checkbox" name="vip2" id="vip2" value="Y" class="inpt_c"  /></td>
    	<td>
    		<select name="year2" id="year2" onchange='doUpdate(this.value,"2");'>
    			<option selected="selected"></option>
    			<option value="2011">2011</option>
    			<option value="2010">2010</option>
    			<option value="2009">2009</option>
    			<option value="2008">2008</option>
    			<option value="2007">2007</option>
    			<option value="2006">2006</option>
    			<option value="2005">2005</option>
    			<option value="2004">2004</option>
    			<option value="2003">2003</option>
    			<option value="2002">2002</option>
    			<option value="2001">2001</option>
    			<option value="2000">2000</option>
    			<option value="1999">1999</option>
    			<option value="1998">1998</option>
    			<option value="1997">1997</option>
    			<option value="1996">1996</option>
    			<option value="1995">1995</option>
    			<option value="1994">1994</option>
    			<option value="1993">1993</option>
    			<option value="1992">1992</option>
    			<option value="1991">1991</option>
    			<option value="1990">1990</option>
    			<option value="1989">1989</option>
    			<option value="1988">1988</option>
    			<option value="1987">1987</option>
    			<option value="1986">1986</option>
    			<option value="1985">1985</option>
    			<option value="1984">1984</option>
    			<option value="1983">1983</option>
    			<option value="1982">1982</option>
    			<option value="1981">1981</option>
    		</select>
    	</td>
    	<td><input type="text" value="" id="regfee2" name="regfee2" class="inpt_a" /></td>
    	<td><input type="text" value="" id="hotel2" name="hotel2" class="inpt_a" /></td>
    	<td><input type="text" value="" id="meal2" name="meal2" class="inpt_a" /></td>
    	<td><input type="text" value="" id="discount2" name="discount2" class="inpt_a"/></td>
    	<td><input type="text" value="" id="total2" name="total2" class="inpt_a" /></td>
    	</tr>
    	<!-----------Third Person ------------------->
    	<tr>
    	<td><input type="checkbox" name="vip3" id="vip3" value="Y" class="inpt_c"  /></td>
    	<td>
    		<select name="year3" id="year3" onchange='doUpdate(this.value,"3");'>
    			<option selected="selected"></option>
    			<option value="2011">2011</option>
    			<option value="2010">2010</option>
    			<option value="2009">2009</option>
    			<option value="2008">2008</option>
    			<option value="2007">2007</option>
    			<option value="2006">2006</option>
    			<option value="2005">2005</option>
    			<option value="2004">2004</option>
    			<option value="2003">2003</option>
    			<option value="2002">2002</option>
    			<option value="2001">2001</option>
    			<option value="2000">2000</option>
    			<option value="1999">1999</option>
    			<option value="1998">1998</option>
    			<option value="1997">1997</option>
    			<option value="1996">1996</option>
    			<option value="1995">1995</option>
    			<option value="1994">1994</option>
    			<option value="1993">1993</option>
    			<option value="1992">1992</option>
    			<option value="1991">1991</option>
    			<option value="1990">1990</option>
    			<option value="1989">1989</option>
    			<option value="1988">1988</option>
    			<option value="1987">1987</option>
    			<option value="1986">1986</option>
    			<option value="1985">1985</option>
    			<option value="1984">1984</option>
    			<option value="1983">1983</option>
    			<option value="1982">1982</option>
    			<option value="1981">1981</option>
    		</select>
    	</td>
    	<td><input type="text" id="regfee3" name="regfee3" class="inpt_a" value=""/></td>
    	<td><input type="text" value="" id="hotel3" name="hotel3" class="inpt_a" /></td>
    	<td><input type="text" value="" id="meal3" name="meal3" class="inpt_a" /></td>
    	<td><input type="text" value="" id="discount3" name="discount3" class="inpt_a"/></td>
    	<td><input type="text" value="" id="total3" name="total3" class="inpt_a" /></td>
    	</tr>
    	<!----------- Fourth Person ------------------->
    	<tr>
    	<td>
    		<input type="checkbox" name="vip4" id="vip4" value="Y" class="inpt_c"  />
    	</td>
    	<td>
    	<select name="year4" id="year4" onchange='doUpdate(this.value,"4");'>
    		<option selected="selected"></option>
    		<option value="2011">2011</option>
    		<option value="2010">2010</option>
    		<option value="2009">2009</option>
    		<option value="2008">2008</option>
    		<option value="2007">2007</option>
    		<option value="2006">2006</option>
    		<option value="2005">2005</option>
    		<option value="2004">2004</option>
    		<option value="2003">2003</option>
    		<option value="2002">2002</option>
    		<option value="2001">2001</option>
    		<option value="2000">2000</option>
    		<option value="1999">1999</option>
    		<option value="1998">1998</option>
    		<option value="1997">1997</option>
    		<option value="1996">1996</option>
    		<option value="1995">1995</option>
    		<option value="1994">1994</option>
    		<option value="1993">1993</option>
    		<option value="1992">1992</option>
    		<option value="1991">1991</option>
    		<option value="1990">1990</option>
    		<option value="1989">1989</option>
    		<option value="1988">1988</option>
    		<option value="1987">1987</option>
    		<option value="1986">1986</option>
    		<option value="1985">1985</option>
    		<option value="1984">1984</option>
    		<option value="1983">1983</option>
    		<option value="1982">1982</option>
    		<option value="1981">1981</option>
    	</select></td>
    	<td><input type="text" id="regfee4" name="regfee4" class="inpt_a" value=""/></td>
    	<td><input type="text" value="" id="hotel4" name="hotel4" class="inpt_a" /></td>
    	<td><input type="text" value="" id="meal4" name="meal4" class="inpt_a" /></td>
    	<td><input type="text" value="" id="discount4" name="discount4" class="inpt_a"/></td>
    	<td><input type="text" value="" id="total4" name="total4" class="inpt_a" /></td>
    	</tr>
    	<!------------Subtotal of all 4 totals above ------------>
    	<tr>
    	<td colspan="6"> <input name="total" type="text" id="total" class="inpt_a" value="" readonly="readonly"  /></td>
    	</tr>
    	</table>
    </form>
    
    </body>
    </html>

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    sunfighter - did you see my comment:-

    You are defining the values as strings regfee = '20'; and so on, but they are in fact numbers (no quotes). Remove the quotes and then you will not need to use parseInt() or Number() to convert them back into numbers. That will save quite a lot of useless code!

    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.

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,301
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Sorry Philip, I did not see that in your remarks. I just did a fast glance. Thank you for that. I shall go over the code again for my own satisfaction and repost, but I don't think he/she will be back. So many people never come back and he didn't get a complete answer on those sites either.

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,301
    Thanks
    23
    Thanked 612 Times in 611 Posts
    @Philip did as you said, I normally don't put quotes around numbers. I still had to use the Number() because I like to see the TOTAL changes as people enter values. If there is an easier way of doing that, please let me know.

    Final code:
    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>
    <title>Functions</title>
    <script type="text/javascript">
    
    function doUpdate(year, num)
    {
    	var regfee = 0;
    	var discount = 0;
    	var meal = 0;
    	var hotel = 0;
    //REGISTRATION Price
    	if (year < 2000 && year > 1995 )
    	{
    		regfee = 20;
    	}
    	if (year <= 1995)
    	{
    		regfee = 30;
    	}
    //MEAL Price
    	if (year < 2001)
    	{
    		meal = 80;
    	}
    	else if (year >= 2001 && year <= 2009)
    	{
    		meal = 60;
    	}
    
    	document.getElementById('regfee' + num).value = regfee;
    	document.getElementById('meal' + num).value = meal;
    	if(num == 1)
    	{
    		document.getElementById('hotel1').value = 199;
    		((document.getElementById('vip1').checked) && (year < 1993)) ? b=-20 : b=-10;
    		document.getElementById('discount1').value = b;
    		//Write to total field for second person
    		document.getElementById('total1').value = 199 + b;
    		sum_1 = 199 + b;
    	}
    	if(num == 2)
    	{
    		document.getElementById('hotel2').value = 199;
    		((document.getElementById('vip2').checked) && (year < 1993)) ? b2=-20 : b2=-10;
    		document.getElementById('discount2').value = b2;
    	     //Write to total field for second person
    		document.getElementById('total2').value = 199 + b2;
    		sum_2 = 199 + b2;
    	}
    	if(num == 3)
    	{
    		document.getElementById('hotel3').value = 0;
    		document.getElementById('discount3').value = 0;
    		document.getElementById('total3').value = regfee + meal;
    		sum_3= regfee + meal;
    	}
    	if(num == 4)
    	{
    		document.getElementById('hotel4').value = 0;
    		document.getElementById('discount4').value = 0;
    		document.getElementById('total4').value = regfee + meal;
    		sum_4= regfee + meal;
    	}
    	document.getElementById('total').value = Number(document.getElementById('total1').value)
    	+ Number(document.getElementById('total2').value)
    	+ Number(document.getElementById('total3').value)
    	+ Number(document.getElementById('total4').value);
    	// Use the line below and delete the 4 lines above if you do not want to see the total
    	// as you add guests but only after all have entered their information
    	//document.getElementById('total').value = sum_1 + sum_2 + sum_3 + sum_4;
    }
    
    </script>
    </head>
    
    <body>
    <form action="form.html" method="post" class="js_submit" id="form1">
    	<table>
    	<tr>
    		<td>VIP</td>
    		<td>Birthyear</td>
    		<td>Registration Fee</td>
    		<td>Hotel Fee</td>
    		<td>Meal Fee</td>
    		<td>Discount</td>
    		<td>Total</td>
    	</tr>
    	<!-----------First Person ------------------->
    	<tr>
    		<td><input type="checkbox" name="vip1" id="vip1" value="Y" class="inpt_c"  /></td>
    		<td>
    			<select name="year1" id="year1" onchange="doUpdate(this.value,'1');">
    				<option selected="selected"></option>
    				<option value="2011">2011</option>
    				<option value="2010">2010</option>
    				<option value="2009">2009</option>
    				<option value="2008">2008</option>
    				<option value="2007">2007</option>
    				<option value="2006">2006</option>
    				<option value="2005">2005</option>
    				<option value="2004">2004</option>
    				<option value="2003">2003</option>
    				<option value="2002">2002</option>
    				<option value="2001">2001</option>
    				<option value="2000">2000</option>
    				<option value="1999">1999</option>
    				<option value="1998">1998</option>
    				<option value="1997">1997</option>
    				<option value="1996">1996</option>
    				<option value="1995">1995</option>
    				<option value="1994">1994</option>
    				<option value="1993">1993</option>
    				<option value="1992">1992</option>
    				<option value="1991">1991</option>
    				<option value="1990">1990</option>
    				<option value="1989">1989</option>
    				<option value="1988">1988</option>
    				<option value="1987">1987</option>
    				<option value="1986">1986</option>
    				<option value="1985">1985</option>
    				<option value="1984">1984</option>
    				<option value="1983">1983</option>
    				<option value="1982">1982</option>
    				<option value="1981">1981</option>
    			</select>
    		</td>
    		<td><input type="text" id="regfee1" name="regfee1" class="inpt_a" value=""/></td>
    		<td><input type="text" value="" id="hotel1" name="hotel1" class="inpt_a" /></td>
    		<td><input type="text" value="" id="meal1" name="meal1" class="inpt_a" /></td>
    		<td><input type="text" value="" id="discount1" name="discount1" class="inpt_a"/></td>
    		<td><input type="text" value="" id="total1" name="total1" class="inpt_a" /></td>
    	</tr>
    	<!------------Second Person ----------------->
    	<tr>
    	<td><input type="checkbox" name="vip2" id="vip2" value="Y" class="inpt_c"  /></td>
    	<td>
    		<select name="year2" id="year2" onchange='doUpdate(this.value,"2");'>
    			<option selected="selected"></option>
    			<option value="2011">2011</option>
    			<option value="2010">2010</option>
    			<option value="2009">2009</option>
    			<option value="2008">2008</option>
    			<option value="2007">2007</option>
    			<option value="2006">2006</option>
    			<option value="2005">2005</option>
    			<option value="2004">2004</option>
    			<option value="2003">2003</option>
    			<option value="2002">2002</option>
    			<option value="2001">2001</option>
    			<option value="2000">2000</option>
    			<option value="1999">1999</option>
    			<option value="1998">1998</option>
    			<option value="1997">1997</option>
    			<option value="1996">1996</option>
    			<option value="1995">1995</option>
    			<option value="1994">1994</option>
    			<option value="1993">1993</option>
    			<option value="1992">1992</option>
    			<option value="1991">1991</option>
    			<option value="1990">1990</option>
    			<option value="1989">1989</option>
    			<option value="1988">1988</option>
    			<option value="1987">1987</option>
    			<option value="1986">1986</option>
    			<option value="1985">1985</option>
    			<option value="1984">1984</option>
    			<option value="1983">1983</option>
    			<option value="1982">1982</option>
    			<option value="1981">1981</option>
    		</select>
    	</td>
    	<td><input type="text" value="" id="regfee2" name="regfee2" class="inpt_a" /></td>
    	<td><input type="text" value="" id="hotel2" name="hotel2" class="inpt_a" /></td>
    	<td><input type="text" value="" id="meal2" name="meal2" class="inpt_a" /></td>
    	<td><input type="text" value="" id="discount2" name="discount2" class="inpt_a"/></td>
    	<td><input type="text" value="" id="total2" name="total2" class="inpt_a" /></td>
    	</tr>
    	<!-----------Third Person ------------------->
    	<tr>
    	<td><input type="checkbox" name="vip3" id="vip3" value="Y" class="inpt_c"  /></td>
    	<td>
    		<select name="year3" id="year3" onchange='doUpdate(this.value,"3");'>
    			<option selected="selected"></option>
    			<option value="2011">2011</option>
    			<option value="2010">2010</option>
    			<option value="2009">2009</option>
    			<option value="2008">2008</option>
    			<option value="2007">2007</option>
    			<option value="2006">2006</option>
    			<option value="2005">2005</option>
    			<option value="2004">2004</option>
    			<option value="2003">2003</option>
    			<option value="2002">2002</option>
    			<option value="2001">2001</option>
    			<option value="2000">2000</option>
    			<option value="1999">1999</option>
    			<option value="1998">1998</option>
    			<option value="1997">1997</option>
    			<option value="1996">1996</option>
    			<option value="1995">1995</option>
    			<option value="1994">1994</option>
    			<option value="1993">1993</option>
    			<option value="1992">1992</option>
    			<option value="1991">1991</option>
    			<option value="1990">1990</option>
    			<option value="1989">1989</option>
    			<option value="1988">1988</option>
    			<option value="1987">1987</option>
    			<option value="1986">1986</option>
    			<option value="1985">1985</option>
    			<option value="1984">1984</option>
    			<option value="1983">1983</option>
    			<option value="1982">1982</option>
    			<option value="1981">1981</option>
    		</select>
    	</td>
    	<td><input type="text" id="regfee3" name="regfee3" class="inpt_a" value=""/></td>
    	<td><input type="text" value="" id="hotel3" name="hotel3" class="inpt_a" /></td>
    	<td><input type="text" value="" id="meal3" name="meal3" class="inpt_a" /></td>
    	<td><input type="text" value="" id="discount3" name="discount3" class="inpt_a"/></td>
    	<td><input type="text" value="" id="total3" name="total3" class="inpt_a" /></td>
    	</tr>
    	<!----------- Fourth Person ------------------->
    	<tr>
    	<td>
    		<input type="checkbox" name="vip4" id="vip4" value="Y" class="inpt_c"  />
    	</td>
    	<td>
    	<select name="year4" id="year4" onchange='doUpdate(this.value,"4");'>
    		<option selected="selected"></option>
    		<option value="2011">2011</option>
    		<option value="2010">2010</option>
    		<option value="2009">2009</option>
    		<option value="2008">2008</option>
    		<option value="2007">2007</option>
    		<option value="2006">2006</option>
    		<option value="2005">2005</option>
    		<option value="2004">2004</option>
    		<option value="2003">2003</option>
    		<option value="2002">2002</option>
    		<option value="2001">2001</option>
    		<option value="2000">2000</option>
    		<option value="1999">1999</option>
    		<option value="1998">1998</option>
    		<option value="1997">1997</option>
    		<option value="1996">1996</option>
    		<option value="1995">1995</option>
    		<option value="1994">1994</option>
    		<option value="1993">1993</option>
    		<option value="1992">1992</option>
    		<option value="1991">1991</option>
    		<option value="1990">1990</option>
    		<option value="1989">1989</option>
    		<option value="1988">1988</option>
    		<option value="1987">1987</option>
    		<option value="1986">1986</option>
    		<option value="1985">1985</option>
    		<option value="1984">1984</option>
    		<option value="1983">1983</option>
    		<option value="1982">1982</option>
    		<option value="1981">1981</option>
    	</select></td>
    	<td><input type="text" id="regfee4" name="regfee4" class="inpt_a" value=""/></td>
    	<td><input type="text" value="" id="hotel4" name="hotel4" class="inpt_a" /></td>
    	<td><input type="text" value="" id="meal4" name="meal4" class="inpt_a" /></td>
    	<td><input type="text" value="" id="discount4" name="discount4" class="inpt_a"/></td>
    	<td><input type="text" value="" id="total4" name="total4" class="inpt_a" /></td>
    	</tr>
    	<!------------Subtotal of all 4 totals above ------------>
    	<tr>
    	<td colspan="6"><input name="total" type="text" id="total" class="inpt_a" value="" readonly="readonly"  /></td>
    	</tr>
    	</table>
    </form>
    
    </body>
    </html>

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    You need to use Number() because you are reading back the (string) values which have already been written to the page.

    You could do
    var t1 = 0;
    var t2 = 0;
    var t3 = 0;
    var t4 = 0;

    t1 = 199 + b;
    document.getElementById('total1').value = t1;
    and so on and then simply add t1, t2, t3 and t4.

    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.

  • #10
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much Sunflight. Your code is much more cleaner than mine and it worked like expected.

    Thanks


  •  

    Posting Permissions

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