Member Avatar for alfalisyada

hi..i need some ideas...I want to calculate student fees payment on my php page, but my coding here its not working. One more thing is when selected item click and its can display value of the item in other textbox(ex: if course Diploma Multimedia is selected, then the course fee is 19000 is display on txtCourseFee).I'm using java script for the calculation and save into mysql database. The code is here :

<script language="JavaScript" type="text/javascript">
function CalculateFee (form)
{
var coursefee;
var payamaount = form.txtpayamount.value; (user input)
var balfee;
balfee = (coursefee - payamount);

if (document.form.course[0].selected)
Diploma Multimedia = 19000;
coursefee = Diploma Multimedia;

else if (document.form.course[1].selected)
Diploma Computer Science = 17000;
coursefee = Diploma Computer Science;
form.txtbalfee.value = (balfee);
}
</script>

  • 3 Contributors
  • 2 Replies
  • 2K Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by danishbacker

Dani AI

Generated

a few things are tripping you up: you compute balfee before you ever set coursefee, you try to use variable names with spaces (e.g., Diploma Multimedia), and you rely on document.form.course[0], which is fragile. is on the right track using the option value, and is right to suggest targeting elements by id. A clean pattern is: store the fee on each <option>, read it when the selection changes, then update both the fee textbox and the balance.

Example approach (unique to this thread) that shows the selected course fee in txtCourseFee and computes the balance into txtbalfee:

<!-- Example select: attach the numeric fee to each option -->
<select id="course">
  <option data-fee="0">Please select a course</option>
  <option value="MM" data-fee="19000">Diploma Multimedia</option>
  <option value="CS" data-fee="17000">Diploma Computer Science</option>
</select>

<input id="txtCourseFee" type="text" value="0.00">
<input id="txtpayamount" type="text" value="0.00">
<input id="txtbalfee" type="text" value="0.00">

<script>
(function () {
  function updateFees() {
    var course = document.getElementById('course');
    var selected = course.options[course.selectedIndex];
    var fee = parseFloat(selected.getAttribute('data-fee')) || 0;
    var pay = parseFloat(document.getElementById('txtpayamount').value) || 0;

    document.getElementById('txtCourseFee').value = fee.toFixed(2);
    document.getElementById('txtbalfee').value = Math.max(fee - pay, 0).toFixed(2);
  }
  document.getElementById('course').addEventListener('change', updateFees);
  document.getElementById('txtpayamount').addEventListener('input', updateFees);
  updateFees(); // initialize
})();
</script>

Server-side tip: never trust the client’s fee. Post only a stable course id (e.g., MM/CS) and, in PHP, look up the official fee and recompute the balance before saving. Use DECIMAL for money in MySQL (e.g., DECIMAL(10,2)) and prepared statements. This prevents tampering and rounding surprises.

Recommended Answers

All 2 Replies

Member Avatar for essential

You can try this demo:

<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function caculateFee(form) {
if ( form ) {
   with ( form ) {
   var payamount = parseFloat( txtpayamount.value );
   var courses = course.selectedIndex;
    txtbalfee.value = (((course.options[courses].value) * 1) - payamount); 
    }
  } return false;
}
//-->
</script>
</head>
<body>
<form action="<?php /*><!--*/ echo $_SERVER['PHP_SELF']; /*--><?*/ ?>" onsubmit="return caculateFee(this);">
<div>
<label for="course"><strong>Courses:</strong></label><br />
<select id="course" name="course" size="1">
<option value="0.00">Please select a course</option>
<option value="19000">Multimedia</option>
<option value="17000">Computer Science</option>
</select><br />
<label for="txtpayamount">Payment: <input type="text" id="txtpayamount" name="txtpayamount" value="0.00" size="20" /></label><br />
<label for="txtbalfee">Total: <input type="text" id="txtbalfee" name="txtbalfee" value="0.00" size="20" /></label>
</div>
</form>

</body>
</html>
Member Avatar for danishbacker

I dont know it is correct or not but try using

document.getElementById("anyName")
or
document.getElementByName("anyName") or something like this

for handling items in the DOM instead of forms

i think this will avoid confusion :)
forgive me if this doesn't work!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.