JavaScript Auto Calculate Form

What do you mean by JavaScript?

What do you mean by Auto Calculate form in JavaScript?

The Auto Calculate feature is convenient when you need values entered into a form to be automatically computed. For example, you can total up a sum on an invoice sheet to present to a customer.

Let's explore several examples of a JavaScript-powered auto-calculating form.

Example 1:

Example


<! DOCTYPE html>

<html>

<meta name="viewport" content="width=device-width, initial-scale=1">  

<meta charset="UTF-8">  

<title> How to Auto Calculate Price in JavaScript  </title>   

 </head>

 <style>

 body {

 text-align: center;

background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

 }

 h2 {

 font-style: italic; font-family: "Playfair Display","Bookman",serif;

 color: #999; 

letter-spacing: -0.005em;

 word-spacing: 1px;

 font-size: 2.75em;

  font-weight: bold;

}

 h1 {

  position: relative;

  padding: 0;

  margin: 0;

  font-family: "Raleway", sans-serif;

  font-weight: 300;

  font-size: 40px;

  color: #080808;

  -webkit-transition: all 0.4s ease 0s;

  -o-transition: all 0.4s ease 0s;

  transition: all 0.4s ease 0s;

  text-align: center;

}

.three h1 {

  font-size: 28px;

  font-weight: 500;

  letter-spacing: 0;

  line-height: 1.5em;

  padding-bottom: 15px;

  position: relative;

  text-align: center;

}

.three h1:before {

  content: "";

  position: absolute;

  left: 10;

  bottom: 0;

  height: 5px;

  width: 550px;

  background-color: #111;

  text-align: center;

}

.three h1:after {

  content: "";

  left: 0;

  bottom: 2px;

  height: 1px;

  width: 85%;

  max-width: 255px;

  background-color: #333; 

}

 </style>

<body>

<div class = "three">

<h2> Example </h2>

 <h1> How to Auto Calculate Price in JavaScript </h1> <br> <br>

</div> 

    <form name="frm-pin" method="post" action="#">

        <label class="w3-text-green"> <b> Number of Codes </b> </label>

        <select name="tot_pin_requested" onchange="calculateAmount(this.value)" required> 

<option value="" disabled selected> Select your Price code </option>

<option value="1"> 1 </option>

<option value="2"> 2 </option>

<option value="3"> 3 </option>

<option value="4"> 4 </option>

<option value="5"> 5 </option>

<option value="6"> 6 </option>

<option value="7"> 7 </option>

<option value="8"> 8 </option>

<option value="9"> 9 </option>

<option value="10"> 10 </option>

	</select>

        <br> <br> <br> <br> <label> <b> Total Amount </b> </label>

        <input class="w3-input w3-border" name="tot_amount" id="tot_amount" type="text" readonly>

        <script type = ?text/javascript?>

            function calculateAmount(val) {

                var tot_price = val * 500;

                var divobj = document.getElementById('tot_amount');

                divobj.value = tot_price;

            }

        </script>

        <body>

</html>

Explanation:

Output:

The figure that follows illustrates the output for this example:

Example 2:

Example


<! DOCTYPE html>

<html>

<meta name="viewport" content="width=device-width, initial-scale=1">  

<meta charset="UTF-8">  

<title> How to Auto Calculate Price in JavaScript  </title>   

 </head>

<style>

body {

 text-align: center;

 background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

 }

 h2 {

 font-style: italic; font-family: "Playfair Display" ,"Bookman",serif;

 color: #999;

 letter-spacing:- 0.005em; 

word-spacing: 1px;

 font-size: 2.75em;

  font-weight: bold;

  }

  h4 {

 font-style: italic; 

 font-family: "Playfair Display", "Bookman",serif;

 color: black; 

  letter-spacing:- 0.005em; 

  word-spacing: 1px;

 font-size: 1em;

  font-weight: bold;

  }

 h1 {

  position: relative;

  padding: 0;

  margin: 0;

  font-family: "Raleway", sans-serif;

  font-weight: 300;

  font-size: 40px;

  color: #080808;

  -webkit-transition: all 0.4s ease 0s;

  -o-transition: all 0.4s ease 0s;

  transition: all 0.4s ease 0s;

  text-align: center;

}

.three h1 {

  font-size: 28px;

  font-weight: 500;

  letter-spacing: 0;

  line-height: 1.5em;

  padding-bottom: 15px;

  position: relative;

  text-align: center;

}

.three h1:before {

  content: "";

  position: absolute;

  left: 10;

  bottom: 0;

  height: 5px;

  width: 550px;

  background-color: #111;

  text-align: center;

}

.three h1:after {

  content: "";

  left: 0;

  bottom: 2px;

  height: 1px;

  width: 85%;

  max-width: 255px;

  background-color: #333; 

}

</style>

<body>

<h2> Example </h2>

 <h1> How to Auto Calculate Price in JavaScript </h1> <br> <br>

<fieldset>

<form action = "#" method = "post" name = "myform">

    <h4> Number of People </h4>

<input type = "text" name = "qty"> <br/>

    <h4> Enter Price </h4>	

 <input type="text" name="Cost" onkeyup="calculate(this.value)"> <br/>

  <h4> Total Price </h4> <input type="text" name="textbox5"/>

</fieldset>

 </form>

 <script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"> </script>

<script type = "text/javascript">

function calculate() { 

 if(isNaN(document.forms["myform"]["qty"].value) || document.forms["myform"]["qty"].value=="") { 

 var text1 = 0; 

 } else { 

 var text1 = parseInt(document.forms["myform"]["qty"].value); 

 } 

 if(isNaN(document.forms["myform"]["Cost"].value) || document.forms["myform"]["Cost"].value=="") { 

 var text2 = 0; 

 } else { 

 var text2 = parseFloat(document.forms["myform"]["Cost"].value); 

 } 

 document.forms["myform"]["textbox5"].value = (text1*text2); 

 }

</script>

</body>

</html>

Explanation:

Output:

The figure that follows illustrates the output produced by this example:

Example 3:

Example


<! DOCTYPE html>

<html>

<meta name="viewport" content="width=device-width, initial-scale=1">  

<meta charset="UTF-8">  

<title> How to Auto Calculate Price in JavaScript  </title>   

 </head>

<style>

body {

 text-align: center;

 background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

 }

 table

 {

 text-align: center;

 }

 h2 {

 font-style: italic; 

 font-family: "Playfair Display", "Bookman", serif;

 color: #999;

 letter-spacing:- 0.005em; 

word-spacing: 1px;

 font-size: 2.75em;

  font-weight: bold;

  }

  h4 {

 font-style: italic; 

 font-family: "Playfair Display", "Bookman", serif;

 color: black; 

 letter-spacing:- 0.005em; 

word-spacing: 1px;

 font-size: 1em;

  font-weight: bold;

  }

 h1 {

  position: relative;

  padding: 0;

  margin: 0;

  font-family: "Raleway", sans-serif;

  font-weight: 300;

  font-size: 40px;

  color: #080808;

  -webkit-transition: all 0.4s ease 0s;

  -o-transition: all 0.4s ease 0s;

  transition: all 0.4s ease 0s;

  text-align: center;

}

.three h1 {

  font-size: 28px;

  font-weight: 500;

  letter-spacing: 0;

  line-height: 1.5em;

  padding-bottom: 15px;

  position: relative;

  text-align: center;

}

.three h1:before {

  content: "";

  position: absolute;

  left: 10;

  bottom: 0;

  height: 5px;

  width: 550px;

  background-color: #111;

  text-align: center;

}

.three h1:after {

  content: "";

  left: 0;

  bottom: 2px;

  height: 1px;

  width: 85%;

  max-width: 255px;

  background-color: #333; 

}

button {

  background-color: #af614c;

  border: none;

  color: white;

  padding: 15px 32px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 16px;

  margin: 4px 2px;

  cursor: pointer;

}

</style>

<body>

<h2> Example </h2>

 <h1> How to Auto Calculate Price in Javascript </h1> <br> <br>

<FORM Name="myform" align="center">

<table align="center">

<tr> <th> Item </th> <th> Quantity </th> </tr>

<tr>

<td>

<SELECT NAME="memoryItem" onChange="calculatePrice()" id="memoryItem">

  <OPTION value="0"> --Select One Choice-- </OPTION>

  <OPTION value="49"> 8 GB add $49 </OPTION>

  <OPTION value="98"> 12 GB add $98 </OPTION>

</SELECT>

</td> <td> <input type="text" id="memoryItemQty" value="1" onChange="calculatePrice()"/> </td> </tr> <tr> <td>

<SELECT NAME="hddItem" onChange="calculatePrice()" id="hddItem">

  <OPTION value="0"> --Select One Choice-- </OPTION>

  <OPTION value="109"> 1 TB HD add $109 </OPTION>

  <OPTION value="150"> 1.5 TB HD add $150 </OPTION>

</SELECT>

</td> <td> <input type="text" id="hddItemQty" value="1" onChange="calculatePrice()" /> </td> </tr> <tr> <td>

<SELECT NAME="networkItem" onChange="calculatePrice()" id="networkItem">

  <OPTION value="0"> --Select One Choice-- </OPTION>

  <OPTION value="109"> Laptop 1 $109 </OPTION>

  <OPTION value="79"> laptop 2 $79 </OPTION>

</SELECT>

</td>

<td> <input type="text" id="networkItemQty" value="1" onChange="calculatePrice()" /> </td> </tr>

</tr>

</table>

</FORM>

<button type="button" onclick="calculatePrice()"> Calculate Value </button>

<h4> Total Price: </h4> <INPUT type="text" id="PicExtPrice" Size=8>  

<script>

function calculatePrice(myform){

  var elt = document.getElementById("memoryItem");

  var memory = elt.options[elt.selectedIndex].value;

  var memoryQty = parseInt(document.getElementById("memoryItemQty").value);

  var elt = document.getElementById("hddItem");

  var hdd = elt.options[elt.selectedIndex].value;

  var hddQty = parseInt(document.getElementById("hddItemQty").value);

  var elt = document.getElementById("networkItem");

  var network = elt.options[elt.selectedIndex].value;

  var networkQty = parseInt(document.getElementById("networkItemQty").value);

  memory = parseInt(memory)*memoryQty;

  hdd = parseInt(hdd)*hddQty;

  network = parseInt(network)*networkQty;

    var total = memory+hdd+network; 

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

}

</script>

</body>

</html>

Explanation:

Output:

The figure below illustrates the output produced by this example:

What do you mean by JavaScript?

What do you mean by Auto Calculate form in JavaScript?

Example 1:

Example 2:

Example 3:

Input Required