We help IT Professionals succeed at work.
Get Started

jQuery - adding multiple values

sabecs
sabecs asked
on
302 Views
Last Modified: 2012-05-11
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

Comment
Watch Question
This problem has been solved!
Unlock 1 Answer and 3 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE