How to create a Javascript calculator

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • davibugi
    New Member
    • Sep 2007
    • 8

    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
    [code=html]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitl ed 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>
    </head>

    <body>
    <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"><i nput name="textfield 310" 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"><i nput name="textfield 311" type="text" class="style10" disabled="disab led"/>
    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"><i nput name="textfield 312" type="text" class="style10" disabled="disab led" /></td>
    </tr>
    </table>
    </form>
    </body>
    </html>
    [/code]
    Last edited by Atli; Nov 16 '07, 10:50 AM. Reason: Added [code] tags.
  • Atli
    Recognized Expert Expert
    • Nov 2006
    • 5062

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

    Comment

    • Dasty
      Recognized Expert New Member
      • Nov 2007
      • 101

      #3
      Try this:

      [HTML]
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>Untitl ed 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="javas cript">
      function val1_change()
      {
      var obj1, obj2, obj3;
      obj1 = document.getEle mentById('val1' );
      obj2 = document.getEle mentById('val2' );
      obj3 = document.getEle mentById('val3' );
      if ((obj1) && (obj2) && (obj3))
      {
      if (isNaN(obj2.val ue) || isNaN(obj1.valu e))
      {
      obj3.value = '';
      }
      else
      {
      obj3.value = obj1.value * obj2.value;
      }
      }
      }
      </script>
      </head>

      <body onload="val1_ch ange();">
      <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"><i nput onkeyup="val1_c hange();" id=val1 name="textfield 310" 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"><i nput id=val2 value="15" name="textfield 311" type="text" class="style10" disabled="disab led"/>
      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"><i nput id=val3 name="textfield 312" type="text" class="style10" disabled="disab led" /></td>
      </tr>
      </table>
      </form>
      </body>
      </html>[/HTML]

      is this what you are looking for?

      Comment

      • pbmods
        Recognized Expert Expert
        • Apr 2007
        • 5821

        #4
        Heya, David.

        We had some fun with a JS calculator awhile back in this thread.

        Comment

        • davibugi
          New Member
          • Sep 2007
          • 8

          #5
          Originally posted by Dasty
          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_a ble" 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('C onnections/con1.php'); ?>
          <?php
          function GetSQLValueStri ng($theValue, $theType, $theDefinedValu e = "", $theNotDefinedV alue = "")
          {
          $theValue = (!get_magic_quo tes_gpc()) ? addslashes($the Value) : $theValue;

          switch ($theType) {
          case "text":
          $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
          break;
          case "long":
          case "int":
          $theValue = ($theValue != "") ? intval($theValu e) : "NULL";
          break;
          case "double":
          $theValue = ($theValue != "") ? "'" . doubleval($theV alue) . "'" : "NULL";
          break;
          case "date":
          $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
          break;
          case "defined":
          $theValue = ($theValue != "") ? $theDefinedValu e : $theNotDefinedV alue;
          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, alternativeteln o, theDate, banks, `Transaction Id`, amount_banked, balance) VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s)",
          GetSQLValueStri ng($_POST['surname'], "text"),
          GetSQLValueStri ng($_POST['othernames'], "text"),
          GetSQLValueStri ng($_POST['email'], "text"),
          GetSQLValueStri ng($_POST['passport_no'], "text"),
          GetSQLValueStri ng($_POST['states'], "text"),
          GetSQLValueStri ng($_POST['telno'], "text"),
          GetSQLValueStri ng($_POST['alternativetel no'], "text"),
          GetSQLValueStri ng($_POST['theDate'], "text"),
          GetSQLValueStri ng($_POST['banks'], "text"),
          GetSQLValueStri ng($_POST['bank_transacti on_no'], "text"),
          GetSQLValueStri ng($_POST['amount_banked'], "text"),
          GetSQLValueStri ng($_POST['dispatch_able'], "text"));

          mysql_select_db ($database_con1 , $con1);
          $Result1 = mysql_query($in sertSQL, $con1) or die(mysql_error ());
          }
          ?>
          <?php require_once('C onnections/con1.php'); ?>
          <?php
          mysql_select_db ($database_con1 , $con1);
          $query_STATES = "SELECT * FROM countries ORDER BY `state` DESC";
          $STATES = mysql_query($qu ery_STATES, $con1) or die(mysql_error ());
          $row_STATES = mysql_fetch_ass oc($STATES);
          $totalRows_STAT ES = mysql_num_rows( $STATES);

          mysql_select_db ($database_con1 , $con1);
          $query_monet = "SELECT * FROM money";
          $monet = mysql_query($qu ery_monet, $con1) or die(mysql_error ());
          $row_monet = mysql_fetch_ass oc($monet);
          $totalRows_mone t = 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.dt d">
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
          <script src="calendar.j s"></script>
          <title>CARIBBEA N OVERSEAS SERVICES</title>
          <style type="text/css">
          <!--[/HTML]
          [CODE=css]body {
          margin-left: 100px;
          margin-right: 100px;
          background-image: url(images/background.jpg) ;
          background-repeat: repeat-x;
          background-color: #FFFFFF;
          }
          back {
          background-attachment: fixed;
          background-image: url(images/lineback.jpg);
          background-repeat: repeat-x;
          }
          back {
          background-attachment: fixed;
          background-image: url(images/lineback.jpg);
          background-repeat: repeat-x;
          }
          back {
          background-image: url(images/lineback.jpg);
          background-repeat: repeat-x;
          }
          .back {
          background-image: url(images/lineback.jpg);
          background-repeat: repeat-x;
          }
          .style3 {
          color: #D70000;
          font-weight: bold;
          text-transform: none;
          font-size: 13px;
          font-style: normal;
          }
          top {
          background-image: url(images/top.jpg);
          background-repeat: no-repeat;
          }
          .top {
          background-image: url(images/top.jpg);
          background-repeat: no-repeat;
          }
          a:link {
          text-decoration: none;
          color: #ffffff;
          }
          a:visited {
          text-decoration: none;
          color: #FFFFFF;
          }
          a:hover {
          text-decoration: none;
          color: #DF8D10;
          }
          a:active {
          text-decoration: none;
          }
          td.off {
          background: #003366;
          }

          td.on {
          background: #003366;
          }
          a {
          font-weight: bold;
          }
          .links { font-family: Verdana;
          font-size: 13px;
          font-style: normal;
          font-weight: bold;
          font-variant: normal;
          color: #004200;
          }
          body,td,th {
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 10px;
          color: #000000;
          }
          .style5 {
          color: #FFFFFF;
          font-size: 13px;
          font-weight: bold;
          }
          .style9 {color: #FFFFFF; font-size: 13px; }
          marquee {
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 9px;
          font-style: normal;
          font-weight: bold;
          font-variant: small-caps;
          color: #FFFFFF;
          }
          .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;
          }
          .invisible {
          background-attachment: fixed;
          background-repeat: no-repeat;
          visibility: hidden;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 8px;
          }
          .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; }
          buttons {
          }
          buton {
          font-family: Arial;
          font-size: 8px;
          }
          invisible {
          font-family: Arial;
          font-size: 9px;
          visibility: hidden;
          }
          [/CODE][HTML]-->
          </style>
          <script language="javas cript">
          [/HTML]
          [CODE=javascript] function val1_change()

          {

          var obj1, obj2, obj3, obj4;

          obj1 = document.getEle mentById('val1' );
          obj2 = document.getEle mentById('val2' );

          obj3 = document.getEle mentById('val3' );
          obj4 = document.getEle mentById('val4' );
          if ((obj1) && (obj2) && (obj3) && (obj4))

          {
          if (isNaN(obj2.val ue) || isNaN(obj1.valu e))
          {

          obj3.value = '';

          }

          else

          {

          obj3.value = obj1.value * obj2.value;

          }

          {

          obj4.value = obj1.value - obj3.value;

          }

          }

          }

          [/CODE][HTML] </script>
          <link type="text/css" rel="stylesheet " href="dhtmlgood ies_calendar/dhtmlgoodies_ca lendar.css?rand om=20051112" media="screen"> </LINK>
          <SCRIPT type="text/javascript" src="dhtmlgoodi es_calendar/dhtmlgoodies_ca lendar.js?rando m=20060118"></script>
          </head>

          <body onload="val1_ch ange();">

          <table width="798" border="0" cellpadding="0" cellspacing="0" bordercolor="#F FFFFF" class="back">
          <!--DWLayoutDefault Table-->
          <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"><i mg 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">&nbs p;</td>
          <td width="249" valign="top"><i mg src="images/boston.jpg" width="234" height="154" /></td>
          <td valign="top"><d iv align="center"> <img src="images/nairobic.jpg" width="234" height="154" /></div></td>
          </tr>

          <tr>
          <td height="3" colspan="6" valign="top"><i mg src="images/line3.gif" width="800" height="3" /></td>
          </tr>
          <tr>
          <td height="13" colspan="6" valign="top"><o bject classid="clsid: D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macrom edia.com/pub/shockwave/cabs/flash/swflash.cab#ver sion=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="ht tp://www.macromedia. com/go/getflashplayer" type="applicati on/x-shockwave-flash" width="800" height="45"></embed>
          </object></td>
          </tr>
          <tr>
          <td width="222" height="141" valign="top"><t able width="201" height="95" border="0">
          <tr>
          <td width="200" height="20" valign="top" class="off" onmouseover ="this.classNam e='on'" onmouseout ="this.classNam e='off'"><div align="left"><a href="index.php ">&nbsp;<sp an class="links">& nbsp;&nbsp;<spa n class="style5"> &nbsp;home</span></span></a></div></td>
          </tr>
          <tr>
          <td height="21" valign="top" class="off" onmouseover ="this.classNam e='on'" onmouseout ="this.classNam e='off'"><span class="links">& nbsp;&nbsp;<a href="moneytran sfer.html" class="links">& nbsp;</a></span><span class="style9"> <a href="moneytran sfer.php" class="style5"> money transfer</a></span></td>
          </tr>
          <tr>
          <td valign="top" class="off" onmouseover ="this.classNam e='on'" onmouseout ="this.classNam e='off'"><a href="contactus .php">&nbsp;&nb sp;<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.classNam e='on'" onmouseout ="this.classNam e='off'"><span class="links">& nbsp;&nbsp;&nbs p;<a href="terms and condations.html " class="style5"> terms and condations</a></span></td>
          </tr>
          </table></td>
          <td colspan="4" rowspan="2" valign="top"><t able width="342" cellspacing="0" >
          <!--DWLayoutTable-->
          <tr>
          <td height="404" valign="top"><f orm 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"><!--DWLayoutEmptyCe ll-->&nbsp;</td>
          </tr>
          <tr>
          <td height="20" colspan="2" valign="top" class="style10" ><div align="left">Su rname</div></td>
          <td colspan="5" valign="top"><i nput 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">Ot her names</div></td>
          <td colspan="5" valign="top"><i nput name="othername s" type="text" class="style10" id="othernames " size="25" />
          *</td>
          </tr>
          <tr>
          <td height="20" colspan="2" valign="top" class="style10" ><div align="left">Em ail</div></td>
          <td colspan="5" valign="top"><i nput 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">Pa ssport No </div></td>
          <td colspan="5" valign="top"><i nput 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">Mo ney 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">St ate</div></td>
          <td colspan="5" valign="top"><s pan 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=\"sel ected\"";} ?>><?php echo $row_STATES['state']?></option>
          <?php
          } while ($row_STATES = mysql_fetch_ass oc($STATES));
          $rows = mysql_num_rows( $STATES);
          if($rows > 0) {
          mysql_data_seek ($STATES, 0);
          $row_STATES = mysql_fetch_ass oc($STATES);
          }
          ?>
          [/PHP][HTML] </select>
          </span> *</td>
          </tr>
          <tr>
          <td height="20" colspan="2" valign="top" class="style10" ><div align="left">Te lephone nunber </div></td>
          <td colspan="5" valign="top"><i nput name="telno" type="text" class="style10" id="telno" />
          *</td>
          </tr>
          <tr>
          <td height="20" colspan="2" valign="top" class="style10" ><div align="left">Al ternative tel </div></td>
          <td colspan="5" valign="top"><i nput name="alternati vetelno" type="text" class="style10" id="alternative telno" />
          *</td>
          </tr>
          <tr>
          <td height="14" colspan="2" valign="top" class="style11" >Bank Details </td>
          <td colspan="5"><!--DWLayoutEmptyCe ll-->&nbsp;</td>
          </tr>


          <tr>
          <td height="20" colspan="2" valign="top" class="style10" >date of banking </td>
          <td colspan="5" valign="top"><i nput name="theDate" type="text" class="style10" value="02/11/2007" readonly="reado nly" />
          <input name="button" type="button" class="style10" onclick="displa yCalendar(docum ent.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"><s pan 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_tran saction_no" type="text" class="style10" id="bank_transa ction_no" /></td>
          </tr>
          <tr>
          <td width="106" height="22" valign="middle" class="style10" >Amount Banked </td>
          <td width="12">&nbs p;</td>

          <td width="81" valign="middle" ><input name="amount_ba nked" type="text" class="style10" id="val1" onkeyup="val1_c hange();" size="15" /></td>
          <td width="20" valign="middle" ><input name="radiobutt on" type="radio" class="on" value="radiobut ton" /></td>
          <td width="28" valign="middle" >US$</td>
          <td width="20" valign="middle" ><input name="radiobutt on" type="radio" class="on" value="radiobut ton" /></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"><i nput name="charges" type="text" disabled="disab led" class="style10" id="val4" value="2%" />
          <input name="charges1" type="text" disabled="disab led" class="invisibl e" 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"><i nput name="dispatch_ able" id="val3" type="text" class="style10" disabled="disab led" /></td>
          </tr>
          <tr>
          <td height="22" colspan="2" valign="top"><i nput name="Continue" type="submit" class="style10" id="Continue" value="continue " /></td>
          <td colspan="5" valign="top"><i nput 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&r squo; in this next step.</td>
          </tr>
          </table>

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

          <tr>
          <td height="213">&n bsp;</td>
          <td></td>
          </tr>
          <tr>
          <td height="12">&nb sp;</td>
          <td width="53">&nbs p;</td>
          <td width="25">&nbs p;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td></td>
          </tr>
          </table>
          <div id="debug"></div>
          </body>
          </html>
          [/HTML][PHP]<?php
          mysql_free_resu lt($STATES);

          mysql_free_resu lt($monet);
          ?>[/PHP]
          Last edited by acoder; Nov 26 '07, 09:42 AM. Reason: Added code tags + snipped quote

          Comment

          • davibugi
            New Member
            • Sep 2007
            • 8

            #6
            <input name="dispatch_ able" id="val3" type="text" class="style10" disabled="disab led" />

            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_a ble" which is not the case the page remains as above please help

            Comment

            • davibugi
              New Member
              • Sep 2007
              • 8

              #7
              Originally posted by davibugi
              <input name="dispatch_ able" id="val3" type="text" class="style10" disabled="disab led" />

              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_a ble" 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.

              Comment

              Working...