troubleshooting Question

jQuery - adding multiple values

Avatar of sabecs
sabecs asked on
jQuery
3 Comments1 Solution304 ViewsLast Modified:
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
Sudhindra A N

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros