?
Solved

jQuery - add column totals and create tabs with UI

Posted on 2011-05-13
5
Medium Priority
?
315 Views
Last Modified: 2012-05-11
Hi,
I am trying to get the tabs jQuery UI working but not having any luck, I dont know what I am missing.

I am also trying to work out how to add up totals for each group with jQuery .

Thanks in advance for your feedback.

<!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>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript"> 
	$(function() {
		$( "#tabs" ).tabs();
	});
</script>
<style type="text/css"> 
#container{
	height: auto;
	width: 910px;
	background-color:#f3f3f3;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.budget_group{
	height: auto;
	width: 900px;
	clear: left;
	padding:5px;
	background-color: #CCC;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	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-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	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-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	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><A href="#tabs-1">Income</A></LI>
<LI><A href="#tabs-2">Financial</A></LI>
<LI><A href="#tabs-3">Home</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" >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-total4" type="text" value="44"></div>
			<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total4" type="text" value="528"></div>
			
			</div><!-- end of newlin -->
			
						
  <div class="group_total">Total - Income  =  0</div>
</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="group_total">Total - Financial Commitments  =  0</div>
</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="group_total">Total - Home  =  0</div>
</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 -->
 
 
 
<!-- http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27033580.html -->
<!-- Code below form Proculopsis -->

<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()] );
} 
 
/*]]>*/
</script>

Open in new window

0
Comment
Question by:sabecs
  • 3
  • 2
5 Comments
 
LVL 13

Expert Comment

by:ansudhindra
ID: 35752824
try this one...

I removed your style and added one available form another site..

<!DOCTYPE html> 
 
<html> 
 
<!--
	This is a jQuery Tools standalone demo. Feel free to copy/paste.
	                                                         
	http://flowplayer.org/tools/demos/
	
	Do *not* reference CSS files and images from flowplayer.org when in production  
 
	Enjoy!
--> 
 
<head> 
	<title>jQuery Tools standalone demo</title> 
 
	<!-- include the Tools --> 
	<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script> 
	 
 
	<!-- standalone page styling (can be removed) --> 
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>	
 
 
	
	<!-- tab styling --> 
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs.css" /> 
	
	
	<!-- tab pane styling --> 
	<style> 
	
/* tab pane styling */
.panes div {
	display:none;		
	padding:15px 10px;
	border:1px solid #999;
	border-top:0;
	height:100px;
	font-size:14px;
	background-color:#fff;
}
 
	</style> 
</head> 
 
<body> 
 
 
 
<!-- the tabs --> 
<ul class="tabs"> 

<LI><A href="#tabs-1">Income</A></LI>
<LI><A href="#tabs-2">Financial</A></LI>
<LI><A href="#tabs-3">Home</A></LI>

 
</UL>
 <form name="budget" enctype="multipart/form-data" action="budget.php" method="POST">
<!-- tab "panes" --> 
<div class="panes"> 
	<div>

		<span id="tabs-1">
            
			       
			
			<span class="newline">
			<input name="rec_id[3]" type="hidden" value="3">
            <span class="description"><input class="description-text" name="description3" type="text" value="Your take-home pay"></span>
			<span 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>
			</span>
			<span class="frequency-total"><input class="amounts" name="frequency-total3" type="text" value="34"></span>
			<span class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total3" type="text" value="34"></span>
			
			</span><!-- end of newlin -->
			
			       <br>
			
			<span class="newline">
			<input name="rec_id[4]" type="hidden" value="4">
            <span class="description"><input class="description-text" name="description4" type="text" value="Your partner's take-home pay"></span>
			<span class="frequency">
			<select onChange="setValue(this.value);" name="frequency4">
					  <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>
			</span>
			<span class="frequency-total"><input class="amounts" name="frequency-total4" type="text" value="44"></span>
			<span class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total4" type="text" value="528"></span>
			
			</span><!-- end of newlin -->
			
						
  <span class="group_total">Total - Income  =  0</span>

	</div> 
	<div>
	
	<span  id="tabs-2">
            <span class="newline">
			<input name="rec_id[10]" type="hidden" value="10">
            <span class="description"><input class="description-text" name="description10" type="text" value="Rent/Mortgage"></span>
			<span 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>
			</span>
			<span class="frequency-total"><input class="amounts" name="frequency-total10" type="text" value="10"></span>
			<span class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total10" type="text" value="120"></span>
			
			</span><!-- end of newlin -->
			
			       <br>
			
			<span class="newline">
			<input name="rec_id[11]" type="hidden" value="11">
            <span class="description"><input class="description-text" name="description11" type="text" value="Car loan repayments"></span>
			<span 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>
			</span>
			<span class="frequency-total"><input class="amounts" name="frequency-total11" type="text" value="0"></span>
			<span class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total11" type="text" value="0"></span>
			
			</span><!-- end of newlin -->
			

  <span class="group_total">Total - Financial Commitments  =  0</span>
	
	</div>
	<div>
	
	<span id="tabs-3">
			
			<span class="newline">
			<input name="rec_id[20]" type="hidden" value="20">
            <span class="description"><input class="description-text" name="description20" type="text" value="Council rates"></span>
			<span 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>
			</span>
			<span class="frequency-total"><input class="amounts" name="frequency-total20" type="text" value="0"></span>
			<span class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total20" type="text" value="0"></span>
			
			</span><!-- end of newlin -->
			<br>
			       
			<span class="newline">
			<input name="rec_id[21]" type="hidden" value="21">
            <span class="description"><input class="description-text" name="description21" type="text" value="Body corporate fees"></span>
			<span 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>
			</span>
			<span class="frequency-total"><input class="amounts" name="frequency-total21" type="text" value="0"></span>
			<span class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total21" type="text" value="0"></span>
			
			</span><!-- end of newlin -->
			
						
  <span class="group_total">Total - Home  =  0</span>
	</div> 
</div> 
 
 
<!-- This JavaScript snippet activates those tabs --> 
<script> 
 
// perform JavaScript after the document is scriptable.
$(function() {
	// setup ul.tabs to work as tabs for each div directly under div.panes
	$("ul.tabs").tabs("div.panes > div");
});
</script> 
 
 <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 -->
 
 </body>
 </html>
 
<!-- http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27033580.html -->
<!-- Code below form Proculopsis -->

<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()] );
} 
 
/*]]>*/
</script>
 
</body> 
 
</html>

Open in new window

0
 

Author Comment

by:sabecs
ID: 35753985
Thanks ansudhindra for your help, the tabs are now working.

I just need to work out how to get the totals to be added for each group, any ideas?
0
 
LVL 13

Expert Comment

by:ansudhindra
ID: 35755273
here it is....

 
<!DOCTYPE html> 
 
<html> 
 
<!--
	This is a jQuery Tools standalone demo. Feel free to copy/paste.
	                                                         
	http://flowplayer.org/tools/demos/
	
	Do *not* reference CSS files and images from flowplayer.org when in production  
 
	Enjoy!
--> 
 
<head> 
	<title>jQuery Tools standalone demo</title> 
 
	<!-- include the Tools --> 
	<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script> 
	 
 
	<!-- standalone page styling (can be removed) --> 
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>	
 
 
	
	<!-- tab styling --> 
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs.css" /> 
	
	
	<!-- tab pane styling --> 
	<style> 
	
/* tab pane styling */
.panes div {
	display:none;		
	padding:15px 10px;
	border:1px solid #999;
	border-top:0;
	height:100px;
	font-size:14px;
	background-color:#fff;
}
 
	</style> 
</head> 
 
<body> 
 
 
 
<!-- the tabs --> 
<ul class="tabs"> 

<LI><A href="#tabs-1">Income</A></LI>
<LI><A href="#tabs-2">Financial</A></LI>
<LI><A href="#tabs-3">Home</A></LI>

 
</UL>
 <form name="budget" enctype="multipart/form-data" action="budget.php" method="POST">
<!-- tab "panes" --> 
<div class="panes"> 
	<div>

		<span id="tabs-1">
            
			       
			
			<span class="newline">
			<input name="rec_id[3]" type="hidden" value="3">
            <span class="description"><input class="description-text" name="description3" type="text" value="Your take-home pay"></span>
			<span 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>
			</span>
			<span class="frequency-total"><input class="amounts" name="frequency-total3" type="text" value="34"></span>
			<span class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total3" type="text" value="34"></span>
			
			</span><!-- end of newlin -->
			
			       <br>
			
			<span class="newline">
			<input name="rec_id[4]" type="hidden" value="4">
            <span class="description"><input class="description-text" name="description4" type="text" value="Your partner's take-home pay"></span>
			<span class="frequency">
			<select onChange="setValue(this.value);" name="frequency4">
					  <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>
			</span>
			<span class="frequency-total"><input class="amounts" name="frequency-total4" type="text" value="44"></span>
			<span class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total4" type="text" value="528"></span>
			
			</span><!-- end of newlin -->
			
						
  <span class="group_total">Total - Income  =  <span id="final-total">0</span></span></span>

	</div> 
	<div>
	
	<span  id="tabs-2">
            <span class="newline">
			<input name="rec_id[10]" type="hidden" value="10">
            <span class="description"><input class="description-text" name="description10" type="text" value="Rent/Mortgage"></span>
			<span 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>
			</span>
			<span class="frequency-total"><input class="amounts" name="frequency-total10" type="text" value="10"></span>
			<span class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total10" type="text" value="120"></span>
			
			</span><!-- end of newlin -->
			
			       <br>
			
			<span class="newline">
			<input name="rec_id[11]" type="hidden" value="11">
            <span class="description"><input class="description-text" name="description11" type="text" value="Car loan repayments"></span>
			<span 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>
			</span>
			<span class="frequency-total"><input class="amounts" name="frequency-total11" type="text" value="0"></span>
			<span class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total11" type="text" value="0"></span>
			
			</span><!-- end of newlin -->
			

  <span class="group_total">Total - Financial Commitments  =  <span id="final-total">0</span></span></span>
	
	</div>
	<div>
	
	<span id="tabs-3">
				
			<span class="newline">
			<input name="rec_id[20]" type="hidden" value="20">
            <span class="description"><input class="description-text" name="description20" type="text" value="Council rates"></span>
			<span 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>
			</span>
			<span class="frequency-total"><input class="amounts" name="frequency-total20" type="text" value="0"></span>
			<span class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total20" type="text" value="0"></span>
			
			</span><!-- end of newlin -->
			<br>
			       
			<span class="newline">
			<input name="rec_id[21]" type="hidden" value="21">
            <span class="description"><input class="description-text" name="description21" type="text" value="Body corporate fees"></span>
			<span 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>
			</span>
			<span class="frequency-total"><input class="amounts" name="frequency-total21" type="text" value="0"></span>
			<span class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total21" type="text" value="0"></span>
			
			</span><!-- end of newlin -->
			
						
  <span class="group_total">Total - Home  =  <span id="final-total">0</span></span></span>
	</div> 
</div> 
 
 
<!-- This JavaScript snippet activates those tabs --> 
<script> 
 
// perform JavaScript after the document is scriptable.
$(function() {
	// setup ul.tabs to work as tabs for each div directly under div.panes
	$("ul.tabs").tabs("div.panes > div");
});
</script> 
 
 <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 -->
 
 </body>
 </html>
 
<!-- http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27033580.html -->
<!-- Code below form Proculopsis -->

<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 amount2 = $(ele).closest(".newline").parent().find("#final-total").html(parseInt(amount1)+parseInt(amount2));
}
 
/*]]>*/
</script>
 
</body> 
 
</html>

Open in new window

0
 
LVL 13

Accepted Solution

by:
ansudhindra earned 2000 total points
ID: 35755288
Please remove line number 239 as it is not needed. Sorry for that.
0
 

Author Closing Comment

by:sabecs
ID: 35758604
Thanks ansudhindra, its perfect.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question