?
Solved

Javascript Calculation

Posted on 2011-10-23
5
Medium Priority
?
299 Views
Last Modified: 2012-05-12
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>
      <label>Comments</label>
      <div class="retainerholdertextarea"><textarea name="Comments" cols="36" rows="5" id="Comments"></textarea></div>
      <input type="image" class="submitbutton" src="png/submit.png">
      </li>
</ul>
</form>

Open in new window


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...

Appreciate any help you can offer - Many thanks

0
Comment
Question by:garethtnash
  • 3
5 Comments
 

Author Comment

by:garethtnash
ID: 37013828
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

by:
COBOLdinosaur earned 1000 total points
ID: 37014230
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;
}

Open in new window

0
 

Author Comment

by:garethtnash
ID: 37016476
Hi COBOLdinosaur,

Thanks for the post, but sadly no joy..

Thanks
0
 
LVL 39

Assisted Solution

by:Pratima Pharande
Pratima Pharande earned 1000 total points
ID: 37016827
try this

add it to your code this is only part of code
<HTML>
<HEAD>
<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>
</HEAD>

<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>

Open in new window

0
 

Author Closing Comment

by:garethtnash
ID: 37061780
Thanks Guys
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Suggested Courses

809 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