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

17 New Member

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 Reply

1254

gits

5,390

Recognized Expert Moderator Expert

what have you done so far to achieve this?

Sep 2 '19 #2

Zayn

New Member

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

New Member

its not executing.. help me guys

Sep 2 '19 #4

gits

5,390

Recognized Expert Moderator Expert

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

Similar topics

1670

Smiley Click picker using Javascript and FORM woes .. Please help...

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 the comments work etc and everything is intergrated nicely in the database. Now im parsing the comments back out to the user and replacing string like :) with emoticons etc. It works perfectly and i'm seriously pleased with myself (ok ok remember i...

PHP

2815

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) My code is below. I am getting the following error "MyForm.oNetwork.Value is Null or is not an object". I'm struggling to diagnose what to do next. I'd very much appreciate some help Many thanks <HTML><BODY><FORM NAME="MyForm"...

ASP / Active Server Pages

2752

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 get a screen flash and if i try to preset an element property before calling the function like: this.firstName.optional=true; the code after that doesn't get executed going bananas, please help

Javascript

19342

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 able to fill that one out just fine. The second form is multipart/form-data. Unfortunately, I haven't been able to fill that out in a way that makes the server happy. I set up a copy of this form at my web site so that I could see exactly what a...

.NET Framework

4477

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 current window. I have a cgi script provided by my web host to send the contents of the form through email but they only show me how to use the cgi script to send email through the submit event of the form. ie. <form name="downloadform"...

Javascript

5724

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 ) ************************************************************************************** <form action="https://www.cards2do.co.uk/addcard.php" method="post"

Javascript

2171

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 edited and then saved. Currently, after saving the edited transaction and returning to the check register, the repeater control table returns to the bottom. I would like the edited transaction to appear in the table instead. I know that a...

Visual Basic .NET

2092

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 the original form to correct the input. This all works fine until I try to incorporate a javascript to display a popup calendar which posts the selected date back to a field on the form. This script works fine in itself, however if the page is...

ASP / Active Server Pages

1934

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: <form> <input type="text" name="textField" size="20"><br> </form> In the "TextField " of Form 1 i type any number and let the number be 100. Now what i really want is that in Form 2 : Textfield should be 100 that is just like that of form 1. In...

Javascript

2228

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 in the search, alongside other inputs. Here's what I have currently: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" <html lang="en"> <head> <SCRIPT LANGUAGE="JavaScript">

Javascript

8324

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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

8842

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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

8740

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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

8513

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8617

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

4173

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

2742

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

1970

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

1733

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General