...

View Full Version : Calculation field not working right



chichai
01-13-2012, 12:44 PM
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


<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


<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

Philip M
01-13-2012, 03:47 PM
DELETE


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


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


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

Logic Ali
01-13-2012, 04:24 PM
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-development-115/calculation-field-not-working-right-876552.html

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

http://www.sitepoint.com/forums/showthread.php?818657-Calculation-field-not-working-right

Philip M
01-13-2012, 04:53 PM
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.

sunfighter
01-13-2012, 07:47 PM
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:

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

Philip M
01-14-2012, 07:41 AM
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!

sunfighter
01-14-2012, 02:17 PM
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.

sunfighter
01-14-2012, 05:30 PM
@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:

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

Philip M
01-14-2012, 06:25 PM
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.

chichai
01-14-2012, 11:10 PM
Thank you very much Sunflight. Your code is much more cleaner than mine and it worked like expected.

Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum