calculation function

azura · #1 August 27th, 2008, 04:21 AM

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

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

RamananKalirajan · #2 August 27th, 2008, 05:05 AM

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

azura · #3 August 27th, 2008, 07:43 AM

thanks.... it's work but i change it into onclick at the final score... thanks again sir...

azura · #4 August 27th, 2008, 09:16 AM

dear sir... it work when i data only..how can i get those work in many data... like repeat region??

RamananKalirajan · #5 August 27th, 2008, 09:28 AM

Quote:

Originally Posted by azura

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

azura · #6 August 27th, 2008, 09:34 AM

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

</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>><a href="main.php">Main Menu</a> >>Examination>>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 ?>">>>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"> </p>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<p> </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> </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"> </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">  </p>
<p> </p>
<p align="center" class="style8"> </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">© Copyright . All Rights Reserved. <a href="http://www.myfreetemplates.com" class="basestyle"></a></span></td>
</tr>
</table></td>
</tr>
</table>
</body>

<?php

mysql_free_result($test);

?>
</html>[/PHP]

RamananKalirajan · #7 August 27th, 2008, 12:12 PM

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

azura · #8 August 28th, 2008, 01:21 AM

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)

acoder · #9 August 28th, 2008, 11:28 AM

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

 for (i = 0; i < cam.length; i++) {

   //cam[i] contains the i'th element...

azura · #10 August 29th, 2008, 02:49 AM

Expand|Select|Wrap|Line Numbers

 <script type="text/javascript">
 
function calculate()

{

for (i = 0; i < cam.length; i++) {
 
var total = (parseInt(document.getElementByName("cam").value) + parseInt(document.getElementByName("final_exam").value));
 
document.getElementByName("total").value = total;
 
}

}

</script>

like this??? i had tried but don't have any data came out... gosh!! very stuck!!

acoder · #11 August 29th, 2008, 11:24 AM

No, document.getElementByName("cam") returns an array of elements, so something like:

Expand|Select|Wrap|Line Numbers

 var cams = document.getElementByName("cam");

var finals = document.getElementByName("final_exam");

var total = 0;

for (i = 0; i < cams.length; i++) {

    var total += parseInt(cams[i].value) + parseInt(finals[i].value);

}

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

azura · #12 September 2nd, 2008, 01:26 AM

Expand|Select|Wrap|Line Numbers

 <script type="text/javascript">
 
function calculate()
 
      var cams = document.getElementByName("cam");
 
      var finals = document.getElementByName("final_exam");
 
      var total = 0;
 
      for (i = 0; i < cams.length; i++) {
 
          var total = parseInt(cams[i].value) + parseInt(finals[i].value);
 
    }
 
      document.getElementByName("total").value = total;
 
</script>

still don't work..

Dormilich · #13 September 2nd, 2008, 07:07 AM

that's because of a typing error: it should be

Expand|Select|Wrap|Line Numbers

 document.getElementsByName()

// and

document.getElementsByName("total")[0].value = total;

like acoder said, getElementsByName is always returning an array (even if there's only one element present)

azura · #14 September 2nd, 2008, 07:21 AM

Expand|Select|Wrap|Line Numbers

 <script type="text/javascript">

 function calculate()
 
var cams = document.getElementsByName("cam");
 
      var finals = document.getElementsByName("final_exam");
 
      var total = 0;
 
      for (i = 0; i < cams.length; i++) {
 
          var total = parseInt(cams[i].value) + parseInt(finals[i].value);
 
    }
 
   document.getElementsByName("total")[0].value = total;
 
}

if (total >100)

{

alert('Total cannot be more than 100.!!');

}

else if (total<0)

{

alert('Total cannot be negative.!!');

}

else

{

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

var grade;
 
if (total>=80)

{

    grade = 'A';

}
 
else if(total>=70)

{

    grade = 'B';

} 

else if(total>=60)

{

    grade = 'C';

}

else if(total>=50)

{

    grade = 'D';

}

else if(total>=40)

{

    grade = 'E';

} 

else

{

    grade = 'F';

}
 
    document.getElementsByName("grade").value = grade;

}

}
 
</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]

RamananKalirajan · #15 September 2nd, 2008, 08:21 AM

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

Dormilich · #16 September 2nd, 2008, 08:43 AM

there are still typing mistakes...

Expand|Select|Wrap|Line Numbers

 function calculate() {   // line 2

for (var i = 0; i < cams.length; i++) {   // line 16

document.getElementsByName("grade")[0].value = grade;   // line 71

acoder · #17 September 2nd, 2008, 12:57 PM

Quote:

Originally Posted by acoder

No, document.getElementByName("cam") returns an array of elements, so something like:

Expand|Select|Wrap|Line Numbers

 var cams = document.getElementByName("cam");

var finals = document.getElementByName("final_exam");

var total = 0;

for (i = 0; i < cams.length; i++) {

    var total += parseInt(cams[i].value) + parseInt(finals[i].value);

}

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.

azura · #18 September 3rd, 2008, 01:11 AM

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

acoder · #19 September 3rd, 2008, 11:00 AM

Have you made the corrections as suggested by Dormilich above?

azura · #20 September 4th, 2008, 04:36 AM

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?

Dormilich · #21 September 4th, 2008, 05:10 AM

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

azura · #22 September 5th, 2008, 01:24 AM

must do the ajax also??....can you point me to any source that i can learn about retrieve many data using ajax?? thanks

Dormilich · #23 September 5th, 2008, 07:42 AM

Quote:

Originally Posted by azura

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

Popular Articles

What is Bytes?