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.
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>
Last Comment
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Thanks ansudhindra for your help, I had problems with my code but your suggestions works.
jQuery
jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.
19K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
ASKER
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 12045066undefinedundefined