Auto Calculate Textbox Value Using Combobox Onchange Event

Submitted by argie on Monday, February 4, 2013 - 15:14.
This tutorial will teach you o how to auto calculate textbox using combo box onchange event. For thus creating online ordering system, you can use this code to integrate in your system. To start this tutorial, lets follow the steps bellow.

Step 1: Creating our Form

Copy the code bellow and save it as "index.php"
  1. <form NAME = "frmOne" action="initiateorder.php" method="post">
  2. Price:<br><INPUT TYPE = "Text" name = "select1" size = "35" value ="1" style="border:#999999 solid 1px; background-color:#FFF; width:40px; height:20px;"><br>
  3. Quantity:<br><select name="select2" onchange='OnChange(this.value)' style="border:#999999 solid 1px; background-color:#FFF; width:40px; height:20px;">
  4.  <option value="1">1</option>
  5.  <option value="2">2</option>
  6.  <option value="3">3</option>
  7.  <option value="4">4</option>
  8.  <option value="5">5</option>
  9.  <option value="6">6</option>
  10. </select><br>
  11. Result:<br>
  12. <INPUT TYPE = "Text" name = "txtDisplay" size = "35" value ="" style="border:#999999 solid 1px; background-color:#FFF; width:40px; height:20px;" readonly><br><br>
  13. </form>

Step 2: Creating Our Javascript Code to Auto Calculate Textbox

The code bellow is use to auto calculate textbo. Copy the code bellow and paste it above the form script in teh file "index.php".
  1. <script type="text/javascript" language="Javascript">
  2.         var sum=0;
  3.         price = document.frmOne.select1.value;
  4.         document.frmOne.txtDisplay.value = price;
  5.     function OnChange(value){
  6.                
  7.                 price = document.frmOne.select1.value;
  8.                 quantity = document.frmOne.select2.value;
  9.         sum = price * quantity;
  10.                
  11.                 document.frmOne.txtDisplay.value = sum;
  12.     }
  13. </script>
The Final and complete code is look like the code bellow
  1. <script type="text/javascript" language="Javascript">
  2.         var sum=0;
  3.         price = document.frmOne.select1.value;
  4.         document.frmOne.txtDisplay.value = price;
  5.     function OnChange(value){
  6.                
  7.                 price = document.frmOne.select1.value;
  8.                 quantity = document.frmOne.select2.value;
  9.         sum = price * quantity;
  10.                
  11.                 document.frmOne.txtDisplay.value = sum;
  12.     }
  13. </script>
  14. <form NAME = "frmOne" action="initiateorder.php" method="post">
  15. Price:<br><INPUT TYPE = "Text" name = "select1" size = "35" value ="1" style="border:#999999 solid 1px; background-color:#FFF; width:40px; height:20px;"><br>
  16. Quantity:<br><select name="select2" onchange='OnChange(this.value)' style="border:#999999 solid 1px; background-color:#FFF; width:40px; height:20px;">
  17.         <option value="1">1</option>
  18.         <option value="2">2</option>
  19.         <option value="3">3</option>
  20.                 <option value="4">4</option>
  21.         <option value="5">5</option>
  22.         <option value="6">6</option>
  23.     </select><br>
  24. Result:<br>
  25. <INPUT TYPE = "Text" name = "txtDisplay" size = "35" value ="" style="border:#999999 solid 1px; background-color:#FFF; width:40px; height:20px;" readonly><br><br>
  26. </form>
That's all, thank you for always reading my tutorial.
Tags
Auto Calculate Textbox value

Comments

Submitted by Anonymous (not verified) on Thu, 04/18/2013 - 15:26

how it works...? is it like this, when a user enter the price, tab to the quantity then it will automically show in the result textbox?

Add new comment

About text formats