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

Expand|Select|Wrap|Line Numbers

 <table style="width:50%">

<tr>

    <th>Product</th>

    <th>Part Number</th> 

    <th>Quantity</th>

    <th>Unit Price</th>

    <th>Subtotal</th> 

<tr>

i want to calculate total of 5 items by clicking a button using javascript.

Sep 1 '19 #1

Subscribe Post Reply

1245

gits

5,390

Expert Mod 4TB

what have you done so far to achieve this?

Sep 2 '19 #2

Zayn

Expand|Select|Wrap|Line Numbers

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

Sep 2 '19 #3

Zayn

its not executing.. help me guys

Sep 2 '19 #4

gits

5,390

Expert Mod 4TB

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.

Sep 2 '19 #5

by: descds | last post by:

OK im prety much a newbie at PHP but it has me hooked. Im writing a comment system for one of our modules on phpnuke. Its all going very well, well should i say WAS going very well :) Ok all...

PHP

Can't send activeX value to ASP using Javascript

by: NewbieJon | last post by:

I am attempting to send the variable "sComputerName" from my ActiveX script to "GetInfo.asp" using javascript. (Having been advised this is the way to get my ActiveX variable into my ASP script) ...

ASP / Active Server Pages

trouble calling a function to validate form input

by: bbxrider | last post by:

i'm trying to pass a form object to a function to validate the forms user input when i try to access a forms properties-like .elements there is no response from the function and no error msg, i...

Javascript

Using Httpwebrequest to Submit multipart/form-data

by: Gregory A Greenman | last post by:

I'm trying to write a program in vb.net to automate filling out a series of forms on a website. There are three forms I need to fill out in sequence. The first one is urlencoded. My program is...

.NET Framework

submit form, validate form, set cookie, send email, download file

by: mhawkins19 | last post by:

I have a form built and on the onclick event I validate all of the fields and then if the form is ok, on the submit event I run a javascript function to set a cookie and download a file from the...

Javascript

Multiple Form Post Using Javascript - Empty Post from FF

by: Adam | last post by:

Hey, I'm using JS to submit a form with image submit buttons, using the following code... (Page is here... http://www.cards2do.co.uk/addcard.php?card_id=292 ) ...

Javascript

Using Javascript ScrollIntoView method on a web form

by: Keith | last post by:

I have a web form that contains a repeater control that is designed to ask like a check book register. Clicking on a certain transaction takes the user to a different .aspx page where it can be...

Visual Basic .NET

Problem when using javascript

by: anthonybrough | last post by:

I have an asp page that has a form to collect user data in a form. when the user clicks submit the input is validated. If any fields are not acceptable the user clicks on a button to go back to...

ASP / Active Server Pages

Inputing value in a form using javascript

by: macintoshhondo | last post by:

Hi ! i am a newbie and dont know javascript much. what i really need is a simple javascript code that can insert number in the value section of the different forms from the one form. FORM 1:...

Javascript

Using Javascript variable in HTML Form

by: scottmacd | last post by:

I'm sure this is a pretty simple question, so would be amazing if anyone could help me! I'm trying to make an HTML search form which can convert a human date into a UNIX timestamp date and include it...

Javascript

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

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

Similar topics