subtraction using javascript

Question

The below coding is my doubt. the total fees value is fetched from db. and paid is currently we enter. now i want that if i enter any value in paid, the entered value is subtract from db value and new value is display in bal fees text box and as well as store in db.

my coding is...

<HTML>
<HEAD>
<script language="javascript">
function doMath() 
{
    var oldbal= parseInt(document.getElementById('totalfees').value);
    var paid= parseInt(document.getElementById('paid').value);
    var totalfees = oldbal-paid;
    document.getElementById('totalfees').value = totalfees;
}
</script>

</HEAD>
<body>

<?php
//fteching query
include("db.php");
$billtype_id = $_GET['billtype_id'];
$result=mysql_query("select * from bill_type where billtype_id=$billtype_id");
while($res=mysql_fetch_array($result))
{
$totalfees=$res['totalfees'];
}
//inserting query
$sql=mysql_query("insert into fees_admin values totalfees='$balfees' WHERE billtype_id='$billtype_id'",$conn);


include("config.php");
$balfees=$_POST['totalfees'];
$sql=mysql_query("insert into fees_admin values totalfees='$balfees' WHERE billtype_id='$billtype_id'",$conn);
?>
//html form

<form name="form" method="post" action="<?php $_SERVER['PHP_SELF'];?>">
<table>
<tr>
  <td>Total Fees :</td> 
  <td><input name="total" type="text" id="oldbal" value="<?php echo $totalfees;?>" readonly="true" style="background-color:#FFFFFF"></td>
</tr> 
<tr>

  <td>Paid :</td>
  <td><input type="text" id="paid" name="paid" onKeyUp="doMath();"></td>
</tr> 
<tr>

  <td>Bal Fees</td>
  <td><input name="totalfees" type="text"  id="totalfees" readonly="true" style="background-color:#FFFFFF"></td>
</tr>
</table>
</form>

Thanks for reading. please clear my doubt..

You should also read the legend of little bobby tables... http://stackoverflow.com/questions/332365/xkcd-sql-injection-please-explain. (Your code is NOT secure) — calumbrodie, Jul 05 '11 at 07:33
i'm not get the correct output for this form. for ex if db value in first text box is 5000 then i enter 2000 in next then the rem 3000 is automatically display in third text box. this is my doupt. — boopathi, Jul 05 '11 at 07:39

Shakakai · Answer 1 · 2011-07-05T07:42:39.673

0

To be clear, input elements will return a string when you call "value". So in your example you would need to change the subtraction equation to:

var totalfees = parseFloat(oldbal) - parseFloat(paid);

You can use parseFloat to create a float from a string or parseInt if you don't need decimal precision.

You should probably also change you HTML code to make the DOM level 0 event "change" rather than keyUp. Its more consistent across a range of different browsers (Desktop, Mobile, Tablet).

edited Jul 05 '11 at 07:42

answered Jul 05 '11 at 07:35

Shakakai

3,514
1
16
18

ooops, you have parseInt in there. Sorry :( – Shakakai Jul 05 '11 at 07:43
are you debugging with firebug? getting any errors? (if you aren't using firebug, get it now - http://getfirebug.com/) – Shakakai Jul 05 '11 at 07:51
I'm always using firebug. but using this I'm not get any errors and warnings, notice etc. any other way for this doubt.? – boopathi Jul 05 '11 at 07:56
if you toss a console.log into that function to trace out the individual values and the computed result do you see trace statements? – Shakakai Jul 05 '11 at 08:03

stealthyninja · Answer 2 · 2011-07-05T11:20:57.623

Change

var oldbal= parseInt(document.getElementById('totalfees').value);

to

var oldbal = parseInt(document.getElementById('oldbal').value);

Function should then look like

function doMath() 
{
    var oldbal = document.getElementById('oldbal').value;
    var paid = document.getElementById('paid').value;

    var totalfees = parseInt(oldbal) - parseInt(paid);

    document.getElementById('totalfees').value = totalfees;
}

I believe you were retrieving the wrong input element.

subtraction using javascript

2 Answers2