469,289 Members | 2,155 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,289 developers. It's quick & easy.

How to create a Javascript calculator

Hi people please help me out with this code cant find any person who has done it before.

I want my calculations to be done without posting to another page. On change on the entered amount the results are displayed please help

Asante (Swahili for thanks)

Here is my code
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. <!--
  8. .style10 {color: #004200;
  9.     font-family: Verdana, Arial, Helvetica, sans-serif;
  10.     font-size: 9px;
  11.     font-style: normal;
  12.     line-height: normal;
  13.     font-weight: normal;
  14.     font-variant: normal;
  15.     text-transform: capitalize;
  16. }
  17. -->
  18. </style>
  19. </head>
  20.  
  21. <body>
  22. <form id="form1" name="form1" method="post" action="">
  23.   <table width="335" height="83" border="0">
  24.     <!--DWLayoutTable-->
  25.     <tr>
  26.       <td height="20" colspan="2" valign="top" class="style10">Amount Banked </td>
  27.       <td colspan="2" valign="top"><input name="textfield310" type="text" class="style10" />
  28.       what the client keys in </td>
  29.     </tr>
  30.     <tr>
  31.       <td height="20" colspan="2" valign="top" class="style10">Charges</td>
  32.       <td colspan="2" valign="top"><input name="textfield311" type="text" class="style10" disabled="disabled"/>
  33.       rates are to come from the database </td>
  34.     </tr>
  35.     <tr>
  36.       <td height="20" colspan="2" valign="top" class="style10">Balance available to send </td>
  37.       <td colspan="2" valign="top"><input name="textfield312" type="text" class="style10" disabled="disabled" /></td>
  38.     </tr>
  39.   </table>
  40. </form>
  41. </body>
  42. </html>
  43.  
Nov 16 '07 #1
6 2023
Atli
5,058 Expert 4TB
Hi.

In this case, I think your best bet would be Javascript.
I'll move this thread over to the Javascript forums, where the Javascript experts will find it.

Also, I've change the title of the thread to better describe it's contents.

Moderator
Nov 16 '07 #2
Dasty
101 Expert 100+
Try this:

[HTML]
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style10 {color: #004200;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: capitalize;
}
-->
</style>

<script language="javascript">
function val1_change()
{
var obj1, obj2, obj3;
obj1 = document.getElementById('val1');
obj2 = document.getElementById('val2');
obj3 = document.getElementById('val3');
if ((obj1) && (obj2) && (obj3))
{
if (isNaN(obj2.value) || isNaN(obj1.value))
{
obj3.value = '';
}
else
{
obj3.value = obj1.value * obj2.value;
}
}
}
</script>
</head>

<body onload="val1_change();">
<form id="form1" name="form1" method="post" action="">
<table width="335" height="83" border="0">
<!--DWLayoutTable-->
<tr>
<td height="20" colspan="2" valign="top" class="style10">Amount Banked </td>
<td colspan="2" valign="top"><input onkeyup="val1_change();" id=val1 name="textfield310" type="text" class="style10" />
what the client keys in </td>
</tr>
<tr>
<td height="20" colspan="2" valign="top" class="style10">Charges</td>
<td colspan="2" valign="top"><input id=val2 value="15" name="textfield311" type="text" class="style10" disabled="disabled"/>
rates are to come from the database </td>
</tr>
<tr>
<td height="20" colspan="2" valign="top" class="style10">Balance available to send </td>
<td colspan="2" valign="top"><input id=val3 name="textfield312" type="text" class="style10" disabled="disabled" /></td>
</tr>
</table>
</form>
</body>
</html>[/HTML]

is this what you are looking for?
Nov 16 '07 #3
pbmods
5,821 Expert 4TB
Heya, David.

We had some fun with a JS calculator awhile back in this thread.
Nov 17 '07 #4
Try this:
[snip]
is this what you are looking for?
Hi Dasty

Thanks I customized that and connected it to the database to get some values but I have trouble posting the values in the in this field "dispatch_able" please help me out I want to send it to the database and to another page which sends the mail to the form owner

Here is my code thanks in advance

[PHP]<?php require_once('Connections/con1.php'); ?>
<?php
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
$theValue = (!get_magic_quotes_gpc()) ? addslashes($theValue) : $theValue;

switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}

$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}

if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) {
$insertSQL = sprintf("INSERT INTO moneydetails (surname, othername, email, passport, `state`, telno, alternativetelno, theDate, banks, `Transaction Id`, amount_banked, balance) VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s)",
GetSQLValueString($_POST['surname'], "text"),
GetSQLValueString($_POST['othernames'], "text"),
GetSQLValueString($_POST['email'], "text"),
GetSQLValueString($_POST['passport_no'], "text"),
GetSQLValueString($_POST['states'], "text"),
GetSQLValueString($_POST['telno'], "text"),
GetSQLValueString($_POST['alternativetelno'], "text"),
GetSQLValueString($_POST['theDate'], "text"),
GetSQLValueString($_POST['banks'], "text"),
GetSQLValueString($_POST['bank_transaction_no'], "text"),
GetSQLValueString($_POST['amount_banked'], "text"),
GetSQLValueString($_POST['dispatch_able'], "text"));

mysql_select_db($database_con1, $con1);
$Result1 = mysql_query($insertSQL, $con1) or die(mysql_error());
}
?>
<?php require_once('Connections/con1.php'); ?>
<?php
mysql_select_db($database_con1, $con1);
$query_STATES = "SELECT * FROM countries ORDER BY `state` DESC";
$STATES = mysql_query($query_STATES, $con1) or die(mysql_error());
$row_STATES = mysql_fetch_assoc($STATES);
$totalRows_STATES = mysql_num_rows($STATES);

mysql_select_db($database_con1, $con1);
$query_monet = "SELECT * FROM money";
$monet = mysql_query($query_monet, $con1) or die(mysql_error());
$row_monet = mysql_fetch_assoc($monet);
$totalRows_monet = mysql_num_rows($monet);
?>[/PHP][HTML]<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="calendar.js"></script>
<title>CARIBBEAN OVERSEAS SERVICES</title>
<style type="text/css">
<!--[/HTML]
Expand|Select|Wrap|Line Numbers
  1. body {
  2.     margin-left: 100px;
  3.     margin-right: 100px;
  4.     background-image: url(images/background.jpg);
  5.     background-repeat: repeat-x;
  6.     background-color: #FFFFFF;
  7. }
  8. back {
  9.     background-attachment: fixed;
  10.     background-image: url(images/lineback.jpg);
  11.     background-repeat: repeat-x;
  12. }
  13. back {
  14.     background-attachment: fixed;
  15.     background-image: url(images/lineback.jpg);
  16.     background-repeat: repeat-x;
  17. }
  18. back {
  19.     background-image: url(images/lineback.jpg);
  20.     background-repeat: repeat-x;
  21. }
  22. .back {
  23.     background-image: url(images/lineback.jpg);
  24.     background-repeat: repeat-x;
  25. }
  26. .style3 {
  27.     color: #D70000;
  28.     font-weight: bold;
  29.     text-transform: none;
  30.     font-size: 13px;
  31.     font-style: normal;
  32. }
  33. top {
  34.     background-image: url(images/top.jpg);
  35.     background-repeat: no-repeat;
  36. }
  37. .top {
  38.     background-image: url(images/top.jpg);
  39.     background-repeat: no-repeat;
  40. }    
  41. a:link {
  42.     text-decoration: none;
  43.     color: #ffffff;
  44. }
  45. a:visited {
  46.     text-decoration: none;
  47.     color: #FFFFFF;
  48. }
  49. a:hover {
  50.     text-decoration: none;
  51.     color: #DF8D10;
  52. }
  53. a:active {
  54.     text-decoration: none;
  55. }
  56. td.off {
  57. background: #003366;
  58. }
  59.  
  60. td.on {
  61. background: #003366;
  62. }
  63. a {
  64.     font-weight: bold;
  65. }
  66. .links {    font-family: Verdana;
  67.     font-size: 13px;
  68.     font-style: normal;
  69.     font-weight: bold;
  70.     font-variant: normal;
  71.     color: #004200;
  72. }
  73. body,td,th {
  74.     font-family: Verdana, Arial, Helvetica, sans-serif;
  75.     font-size: 10px;
  76.     color: #000000;
  77. }
  78. .style5 {
  79.     color: #FFFFFF;
  80.     font-size: 13px;
  81.     font-weight: bold;
  82. }
  83. .style9 {color: #FFFFFF; font-size: 13px; }
  84. marquee {
  85.     font-family: Verdana, Arial, Helvetica, sans-serif;
  86.     font-size: 9px;
  87.     font-style: normal;
  88.     font-weight: bold;
  89.     font-variant: small-caps;
  90.     color: #FFFFFF;
  91. }
  92. .style10 {    color: #004200;
  93.     font-family: Verdana, Arial, Helvetica, sans-serif;
  94.     font-size: 9px;
  95.     font-style: normal;
  96.     line-height: normal;
  97.     font-weight: normal;
  98.     font-variant: normal;
  99.     text-transform: capitalize;
  100. }
  101. .invisible {
  102.     background-attachment: fixed;
  103.     background-repeat: no-repeat;
  104.     visibility: hidden;
  105.     font-family: Verdana, Arial, Helvetica, sans-serif;
  106.     font-size: 8px;
  107. }
  108. .style11 {color: #004200; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: capitalize; }
  109. buttons {
  110. }
  111. buton {
  112.     font-family: Arial;
  113.     font-size: 8px;
  114. }
  115. invisible {
  116.     font-family: Arial;
  117.     font-size: 9px;
  118.     visibility: hidden;
  119. }
  120.  
[HTML]-->
</style>
<script language="javascript">
[/HTML]
Expand|Select|Wrap|Line Numbers
  1.         function val1_change()
  2.  
  3.       {
  4.  
  5.         var obj1, obj2, obj3, obj4;
  6.  
  7.         obj1 = document.getElementById('val1');
  8.    obj2 = document.getElementById('val2');
  9.  
  10.         obj3 = document.getElementById('val3');
  11. obj4 = document.getElementById('val4');
  12.         if ((obj1) && (obj2) && (obj3) && (obj4))
  13.  
  14.         {
  15.           if (isNaN(obj2.value) || isNaN(obj1.value))
  16.           {
  17.  
  18.             obj3.value = '';
  19.  
  20.           }
  21.  
  22.           else
  23.  
  24.           {
  25.  
  26.             obj3.value = obj1.value * obj2.value;
  27.  
  28.           }
  29.  
  30.            {
  31.  
  32.             obj4.value = obj1.value - obj3.value;
  33.  
  34.           }
  35.  
  36.         }
  37.  
  38.       }
  39.  
  40.  
[HTML] </script>
<link type="text/css" rel="stylesheet" href="dhtmlgoodies_calendar/dhtmlgoodies_calendar.css?random=20051112" media="screen"></LINK>
<SCRIPT type="text/javascript" src="dhtmlgoodies_calendar/dhtmlgoodies_calendar.js?random=20060118"></script>
</head>

<body onload="val1_change();">

<table width="798" border="0" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" class="back">
<!--DWLayoutDefaultTable-->
<tr>
<td height="30" colspan="2" valign="bottom" class="style3"><div align="center">swift</div></td>
<td colspan="3" valign="bottom" class="style3"><div align="center">reliable</div></td>
<td width="234" valign="bottom" class="style3"><div align="center">safe</div></td>
</tr>
<tr>
<td height="3" colspan="6" valign="top"><img src="images/line3.gif" width="800" height="3" /></td>
</tr>
<tr>
<td height="154" colspan="3" valign="middle"><div align="center"><img src="images/name.jpg" width="279" height="80" /></div></td>
<td width="15">&nbsp;</td>
<td width="249" valign="top"><img src="images/boston.jpg" width="234" height="154" /></td>
<td valign="top"><div align="center"><img src="images/nairobic.jpg" width="234" height="154" /></div></td>
</tr>

<tr>
<td height="3" colspan="6" valign="top"><img src="images/line3.gif" width="800" height="3" /></td>
</tr>
<tr>
<td height="13" colspan="6" valign="top"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="800" height="45">
<param name="movie" value="flash/movie.swf" />
<param name="quality" value="high" />
<embed src="flash/movie.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="45"></embed>
</object></td>
</tr>
<tr>
<td width="222" height="141" valign="top"><table width="201" height="95" border="0">
<tr>
<td width="200" height="20" valign="top" class="off" onmouseover ="this.className='on'" onmouseout ="this.className='off'"><div align="left"><a href="index.php">&nbsp;<span class="links">&nbsp;&nbsp;<span class="style5">&nbsp;home</span></span></a></div></td>
</tr>
<tr>
<td height="21" valign="top" class="off" onmouseover ="this.className='on'" onmouseout ="this.className='off'"><span class="links">&nbsp;&nbsp;<a href="moneytransfer.html" class="links">&nbsp;</a></span><span class="style9"><a href="moneytransfer.php" class="style5">money transfer</a></span></td>
</tr>
<tr>
<td valign="top" class="off" onmouseover ="this.className='on'" onmouseout ="this.className='off'"><a href="contactus.php">&nbsp;&nbsp;<span class="style5">&nbsp;<span class="style9">&nbsp;</span>contact us</span></a> </td>
</tr>
<tr>
<td height="22" valign="top" class="off" onmouseover ="this.className='on'" onmouseout ="this.className='off'"><span class="links">&nbsp;&nbsp;&nbsp;<a href="terms and condations.html" class="style5">terms and condations</a></span></td>
</tr>
</table></td>
<td colspan="4" rowspan="2" valign="top"><table width="342" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td height="404" valign="top"><form id="form1" name="form1" method="POST" action="<?php echo $editFormAction; ?>">
<table width="335" height="427" border="0">
<!--DWLayoutTable-->
<tr>
<td height="18" colspan="2" class="style11">Your Details </td>
<td colspan="5"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td height="20" colspan="2" valign="top" class="style10"><div align="left">Surname</div></td>
<td colspan="5" valign="top"><input name="surname" type="text" class="style10" id="surname" size="25" />
*</td>
</tr>
<tr>
<td height="20" colspan="2" valign="top" class="style10"><div align="left">Other names</div></td>
<td colspan="5" valign="top"><input name="othernames" type="text" class="style10" id="othernames" size="25" />
*</td>
</tr>
<tr>
<td height="20" colspan="2" valign="top" class="style10"><div align="left">Email</div></td>
<td colspan="5" valign="top"><input name="email" type="text" class="style10" id="email" size="25" />
*</td>
</tr>
<tr>
<td height="20" colspan="2" valign="top" class="style10"><div align="left">Passport No </div></td>
<td colspan="5" valign="top"><input name="passport_no" type="text" class="style10" id="passport_no" size="25" />
*</td>
</tr>
<tr>
<td height="20" colspan="2" valign="top" class="style10"><div align="left">Money Transfer code </div></td>
<td colspan="5" valign="top" class="style10"><input name="MT_code" type="text" class="style10" id="MT_code" />
*</td>
</tr>
<tr>
<td height="20" colspan="2" valign="top" class="style10"><div align="left">State</div></td>
<td colspan="5" valign="top"><span class="style10">
<select name="states" class="style10" id="states" title="<?php echo $row_STATES['state']; ?>">[/HTML]
[PHP] <?php
do {
?>
<option value="<?php echo $row_STATES['state']?>"<?php if (!(strcmp($row_STATES['state'], $row_STATES['state']))) {echo "selected=\"selected\"";} ?>><?php echo $row_STATES['state']?></option>
<?php
} while ($row_STATES = mysql_fetch_assoc($STATES));
$rows = mysql_num_rows($STATES);
if($rows > 0) {
mysql_data_seek($STATES, 0);
$row_STATES = mysql_fetch_assoc($STATES);
}
?>
[/PHP][HTML] </select>
</span> *</td>
</tr>
<tr>
<td height="20" colspan="2" valign="top" class="style10"><div align="left">Telephone nunber </div></td>
<td colspan="5" valign="top"><input name="telno" type="text" class="style10" id="telno" />
*</td>
</tr>
<tr>
<td height="20" colspan="2" valign="top" class="style10"><div align="left">Alternative tel </div></td>
<td colspan="5" valign="top"><input name="alternativetelno" type="text" class="style10" id="alternativetelno" />
*</td>
</tr>
<tr>
<td height="14" colspan="2" valign="top" class="style11">Bank Details </td>
<td colspan="5"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>


<tr>
<td height="20" colspan="2" valign="top" class="style10">date of banking </td>
<td colspan="5" valign="top"><input name="theDate" type="text" class="style10" value="02/11/2007" readonly="readonly" />
<input name="button" type="button" class="style10" onclick="displayCalendar(document.forms[0].theDate,'dd/mm/yyyy',this)" value="select" /></td>
</tr>
<tr>
<td height="20" colspan="2" valign="top" class="style10">Bank</td>
<td colspan="5" valign="top"><span class="style10">
<select name="banks" class="style10" id="banks">
<option value="chase bank">chase bank</option>
<option value="wells fargo">wells fargo</option>
</select>
*</span></td>
</tr>


<tr>
<td height="22" valign="middle" class="style10">Transaction ID </td>
<td>&nbsp;</td>
<td colspan="5" valign="middle"><input name="bank_transaction_no" type="text" class="style10" id="bank_transaction_no" /></td>
</tr>
<tr>
<td width="106" height="22" valign="middle" class="style10">Amount Banked </td>
<td width="12">&nbsp;</td>

<td width="81" valign="middle"><input name="amount_banked" type="text" class="style10" id="val1" onkeyup="val1_change();" size="15" /></td>
<td width="20" valign="middle"><input name="radiobutton" type="radio" class="on" value="radiobutton" /></td>
<td width="28" valign="middle">US$</td>
<td width="20" valign="middle"><input name="radiobutton" type="radio" class="on" value="radiobutton" /></td>
<td width="38" valign="middle">Euro</td>
</tr>
<?php
$rates= 100-$row_monet['charges'];
$charges=$rates/100;
?>
<tr>
<td height="20" colspan="2" valign="top" class="style10">Charges</td>
<td colspan="5" valign="top"><input name="charges" type="text" disabled="disabled" class="style10" id="val4" value="2%" />
<input name="charges1" type="text" disabled="disabled" class="invisible" id="val2" value="<?php echo $charges; ?>" size="15" /></td>
</tr>
<tr>
<td height="26" colspan="2" valign="top" class="style10">Balance available to send </td>
<td colspan="5" valign="top"><input name="dispatch_able" id="val3" type="text" class="style10" disabled="disabled" /></td>
</tr>
<tr>
<td height="22" colspan="2" valign="top"><input name="Continue" type="submit" class="style10" id="Continue" value="continue" /></td>
<td colspan="5" valign="top"><input name="Continue2" type="reset" class="style10" id="Continue2" value="reset" /></td>
</tr>
<tr>
<td height="26" colspan="7" valign="top" class="style10">Kindly provide details of the beneficiaries&rsquo; in this next step.</td>
</tr>
</table>

<input type="hidden" name="MM_insert" value="form1">
</form> </td>
</tr>
</table></td>
<td><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>[/HTML]
[HTML]

<tr>
<td height="213">&nbsp;</td>
<td></td>
</tr>
<tr>
<td height="12">&nbsp;</td>
<td width="53">&nbsp;</td>
<td width="25">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td></td>
</tr>
</table>
<div id="debug"></div>
</body>
</html>
[/HTML][PHP]<?php
mysql_free_result($STATES);

mysql_free_result($monet);
?>[/PHP]
Nov 26 '07 #5
<input name="dispatch_able" id="val3" type="text" class="style10" disabled="disabled" />

I guess all am asking is how do you pass val3 to php val3 is in java beacuse when I try to post what I have currently, its posting the value "dispatch_able" which is not the case the page remains as above please help
Nov 26 '07 #6
<input name="dispatch_able" id="val3" type="text" class="style10" disabled="disabled" />

I guess all am asking is how do you pass val3 to php val3 is in java beacuse when I try to post what I have currently, its posting the value "dispatch_able" which is not the case the page remains as above please help

Think this is solved I used the get function to get the value in that text field to get it to the email page.
Nov 27 '07 #7

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Sean McCourt | last post: by
6 posts views Thread by Rafael | last post: by
3 posts views Thread by Paul | last post: by
5 posts views Thread by VB Programmer | last post: by
14 posts views Thread by electrician | last post: by
24 posts views Thread by firstcustomer | last post: by
3 posts views Thread by wolis | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.