Link to home
Start Free TrialLog in
Avatar of sabecs
sabecs

asked on

jQuery - adding multiple values

Is there a better way to write the last 30 lines of attached code as the number of lines in each group will vary.

Also is it possible to use PHP or Javascript to redirect after a page update to a specifc tab?

Thanks in advance for your help.

<!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></title>
	<link rel="stylesheet" href="jquery_ui/development-bundle/themes/base/jquery.ui.all.css">
	<script src="jquery_ui/development-bundle/jquery-1.5.1.js"></script>
	<script src="jquery_ui/development-bundle/ui/jquery.ui.core.js"></script>
	<script src="jquery_ui/development-bundle/ui/jquery.ui.widget.js"></script>
	<script src="jquery_ui/development-bundle/ui/jquery.ui.tabs.js"></script>
	<script>
	$(function() {
		$( "#tabs" ).tabs();
	});
	</script>
<style type="text/css"> 
body {
	font-size: 12px;font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
}
 
#tabs{
	width: 980px;
	background-color:#f3f3f3;
	margin: 0 auto;
}
 
 
#container{
	height: auto;
	width: 910px;
	background-color:#f3f3f3;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	font-size: 12px;
	color: #033;
}
.budget_group{
	height: auto;
	width: 900px;
	clear: left;
	padding:5px;
	background-color: #CCC;
	font-weight: bold;
	color: #000;
	line-height: 20px;
	text-align: left;
	text-indent: 10px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.group_total{
	height: auto;
	width: 900px;
	clear: left;
	padding:5px;
	background-color: #333;
	font-weight: normal;
	color: #FFF;
	line-height: 20px;
	text-align: left;
	text-indent: 10px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
 
.newline{
	font-weight: normal;
	height: 30px;
	width: 880px;
	clear: left;
	margin: 0 auto;
	background-color: #f3f3f3;
}
.id{
	float: left;
	height: 20px;
	width: 30px;
	background-color: #f3f3f3;
}
.description{
	float: left;
	height: 20px;
	width: 300px;
	background-color: #f3f3f3;
}
.frequency{
	float: left;
	height: 20px;
	width: 120px;
	background-color: #f3f3f3;
	margin-left: 5px;
}
.frequency-total{
	float: left;
	height: 20px;
	width: 150px;
	background-color: #f3f3f3;
	margin-left: 5px;
	text-align: right;
	padding-right: 10px;
}
.yearly-total{
	float: left;
	height: 20px;
	width: 150px;
	background-color: #f3f3f3;
	margin-right: 5px;
}
	
	
.yearly-amounts{
	border:none;
	background-color: #f3f3f3;
	text-align: right;
	padding-right: 10px;
	width: 250px;
}
 
.amounts{
	width: 50px;
	text-align: right;	
}
 
.description-text{
	width: 250px;
	border:none;
	background-color: #f3f3f3;
	text-indent: 10px;
}
 
</style>
 
<DIV id="tabs">
<UL>
<LI style="background-color:#099"><A href="#tabs-1" >Income</A></LI>
<LI><A href="#tabs-2">Loans/Commitments</A></LI>
<LI><A href="#tabs-3">Home</A></LI>
<LI><A href="#tabs-4">Utilities</A></LI>
 
</UL>
 
 
<div id="container">
<form name="budget" enctype="multipart/form-data" action="budget.php" method="POST">
			
            <div id="tabs-1">
            <div class="budget_group">Income</div>
			       
			
			<div class="newline">
			<input name="rec_id[3]" type="hidden" value="3">
            <div class="description"><input class="description-text" name="description3" type="text" value="Your take-home pay"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency3">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" >Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" SELECTED>Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total3" type="text" value="34"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total3" type="text" value="34"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[4]" type="hidden" value="4">
            <div class="description"><input class="description-text" name="description4" type="text" value="Your partner's take-home pay"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency4">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" SELECTED>Fortnightly</option>
					  <option value="M" >Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total4" type="text" value="5"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total4" type="text" value="130"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[5]" type="hidden" value="5">
            <div class="description"><input class="description-text" name="description5" type="text" value="Income from savings and investments"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency5">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" SELECTED>Fortnightly</option>
					  <option value="M" >Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total5" type="text" value="66"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total5" type="text" value="1716"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[6]" type="hidden" value="6">
            <div class="description"><input class="description-text" name="description6" type="text" value="Centrelink benefits"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency6">
					  <option value="D" SELECTED>Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" >Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total6" type="text" value="6"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total6" type="text" value="2190"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[7]" type="hidden" value="7">
            <div class="description"><input class="description-text" name="description7" type="text" value="Family benefit payments"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency7">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total7" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total7" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[8]" type="hidden" value="8">
            <div class="description"><input class="description-text" name="description8" type="text" value="Child support received"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency8">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total8" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total8" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[9]" type="hidden" value="9">
            <div class="description"><input class="description-text" name="description9" type="text" value="Other"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency9">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total9" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total9" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[99]" type="hidden" value="99">
            <div class="description"><input class="description-text" name="description99" type="text" value="Overtype this with your Description"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency99">
					  <option value="D" >Daily</option>
					  <option value="W" SELECTED>Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" >Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total99" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total99" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[101]" type="hidden" value="101">
            <div class="description"><input class="description-text" name="description101" type="text" value="Overtype this with your Description"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency101">
					  <option value="D" >Daily</option>
					  <option value="W" SELECTED>Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" >Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total101" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total101" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[107]" type="hidden" value="107">
            <div class="description"><input class="description-text" name="description107" type="text" value="Overtype this with your Description"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency107">
					  <option value="D" >Daily</option>
					  <option value="W" SELECTED>Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" >Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total107" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total107" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
						<div class="newline"><a href="budget.php?update=add_line&budget_group=Income&budget_type=I&from_tab=tabs-1" target="_self">+ Add another line to Income</a> </div>
  <span class="group_total">Total - Home  =  <span id="final-total">0</span></span></span>
</div><!-- end of tab -->
 
			
            <div id="tabs-2">
            <div class="budget_group">Financial Commitments</div>
			       
			
			<div class="newline">
			<input name="rec_id[10]" type="hidden" value="10">
            <div class="description"><input class="description-text" name="description10" type="text" value="Rent/Mortgage"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency10">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total10" type="text" value="10"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total10" type="text" value="120"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[11]" type="hidden" value="11">
            <div class="description"><input class="description-text" name="description11" type="text" value="Car loan repayments"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency11">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total11" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total11" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[12]" type="hidden" value="12">
            <div class="description"><input class="description-text" name="description12" type="text" value="Other loan repayments"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency12">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total12" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total12" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[13]" type="hidden" value="13">
            <div class="description"><input class="description-text" name="description13" type="text" value="Credit card interest"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency13">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total13" type="text" value="10"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total13" type="text" value="120"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[14]" type="hidden" value="14">
            <div class="description"><input class="description-text" name="description14" type="text" value="Voluntary super contributions"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency14">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total14" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total14" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[15]" type="hidden" value="15">
            <div class="description"><input class="description-text" name="description15" type="text" value="Savings"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency15">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total15" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total15" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[16]" type="hidden" value="16">
            <div class="description"><input class="description-text" name="description16" type="text" value="Child support payments"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency16">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total16" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total16" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[17]" type="hidden" value="17">
            <div class="description"><input class="description-text" name="description17" type="text" value="Donations/charity"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency17">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total17" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total17" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[18]" type="hidden" value="18">
            <div class="description"><input class="description-text" name="description18" type="text" value="Pocket money"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency18">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total18" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total18" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[19]" type="hidden" value="19">
            <div class="description"><input class="description-text" name="description19" type="text" value="Other"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency19">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total19" type="text" value="10"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total19" type="text" value="120"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[98]" type="hidden" value="98">
            <div class="description"><input class="description-text" name="description98" type="text" value="What"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency98">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total98" type="text" value="45"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total98" type="text" value="540"></div>
			
			</div><!-- end of newlin -->
			
						<div class="newline"><a href="budget.php?update=add_line&budget_group=Financial Commitments&budget_type=I&from_tab=tabs-2" target="_self">+ Add another line to Financial Commitments</a> </div>
  <span class="group_total">Total - Home  =  <span id="final-total">0</span></span></span>
</div><!-- end of tab -->
 
			
            <div id="tabs-3">
            <div class="budget_group">Home</div>
			       
			
			<div class="newline">
			<input name="rec_id[20]" type="hidden" value="20">
            <div class="description"><input class="description-text" name="description20" type="text" value="Council rates"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency20">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total20" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total20" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[21]" type="hidden" value="21">
            <div class="description"><input class="description-text" name="description21" type="text" value="Body corporate fees"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency21">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total21" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total21" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[22]" type="hidden" value="22">
            <div class="description"><input class="description-text" name="description22" type="text" value="Home and contents insurance"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency22">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total22" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total22" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[23]" type="hidden" value="23">
            <div class="description"><input class="description-text" name="description23" type="text" value="Home maintenance and repairs"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency23">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total23" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total23" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[24]" type="hidden" value="24">
            <div class="description"><input class="description-text" name="description24" type="text" value="New furniture/appliances"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency24">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total24" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total24" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[25]" type="hidden" value="25">
            <div class="description"><input class="description-text" name="description25" type="text" value="Other"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency25">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total25" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total25" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[125]" type="hidden" value="125">
            <div class="description"><input class="description-text" name="description125" type="text" value="Overtype this with your Description"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency125">
					  <option value="D" >Daily</option>
					  <option value="W" SELECTED>Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" >Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total125" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total125" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
						<div class="newline"><a href="budget.php?update=add_line&budget_group=Home&budget_type=E&from_tab=tabs-3" target="_self">+ Add another line to Home</a> </div>
  <span class="group_total">Total - Home  =  <span id="final-total">0</span></span></span>
</div><!-- end of tab -->
 
			
            <div id="tabs-4">
            <div class="budget_group">Utilities</div>
			       
			
			<div class="newline">
			<input name="rec_id[26]" type="hidden" value="26">
            <div class="description"><input class="description-text" name="description26" type="text" value="Electricity"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency26">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total26" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total26" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[27]" type="hidden" value="27">
            <div class="description"><input class="description-text" name="description27" type="text" value="Gas"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency27">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" >Monthly</option>
					  <option value="Q" SELECTED>Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total27" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total27" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[28]" type="hidden" value="28">
            <div class="description"><input class="description-text" name="description28" type="text" value="Water"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency28">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" >Monthly</option>
					  <option value="Q" SELECTED>Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total28" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total28" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[29]" type="hidden" value="29">
            <div class="description"><input class="description-text" name="description29" type="text" value="Internet"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency29">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total29" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total29" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[30]" type="hidden" value="30">
            <div class="description"><input class="description-text" name="description30" type="text" value="Pay TV"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency30">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total30" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total30" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[31]" type="hidden" value="31">
            <div class="description"><input class="description-text" name="description31" type="text" value="Home phone"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency31">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total31" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total31" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[32]" type="hidden" value="32">
            <div class="description"><input class="description-text" name="description32" type="text" value="Mobile phone(s)"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency32">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total32" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total32" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[33]" type="hidden" value="33">
            <div class="description"><input class="description-text" name="description33" type="text" value="Other"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency33">
					  <option value="D" >Daily</option>
					  <option value="W" >Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" SELECTED>Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total33" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total33" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[105]" type="hidden" value="105">
            <div class="description"><input class="description-text" name="description105" type="text" value="Overtype this with your Description"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency105">
					  <option value="D" >Daily</option>
					  <option value="W" SELECTED>Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" >Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total105" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total105" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
			       
			
			<div class="newline">
			<input name="rec_id[106]" type="hidden" value="106">
            <div class="description"><input class="description-text" name="description106" type="text" value="Overtype this with your Description"></div>
			<div class="frequency">
			<select onChange="setValue(this.value);" name="frequency106">
					  <option value="D" >Daily</option>
					  <option value="W" SELECTED>Weekly</option>
					  <option value="F" >Fortnightly</option>
					  <option value="M" >Monthly</option>
					  <option value="Q" >Quartely</option>
					  <option value="Y" >Annually</option>
			  </select>
			</div>
			<div class="frequency-total"><input class="amounts" name="frequency-total106" type="text" value="0"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total106" type="text" value="0"></div>
			
			</div><!-- end of newlin -->
			
						<div class="newline"><a href="budget.php?update=add_line&budget_group=Utilities&budget_type=E&from_tab=tabs-4" target="_self">+ Add another line to Utilities</a> </div>
  <span class="group_total">Total - Home  =  <span id="final-total">0</span></span></span>
</div><!-- end of tab -->
 
			
  
 
 
<input name="Submit" type="submit" class="formbutton" id="Submit" value="submit"  />
<input name="update_recs" type="hidden" id="update_recs" value="all">
</form>
</div><!-- end of container -->
 
 
<script type="text/javascript"> 
 
/*<![CDATA[*/
 
$('select').change( eventChange );
$('.amounts').change( function() { $(this).closest(".newline").find("select").trigger( "change" ); } );
 
function eventChange() {
  var factor = { D: 365, W: 52, F: 26, M: 12, Q:4, Y: 1 };
  var amount = $(this).closest(".newline").find(".amounts").val();
  $(this).closest(".newline").find(".yearly-amounts").val( amount * factor[$(this).val()] );
  totalChange(this);
} 
 
$('.yearly-amounts').change( totalChange );
 
function totalChange(ele) {
	//alert();
	//var amount1 = $(this).closest(".newline").find(".yearly-amounts").val();
	var amount1 = $(ele).closest(".newline").parent().find(".yearly-amounts").val();
	var amount2 = $(ele).closest(".newline").parent().find(".yearly-amounts:eq(1)").val();
	var amount3 = $(ele).closest(".newline").parent().find(".yearly-amounts:eq(2)").val();
	var amount4 = $(ele).closest(".newline").parent().find(".yearly-amounts:eq(3)").val();
	var amount5 = $(ele).closest(".newline").parent().find(".yearly-amounts:eq(4)").val();
	var amount6 = $(ele).closest(".newline").parent().find(".yearly-amounts:eq(5)").val();
	var amount7 = $(ele).closest(".newline").parent().find(".yearly-amounts:eq(6)").val();
	var amount8 = $(ele).closest(".newline").parent().find(".yearly-amounts:eq(7)").val();
	var amount9 = $(ele).closest(".newline").parent().find(".yearly-amounts:eq(8)").val();
	var amount10 = $(ele).closest(".newline").parent().find(".yearly-amounts:eq(9)").val();
	var amount11 = $(ele).closest(".newline").parent().find(".yearly-amounts:eq(10)").val();
	var amount_final = $(ele).closest(".newline").parent().find("#final-total").html(parseInt(amount1)+parseInt(amount2)+parseInt(amount3)+parseInt(amount4)+parseInt(amount5)+parseInt(amount6)+parseInt(amount7)+parseInt(amount8)+parseInt(amount9)+parseInt(amount10)+parseInt(amount11));
}
 
/*]]>*/
</script>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Sudhindra A N
Sudhindra A N
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of sabecs
sabecs

ASKER

Thanks ansudhindra for your help, I tried your suggestion but it does produce a total.

If I add an alert(amount) below your code it will display the column totals each time

for example if I had only 6 rows with column totals of 12,0,45,0,66

the alert will display 12045066undefinedundefinedundefinedundefined
Avatar of sabecs

ASKER

Thanks ansudhindra for your help, I had problems with my code but your suggestions works.