Solved

# Javascript Calculation

Posted on 2011-10-23
290 Views
Hello,

I have a or with a number of input options -

``````<form action="" method="post" name="form1" id="form1" onsubmit="return validateform1(this)">
<h3>Complete Survey Now</h3>
<ul>
<li>
<label>Retainer Value :</label>
<input name="Locality" type="hidden" id="Locality" value="<%=(RSMemberLocality.Fields.Item("Locality").Value)%>" />        <input name="Retainerinput" type="hidden" id="Retainerinput" value="yes" />
<input name="RetainerValue" type="text" id="RetainerValue" maxlength="8" onBlur="this.value = formatField(this)" />
</li>
<li>
<label>Fee Commission :</label>
<input name="FeeCommission" type="text" id="FeeCommission" maxlength="8" onBlur="this.value = formatField(this)" />
</li>
<li>
<label>Total :</label>
<input name="TotalRetainer" type="text" id="TotalRetainer" maxlength="8" onBlur="this.value = formatField(this)" />
</li>
<li>
<label>Date of Review </label>
<input type="text" id="ReviewDate" name="ReviewDate" />

</li>
<li>
<input type="image" class="submitbutton" src="png/submit.png">
</li>
</ul>
</form>
``````

I would like it if

TotalRetainer was a calculated value based on the input into either or both of -

RetainerValue
FeeCommission

So if only FeeCommision is entered the value in TotalRetainer  is the same as the value in FeeCommission, OR if both are entered the value is the Sum of both.

The calculation needs to happen on blur of either input.

And nost importantly, the input needsto be updateable, so if the sum of both is 10, but more parameters are involved and the actual total is 12, the user can over write the javascript calculated value...

0
Question by:garethtnash

Author Comment

Hi - slight update -

I've tried -

<script>
<!--
function calc(RetainerValue,FeeCommission,SUM) {
var one = document.getElementById(RetainerValue).value;
var two = document.getElementById(FeeCommission).value;
document.getElementById(SUM).value = one + two;
}
//-->
</script>

AND

<td><input name="Locality" type="hidden" id="Locality" value="<%=(RSMemberLocality.Fields.Item("Locality").Value)%>" />        <input name="Retainerinput" type="hidden" id="Retainerinput" value="yes" />
<input name="RetainerValue" type="text" id="RetainerValue" maxlength="8" onBlur="this.value = formatField(this);calc('one','two','TotalRetainer')" /></td>
</tr>
<tr class="altrow">
<td class="labelcolumn">Fee Commission :</td>
<td><input name="FeeCommission" type="text" id="FeeCommission" maxlength="8" onBlur="this.value = formatField(this);calc('one','two','TotalRetainer')" /></td>
</tr>
<tr>
<td class="labelcolumn">Total :</td>
<td><input name="TotalRetainer" type="text" id="TotalRetainer" maxlength="8" onBlur="this.value = formatField(this)" /></td>

But no joy -

Thanks
0

LVL 53

Accepted Solution

The values being returned are strings so the need to be converted. Try:
``````function calc(RetainerValue,FeeCommission,SUM) {
var one = parseFloatdocument.getElementById(RetainerValue).value);
var two = parseFloat(document.getElementById(FeeCommission).value);
document.getElementById(SUM).value = one + two;
}
``````
0

Author Comment

Hi COBOLdinosaur,

Thanks for the post, but sadly no joy..

Thanks
0

LVL 39

Assisted Solution

try this

``````<HTML>
<TITLE>Calculator</TITLE>
<SCRIPT type="text/javascript">
function calc(RetainerValue,FeeCommission,SUM) {
var one =  parseFloat( document.getElementById(RetainerValue).value);
var two = parseFloat(document.getElementById(FeeCommission).value);
document.getElementById(SUM).value = one + two;
}

</SCRIPT>

<BODY>

<form action="" method="post" name="form1" id="form1" onsubmit="return validateform1(this)">
<h3>Complete Survey Now</h3>
<table>
<tr>
<td>
<label>Retainer Value :</label>

<input name="RetainerValue" type="text" id="RetainerValue" maxlength="8" onBlur="calc('RetainerValue','FeeCommission','TotalRetainer')" /></td>
</tr>
<tr class="altrow">
<td class="labelcolumn">Fee Commission :</td>
<td><input name="FeeCommission" type="text" id="FeeCommission" maxlength="8" onBlur="calc('RetainerValue','FeeCommission','TotalRetainer')" /></td>
</tr>
<tr>
<td class="labelcolumn">Total :</td>
<td><input name="TotalRetainer" type="text" id="TotalRetainer" maxlength="8" onBlur="this.value = formatField(this)" /></td>

</tr>
</table>
</form>

</BODY>
</HTML>
``````
0

Author Closing Comment

Thanks Guys
0

## Featured Post

### Suggested Solutions

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…