By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,389 Members | 2,010 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,389 IT Pros & Developers. It's quick & easy.

calculation function

P: 47
dear sir..my friend give me one code how to calculate without pressing any button... but i didn't know how to insert function to make it work... very very newbie in calculation using javascript..please someonehelp me please..
Expand|Select|Wrap|Line Numbers
  1. var total = (document.getElementById("cam").value + document.getElementById("final_exam").value) / 2;
  2.  
  3. document.getElementById("total").value = total;
Aug 27 '08 #1
Share this Question
Share on Google+
22 Replies


RamananKalirajan
100+
P: 607
Hello Azura. There are many ways u can do that without clicking a button. can u please send me the full code what u are working at. If your form contains three text box means, 1 for entering the first value, 2 for entering the second value and the 3 for total. in the 2nd text box you write the event onblur="calculate()". And your code in calculate function. That will match ur requirement. if any doubts post back it I will help u out.

[HTML]<html>
<head>
<script type="text/javascript">
function calculate()
{
var total = (parseInt(document.getElementById("cam").value) + parseInt(document.getElementById("final_exam").val ue)) / 2;
document.getElementById("total").value = total;
}
</script>
</head>
<body>
Enter a <input type="text" id="cam"><br/>
Enter b <input type="text" id="final_exam" onblur="calculate()"><br/>
Total = <input type="text" id="total"><br/>
</body>
</html>[/HTML]

In the function I used parseInt() for getting the data. In javascript whatever the data got from input item will be defaultly consider as a String. Inorder to convert I had used it

Regards
Ramanan Kalirajan
Aug 27 '08 #2

P: 47
thanks.... it's work but i change it into onclick at the final score... thanks again sir...
Aug 27 '08 #3

P: 47
dear sir... it work when i data only..how can i get those work in many data... like repeat region??
Aug 27 '08 #4

RamananKalirajan
100+
P: 607
dear sir... it work when i data only..how can i get those work in many data... like repeat region??

Hello I am really sorry I am not able to follow ur requirement clearly. can u please post me the code what u are working on. U want to calculate for many texts. [Kind Note: pls dont call me as sir, call me Ramanan. just few months back i completed my college]

Regards
Ramanan Kalirajan
Aug 27 '08 #5

P: 47
ok i take all the information is from my database..so admin just key in the number and total will came auto..but it work if one data that i retrieve from database..but if there is many info in my database how??

[PHP]<html>
<head>
<title>List Registered Subject | Medic Assessment System</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Keywords here">
<meta name="description" content="Description here">
<meta name="Author" content="Joseph De Araujo">
<meta name="Publisher" content="MyFreeTemplates.com">
<meta name="robots" content="index, follow"> <!-- (robot commands: all, none, index, no index, follow, no follow) -->
<meta name="revisit-after" content="30 days">
<meta name="distribution" content="global">
<meta name="rating" content="general">
<meta name="content-language" content="english">
<title>Class List View | Medic Assessment System</title>
<script language="JavaScript" type="text/JavaScript" src="images/myfreetemplates.js"></script>

<style type="text/css">
<!--
.basestyle {
color: #FFFFFF;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {
font-size: 16px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
body, td, p, input {
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
}
.navlinks {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
}
.style6 {
font-size: 12px;
color: #000000;
font-weight: bold;
}
.style7 {
font-size: 12px;
font-weight: bold;
}
.style10 {color: #000000}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.style11 {color: #000000; font-size: 12px;}
.style12 {font-weight: bold}
.style13 {
font-size: 12px;
color: #000000;
background-color: #D6D6D6;
height: 22px;
width: 72px;
outline: 1;
border: 1;
font-weight: normal;
}
.style15 {font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; }
-->
</style>

<script type="text/javascript">

function calculate()

{

var total = (parseInt(document.getElementById("cam").value) + parseInt(document.getElementById("final_exam").val ue)) / 2;

document.getElementById("total").value = total;

}

</script>
<script type="text/javascript">

function calculate()

{

var total = (parseInt(document.getElementById("cam").value) + parseInt(document.getElementById("final_exam").val ue)) / 2;

document.getElementById("total").value = total;

}

</script>

<script src="../../../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body style="margin:0; background-color: #E4E7E6;" <?php if($saved){echo 'onload="alert(\'Records successfully saved.\');"';}?>>

<table width=1097 height="100%" border=1 align="center" cellpadding=0 cellspacing=0>

<tr align="center" valign="middle">
<td height="34" colspan="2" class="style11">You are here&gt;&gt;<a href="main.php">Main Menu</a> &gt;&gt;Examination&gt;&gt;Insert Result </td>
</tr>
<tr>
<td width="202" height = "90%"valign="top"><div align="center" class="style6">

</div>
<div align="center" class="style7"> EXAMINATION</div>
<ul>
<li><span>
<a href="exm.php">Insert Result
</a></span> </li>
</ul>
<p><span class="style7"><a href="<?php echo $logoutAction ?>">&gt;&gt;LOGOUT</a></span> </p>
<p align="center" class="style7">Date: <?php echo date('d-m-Y') ."\n";?></p></td>
<td width="889" valign="top" style="padding-left:20px; padding-top:25px; padding-right:40px; padding-bottom:35px; "><p>
<form id="form2" name="form2" method="post" action="">
<p align="center" class="style12 style28 style29"><strong>LIST REGISTERED SUBJECTS</strong></p>
<p align="center" class="style12">&nbsp;</p>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<p>&nbsp;</p>
<table width="601" height="138" border="0">


<tr>
<td height="26">Session</td>
<td><div align="center">:</div></td>
<td><input name="sessi" type="text" id="sessi" value="<?php echo $row_test['sessi']; ?>" size="10" readonly="true" /></td>
</tr>
<tr>
<td height="26">Year</td>
<td><div align="center">:</div></td>
<td><input name="year" type="text" id="year" value="<?php echo $row_test['year']; ?>" size="10" readonly="true" /></td>
</tr>
<tr>
<td width="92" height="26"><div align="left">Group</div></td>
<td width="10"><div align="center">:</div></td>
<td width="360"><input name="group" type="text" id="group" value="<?php echo $row_test['group']; ?>" size="10" readonly="true" /></td>
</tr>
<tr>
<td height="22">Subject Code</td>
<td><div align="center">:</div></td>
<td><input name="s_code" type="text" id="s_code" value="<?php echo $row_test['s_code']; ?>" size="10" readonly="true" /></td>
</tr>
<tr>
<td height="23">Title</td>
<td><div align="center">:</div></td>
<td><input name="s_title" type="text" id="s_title" size="80" value="<?php echo $row_Recordset2['s_title']; ?>" readonly="true" /></td>
</tr>
</table>
</blockquote>
</blockquote>
</blockquote>
</blockquote>

<p>&nbsp;</p>
<table width="609" height="54" border="0" align="center">
<tr>
<td width="60" height="28" scope="col"><span class="style15">Matric No.</span></td>
<td width="48" scope="col"><span class="style15">CAM</span></td>
<td width="48" scope="col"><div align="left" class="style15">
<div align="center">Final Exam</div>
</div> </td>
<td width="48" scope="col"><div align="left" class="style15">
<div align="center">Total Score</div>
</div></td>
<td width="383" scope="col"><span class="style15">Grade</span></td>
</tr>

<?php do { ?>
<tr>
<td height="20" scope="col"><input name="matric_no[]" type="text" id="matric_no[]" value="<?php echo $row_test['matric_no']; ?>" size="10" readonly="true" /></td>
<td scope="col"><input name="cam" type="int" id="cam" size="8" /></td>
<td scope="col" ><input name="final_exam" type="int" id="final_exam" size="8" onClick="calculate()" /></td>
<td scope="col"><input name="total" type="int" id="total" size="8" readonly="true" /></td>
<td scope="col"><input name="grade" type="text" id="grade" size="8" onClick="grade()"/></td>
</tr>
<?php } while ($row_test = mysql_fetch_assoc($test)); ?>
</table>
<p align="center">&nbsp;</p>
<table width="200" border="0" align="center">
<tr>
<th scope="col"><input name="save" type="submit" class="style13" id="save" value="Save" /></th>
<th scope="col"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0','width','77','height' ,'22','src','exmtry','quality','high','pluginspage ','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','bgco lor','#E4E7E6','scale','noborder','movie','exmtry' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="77" height="22">
<param name="movie" value="exmtry.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#E4E7E6">
<param name="SCALE" value="noborder">
<embed src="exmtry.swf" width="77" height="22" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#E4E7E6" scale="noborder"></embed>
</object>
</noscript></th>
</tr>
</table>
<div align="center"></div>
<p align="center">&nbsp; </p>
<p>&nbsp;</p>
<p align="center" class="style8">&nbsp;</p>
</form> </td>
</tr>

<tr>
<td height="58" colspan="2"><table width="100%" height="39" border="0" cellpadding="0" cellspacing="0">
<tr>

<td align="center" class="basestyle"><span class="style31 style10">&copy; Copyright . All Rights Reserved.&nbsp;<a href="http://www.myfreetemplates.com" class="basestyle"></a></span></td>
</tr>
</table></td>
</tr>
</table>
</body>

<?php

mysql_free_result($test);

?>
</html>[/PHP]
Aug 27 '08 #6

RamananKalirajan
100+
P: 607
I am not good at PHP. But for your question i.e. adding many values retrieved from the db, wether you display all the value in a table inside a textbox that should be added.

For ex. u are having three values in the DB. u want the reult of the three values added and u are showing all the values in the table like

tr td input --> first data
tr td input --> second data
tr td input --> third data
tr td input --> total value

Like this. please correct If i am wrong anywhere. if this is ur requirement u can easily sum all the values. For each and every input u will be giveing some Id's. set the Id sequentially starting from 0,1 and so on. In the calculate()

[HTML]var i=0;
var totall=0
var x;
while(true)
{
x=parseInt(document.getElementById(i).value);
if(x==null||x==undefined)
break;
else
total+=x;
}
document.getElementById('total').value=total;[/HTML]

If u doesn't need this. pls post me wat u need. Sorry I am not good in PHP

Regards
Ramanan Kalirajan
Aug 27 '08 #7

P: 47
you gave if we calculate one data,right?? what if we want to calculate many data like. the earlier part you gave it's work but if there is one data only..

cam(insert number) + final(insert number) = total (auto)(1 data)

cam (insert number) + final(insert number) = total (auto)(2 data)
Aug 28 '08 #8

acoder
Expert Mod 15k+
P: 16,027
You can use document.getElementsByName("cam") and "final_exam" to get a list of input elements. Then loop over them using a for loop, e.g.
Expand|Select|Wrap|Line Numbers
  1. for (i = 0; i < cam.length; i++) {
  2.    //cam[i] contains the i'th element...
  3.  
Aug 28 '08 #9

P: 47
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. function calculate()
  4. {
  5. for (i = 0; i < cam.length; i++) {
  6.  
  7. var total = (parseInt(document.getElementByName("cam").value) + parseInt(document.getElementByName("final_exam").value));
  8.  
  9. document.getElementByName("total").value = total;
  10.  
  11. }
  12. }
  13. </script>
  14.  
like this??? i had tried but don't have any data came out... gosh!! very stuck!!
Aug 29 '08 #10

acoder
Expert Mod 15k+
P: 16,027
No, document.getElementByName("cam") returns an array of elements, so something like:
Expand|Select|Wrap|Line Numbers
  1. var cams = document.getElementByName("cam");
  2. var finals = document.getElementByName("final_exam");
  3. var total = 0;
  4. for (i = 0; i < cams.length; i++) {
  5.     var total += parseInt(cams[i].value) + parseInt(finals[i].value);
  6. }
  7. document.getElementByName("total").value = total;
Aug 29 '08 #11

P: 47
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. function calculate()
  4.  
  5.       var cams = document.getElementByName("cam");
  6.  
  7.       var finals = document.getElementByName("final_exam");
  8.  
  9.       var total = 0;
  10.  
  11.       for (i = 0; i < cams.length; i++) {
  12.  
  13.           var total = parseInt(cams[i].value) + parseInt(finals[i].value);
  14.  
  15.     }
  16.  
  17.       document.getElementByName("total").value = total;
  18.  
  19.  
  20.  
  21. </script>
still don't work..
Sep 2 '08 #12

Dormilich
Expert Mod 5K+
P: 8,639
that's because of a typing error: it should be
Expand|Select|Wrap|Line Numbers
  1. document.getElementsByName()
  2. // and
  3. document.getElementsByName("total")[0].value = total;
like acoder said, getElementsByName is always returning an array (even if there's only one element present)
Sep 2 '08 #13

P: 47
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  function calculate()
  3.  
  4.  
  5. var cams = document.getElementsByName("cam");
  6.  
  7.  
  8.  
  9.       var finals = document.getElementsByName("final_exam");
  10.  
  11.  
  12.       var total = 0;
  13.  
  14.  
  15.  
  16.       for (i = 0; i < cams.length; i++) {
  17.  
  18.  
  19.  
  20.           var total = parseInt(cams[i].value) + parseInt(finals[i].value);
  21.  
  22.  
  23.  
  24.     }
  25.  
  26.  
  27.  
  28.    document.getElementsByName("total")[0].value = total;
  29.  
  30.  
  31. }
  32. if (total >100)
  33. {
  34. alert('Total cannot be more than 100.!!');
  35. }
  36. else if (total<0)
  37. {
  38. alert('Total cannot be negative.!!');
  39. }
  40. else
  41. {
  42. document.getElementById("total").value = total;
  43. var grade;
  44.  
  45. if (total>=80)
  46. {
  47.     grade = 'A';
  48. }
  49.  
  50. else if(total>=70)
  51. {
  52.     grade = 'B';
  53. else if(total>=60)
  54. {
  55.     grade = 'C';
  56. }
  57. else if(total>=50)
  58. {
  59.     grade = 'D';
  60. }
  61. else if(total>=40)
  62. {
  63.     grade = 'E';
  64. else
  65. {
  66.     grade = 'F';
  67. }
  68.  
  69.     document.getElementsByName("grade").value = grade;
  70. }
  71. }
  72.  
  73. </script>

still doesn't work...


[PHP] <?php do { ?>
<tr>
<td height="20" scope="col"><input name="matric_no[]" type="text" id="matric_no[]" value="<?php echo $row_test['matric_no']; ?>" size="10" readonly="true" /></td>
<td scope="col"><input name="cam" type="int" id="cam" size="8" /></td>
<td scope="col" ><input name="final_exam" type="int" id="final_exam" size="8" /></td>
<td scope="col"><input name="total" type="int" id="total" size="8" onClick="calculate()"/></td>
<td scope="col"><input name="grade" type="text" id="grade" size="8" onClick="gred()"/></td>
</tr>
<?php } while ($row_test = mysql_fetch_assoc($test)); ?>
</table> [/PHP]
Sep 2 '08 #14

RamananKalirajan
100+
P: 607
Are u passing an array of data from the PHP to html. Do You want to find the total for that? Is this your requirement

Regards
Ramanan Kalirajan
Sep 2 '08 #15

Dormilich
Expert Mod 5K+
P: 8,639
there are still typing mistakes...
Expand|Select|Wrap|Line Numbers
  1. function calculate() {   // line 2
  2. for (var i = 0; i < cams.length; i++) {   // line 16
  3. document.getElementsByName("grade")[0].value = grade;   // line 71
Sep 2 '08 #16

acoder
Expert Mod 15k+
P: 16,027
No, document.getElementByName("cam") returns an array of elements, so something like:
Expand|Select|Wrap|Line Numbers
  1. var cams = document.getElementByName("cam");
  2. var finals = document.getElementByName("final_exam");
  3. var total = 0;
  4. for (i = 0; i < cams.length; i++) {
  5.     var total += parseInt(cams[i].value) + parseInt(finals[i].value);
  6. }
  7. document.getElementByName("total").value = total;
Gah! What a mess. Serves me right for just copying/modifying code without checking and testing. The last line should be using document.getElementById() too.
Sep 2 '08 #17

P: 47
i'm sory sir...

actually all the record are from my database.... that's why i use repeat region.. once admin find record by search all the data that require display.. but cam,final,are marks to be insert by admin..once admin key in the marks, total and gred will display then the admin save into the database....
Sep 3 '08 #18

acoder
Expert Mod 15k+
P: 16,027
Have you made the corrections as suggested by Dormilich above?
Sep 3 '08 #19

P: 47
yup.... i also had some new coding it's work..but the value had been set..how to retrive data from database? let say if had 30 data in database?
Sep 4 '08 #20

Dormilich
Expert Mod 5K+
P: 8,639
You can't do that with javascript alone. You need a server side script language, that can query the database for you. Once you got that working, you can retrieve those data with ajax.

regards
Sep 4 '08 #21

P: 47
must do the ajax also??....can you point me to any source that i can learn about retrieve many data using ajax?? thanks
Sep 5 '08 #22

Dormilich
Expert Mod 5K+
P: 8,639
must do the ajax also??
No. if you query the database before you send the html you certainly don't need ajax. ajax is needed, if you wan't things done 'on the fly' (after page load). but ajax is able to import data directly into javascript.

Well, all that depends also on what data you pull from the database and what you want to do with it (I couldn't figure that one out, sorry)

regards
Sep 5 '08 #23

Post your reply

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