using javascript, calculate total, clear form and validate the form

**gits** · Sep 2 '19, 07:29 AM

what have you done so far to achieve this?

**Zayn** · Sep 2 '19, 03:14 PM

Code:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
	var qtyBoxA = document.getElementById('quantityA');
    var qtyBoxB = document.getElementById('quantityB');
    var qtyBoxC = document.getElementById('quantityC');
	var qtyBoxD = document.getElementById('quantityD');
    var qtyBoxE = document.getElementById('quantityE');
    
	var subBoxA = document.getElementById('subtotalA');
    var subBoxB = document.getElementById('subtotalB');
    var subBoxC = document.getElementById('subtotalC');
	var subBoxD = document.getElementById('subtotalD');
    var subBoxE = document.getElementById('subtotalE');
    
	var CalculateTotal = document.getElementById('subtotalF');
    var btnGetTot = document.querySelector("input[type=button]");
    var btnReset = document.querySelector("input[type=reset]");    



	// Set up event handling in JavaScript, not HTML.
    qtyBoxA.addEventListener("change", calc);
    qtyBoxB.addEventListener("change", calc);
    qtyBoxC.addEventListener("change", calc);
	qtyBoxD.addEventListener("change", calc);
    qtyBoxE.addEventListener("change", calc);
    btnGetTotal.addEventListener("click", getCalculate);
    btnReset.addEventListener("click", reset);/

	var gt = null; // Will hold the grand total

    function calc() {

      var priceA = 5;
      var priceB = 10;
      var priceC = 15;
	  var priceD = 20;
	  var priceE = 30;
      gt = 0; 
		
	  var qtyA = parseInt(qtyBoxA.value, 10);
      var qtyB = parseInt(qtyBoxB.value, 10);
      var qtyC = parseInt(qtyBoxC.value, 10);
	  var qtyD = parseInt(qtyBoxD.value, 10);
      var qtyE = parseInt(qtyBoxE.value, 10);
	  
	  if (!isNaN(qtyA)) { subBoxA.textContent = qtyA * priceA; gt += +subBoxA.textContent; }
      if (!isNaN(qtyB)) { subBoxB.textContent = qtyB * priceB; gt += +subBoxB.textContent; }
      if (!isNaN(qtyC)) { subBoxC.textContent = qtyC * priceC; gt += +subBoxC.textContent; }
	  if (!isNaN(qtyD)) { subBoxD.textContent = qtyD * priceD; gt += +subBoxD.textContent; }
      if (!isNaN(qtyE)) { subBoxE.textContent = qtyE * priceE; gt += +subBoxE.textContent; }
      
	  
	  CalculateTotal.textContent = gt.toFixed(2);
	  
	}
    
    function getCalculate(){
      calc(); 
      alert(gt);    
    }
	  function reset(){
      
      subBoxA.textContent = "";
      subBoxB.textContent = "";
      subBoxC.textContent = ""; 
	  subBoxD.textContent = "";
	  subBoxE.textContent ="";
      CalculateTotalTot.textContent = "";
    }

</script>
</head>
<style>
body {  
  background-color:grey;
}
th{

  text-align: left;
}

div{
	
  text-align: right;
  
  }
  
 .large{  
         height:100px;
		 width: 170px;
		  
 }
  table{
  
  font-style: normal;
  border-collapse: collapse;
  }
</style>
<body>
<form name="myForm" action="/submit.php" onsubmit="return validateForm()" method="post">
<h1 style="text-align: left">Order Form</h1>
<table>

<tr>
<td>Name</td>
<td><input type="text" name="fname" placeholder="Zayn" >
</td>

<td> Surname</td>
<td><input type="text" name="fsurname" placeholder="Saidi"></td>
</tr>

<tr>
<td>Email</td>
<td><input type="text" name="fmail" placeholder="zaynsaidi@gmail.com"></td>
<td>Cell Number</td>
<td><input type="text" name="fcellnumber" placeholder="07712394400"></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="faddress" placeholder="" class="large"></td></div>
</tr>
<table>
</tr><br><br>
<form>
<table style="width:50%">
<tr class="wrapper">
    <th>Product</th>
    <th>Part Number</th> 
    <th>Quantity</th>
    <th>Unit Price</th>
    <th>Subtotal</th>
</tr>
<tbody>	
<tr>
    <td>RAM</td>
    <td>HP100</td> 
    <td><input type="text" id="quantityA" maxlength="7" placeholder="60" ></td>
	<td>ZW$5</td>
	<td><input type="text" id="subtotalA" size="6" placeholder="$300" ></td>
  </tr>
  
  <tr>
    <td>Speaker</td>
    <td>HP200</td> 
    <td><input type="text" id="quantityB" maxlength="7" placeholder="65" ></td>
	<td>ZW$10</td>
	<td><input type="text" id="subtotalB" size="6"placeholder="$650" ></td>
  </tr>
  
  <tr>
    <td>Power Supply</td>
    <td>HP300</td> 
    <td><input type="text" id="QuantityC" placeholder="10" ></td>
	<td>ZW$15</td>
	<td><input type="text" id="subtotalC" size="6" placeholder="$150" ></td>
  </tr>
  <tr>
    <td>HDD</td>
    <td>HP400</td> 
    <td><input type="text" id="quantityD" placeholder="20" ></td>
	<td>ZW$20</td>
	<td><input type="text" id="subtotalD" size="6" placeholder="$220" ></td>
  </tr>
  <tr>
    <td>Motherboard</td>
    <td>HP500</td> 
    <td><input type="text" id="quantityE" placeholder="5" ></td>
	<td>ZW$30</td>
	<td><input type="text" id="subtotalE" size="6" placeholder="$150"></td>
	</tr>
	<tr>
	
	<th colspan="4"><div class="header"  >Total</div></th>
	<td><input type="text" id="subtotalF" size="6" placeholder="$900"></td>
	</tr>
	
</table>
</form>
<strong>Payment Details</strong><br>
<strong>Methods</strong>
<table>
<tr>
<td><input type="radio" name="gender" value="Visa" checked>Visa</td>
<td>Card Number</td>
<td><input type="text" name="fcardnumber" maxlength="30" placeholder="6079 9500 0013 7538">
<td>Expiry Date</td>
<td><input type="text" name="fexpirydate" placeholder="22/08/2030" maxlength="30">
<tr/>
<tr>
<td><input type="radio" name="gender" value="Cash" checked>Cash</td>
</tr>
<tr>
<td><input type="radio" name="gender" value="Ecocash" checked>Ecocash</td>
</tr>
<tr>
<td><input type="radio" name="gender" value="Swipe" checked>Swipe</td>
</tr><br><br><br>
<table>
<td>Delivery Address<br/><br/><br/></td>
<td><input type="text" name="fdeliveryaddress" placeholder=""></td>
</tr>
</tr><br><br>
<table>
<tr>
<td colspan="2" align="left" >
<input type="button" name="claculate_form" value="Calculate" onclick="this.form.calculate();">
<input type="reset" name="reset_form" value="Clear Form" onclick="this.form.reset();">
</tr>
<tbody>
</table>


</body>
</html>

**Zayn** · Sep 2 '19, 03:15 PM

its not executing.. help me guys

**gits** · Sep 2 '19, 04:07 PM

well - you have several problems in that code:

you try to access the DOM before its fully loaded
you have syntax error in Line 30
in line 7 u try to access a node that cannot exist - id is case sensitive
you try to call a function in line 210 - that function doesnt exist in the scope of the form from where you want to call it
might be more issues - was only crossreading over the bunch of code ...

use the browser's developer tools and fix all the errors that show up in the console first.

using javascript, calculate total, clear form and validate the form

using javascript, calculate total, clear form and validate the form

Comment

Comment

Comment

Comment