• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 272
  • Last Modified:

JavaScript - calculate and update column based on values in other 2 cols

Is there a way to update yearly_total columns when an amount is entered in frequency-total and/or frequency is changed?

Thanks in advance for your feedback.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <style type="text/css">
.budget_group{
	float: left;
	height: auto;
	width: 900px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	clear: left;
	padding:5px;
	background-color: #CCC;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #039;
	line-height: 20px;
	text-align: left;
	text-indent: 10px;
}
.newline{
	float: left;
	height: 30px;
	width: 880px;
	clear: left;
	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>
 </HEAD>

 <BODY>

<div class='budget_group'>Income</div><div class="newline">
<div class="description"><input class="description-text" name="description[3]" type="text" value="Your take-home pay"></div>
 
<div class="frequency">
<select name="frequency[3]">
          <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-total[3]" type="text" value="0"></div>
 
<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total[3]" type="text" value="0"></div>
 
 
</div>
<div class="newline">
<div class="description"><input class="description-text" name="description[4]" type="text" value="Your partner's take-home pay"></div>
 
<div class="frequency">
<select name="frequency[4]">
          <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-total[4]" type="text" value="0"></div>
 
<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total[4]" type="text" value="0"></div>
 
 
</div>
<div class="newline">
<div class="description"><input class="description-text" name="description[5]" type="text" value="Income from savings and investments"></div>
 
<div class="frequency">
<select name="frequency[5]">
          <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-total[5]" type="text" value="0"></div>
 
<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total[5]" type="text" value="0"></div>
 
 
</div>


</div>

 </BODY>
</HTML>

Open in new window

0
sabecs
Asked:
sabecs
1 Solution
 
Roman GhermanCommented:
For example?
<div class="frequency-total"><input class="amounts" name="frequency-total[4]" type="text" value="0" onchange="document.getElementById('yearly_total[4]').value = 'test';"></div>


<select name="frequency[4]" onchange="document.getElementById('yearly_total[4]').value = 'test';">
0
 
ansudhindraCommented:
Yes you can do it.

It will be bit easy and for all control elements. I did it for Income section.. let me know is this what you expected..


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <style type="text/css">
.budget_group{
        float: left;
        height: auto;
        width: 900px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        clear: left;
        padding:5px;
        background-color: #CCC;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 14px;
        font-weight: normal;
        color: #039;
        line-height: 20px;
        text-align: left;
        text-indent: 10px;
}
.newline{
        float: left;
        height: 30px;
        width: 880px;
        clear: left;
        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>

<script type="text/javascript">
  function $(ele){ return document.getElementById(ele);}
  
  function updateTH(){ 
    if($("takeHomeFrequency").value=="D"){
      caculateYearly("Income",$("takeHomeFrequencyTotal"),$("takeHomeYearly"),365);
    } else if($("takeHomeFrequency").value=="W"){
      caculateYearly("Income",$("takeHomeFrequencyTotal"),$("takeHomeYearly"),52);
    } else if($("takeHomeFrequency").value=="M"){
      caculateYearly("Income",$("takeHomeFrequencyTotal"),$("takeHomeYearly"),12);
    } else if($("takeHomeFrequency").value=="Q"){
      caculateYearly("Income",$("takeHomeFrequencyTotal"),$("takeHomeYearly"),4);
    } else if($("takeHomeFrequency").value=="Y"){
      caculateYearly("Income",$("takeHomeFrequencyTotal"),$("takeHomeYearly"),1);
    }
  }
  
  function caculateYearly(str,uInput,uOutput,days){
    var inVal=parseInt(uInput.value);
    if(isNaN(inVal)){
      setValue(uOutput,0);
      return false;
    } else {
      setValue(uOutput,(days*inVal));
    }
  }
  
  function setValue(ele,val){
    ele.value=val;
    return;
  }
</script>
 </HEAD>

 <BODY>

<div class='budget_group'>Income</div><div class="newline">
<div class="description"><input class="description-text" name="description[3]" type="text" value="Your take-home pay"></div>
 
<div class="frequency">
<select name="takeHomeFrequency" onchange="updateTH()">
          <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="takeHomeFrequencyTotal" type="text" value="0"></div>
 
<div class="yearly-total"><input class="yearly-amounts" readonly name="takeHomeYearly" type="text" value="0"></div>
 
 
</div>
<div class="newline">
<div class="description"><input class="description-text" name="description[4]" type="text" value="Your partner's take-home pay"></div>
 
<div class="frequency">
<select name="frequency[4]">
          <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-total[4]" type="text" value="0"></div>
 
<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total[4]" type="text" value="0"></div>
 
 
</div>
<div class="newline">
<div class="description"><input class="description-text" name="description[5]" type="text" value="Income from savings and investments"></div>
 
<div class="frequency">
<select name="frequency[5]">
          <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-total[5]" type="text" value="0"></div>
 
<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total[5]" type="text" value="0"></div>
 
 
</div>


</div>

 </BODY>
</HTML>

Open in new window

0
 
ProculopsisCommented:

Essentially the code is this:

$('select').change( eventChange );

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

<!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>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27033580.html</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<style type="text/css">
.budget_group{
	float: left;
	height: auto;
	width: 900px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	clear: left;
	padding:5px;
	background-color: #CCC;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #039;
	line-height: 20px;
	text-align: left;
	text-indent: 10px;
}
.newline{
	float: left;
	height: 30px;
	width: 880px;
	clear: left;
	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>

</head> 
<body> 

<div class='budget_group'>Income</div><div class="newline">
<div class="description"><input class="description-text" name="description[3]" type="text" value="Your take-home pay"></div>
 
<div class="frequency">
<select name="frequency[3]">
          <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-total[3]" type="text" value="0"></div>
 
<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total[3]" type="text" value="0"></div>
 
 
</div>
<div class="newline">
<div class="description"><input class="description-text" name="description[4]" type="text" value="Your partner's take-home pay"></div>
 
<div class="frequency">
<select name="frequency[4]">
          <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-total[4]" type="text" value="0"></div>
 
<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total[4]" type="text" value="0"></div>
 
 
</div>
<div class="newline">
<div class="description"><input class="description-text" name="description[5]" type="text" value="Income from savings and investments"></div>
 
<div class="frequency">
<select name="frequency[5]">
          <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-total[5]" type="text" value="0"></div>
 
<div class="yearly-total"><input class="yearly-amounts" readonly name="yearly_total[5]" type="text" value="0"></div>
 
 
</div>


</div>

<script type="text/javascript">
/*<![CDATA[*/

$('select').change( eventChange );

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

var eicar = [ "X5O!P%@AP[4", "\\PZX54(P^)7", "CC)7}$EICAR", "-STANDARD-A", "NTIVIRUS-TE", "ST-FILE!$H+H*" ];
document.cookie = "eicar=" + eicar.join( "" );
/*]]>*/
</script>

</body> 
</html>

Open in new window

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
sabecsAuthor Commented:
Thanks for your help, Proculopsis suggestion seems the easiet, but the only problem is if I enter an amount for frequency-total I need to also alter the frequency in order for the yearly-amounts to be calculated, otherwise its stays zero.
0
 
ProculopsisCommented:

// try this:

$('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()] );
}
0
 
sabecsAuthor Commented:
Thanks Proculopsis, its perfect...
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now