Function to calculate total

I have the script

<script>
var User_Name = document.getElementById("User_Name").value;
var Quantity = document.getElementById("Quantity").value;
var Price = document.getElementById("Price").value;
var Tax = .0825;

function calculateTax(Price) {
document.getElementById("Total").value = Price * Tax;
}
</script>

and am having trouble placing it on this form

<form name="tax_form" onSubmit="calculateTax()">
<label for="User_Name">Name:</label >
<input type="text" id="User_Name" placeholder="Name" required>
<label for="Quantity">Quantity</label>
<input type="number" name="Quantity" min="1" max="5000" placeholder="Quantity: (1-5000)">
<label for="Price">Price</label>
<input type="number" name="Price" value="5.31">
<label class="total">Total</label>
<input type="text" id="Total" readonly>
<a href="javascript:document.tax_form.submit();">Submit</a>
</form>

I looked at the console and get this error when I click the link

index2.html?Quantity=&Price=5.31:7 Uncaught TypeError: Cannot read property ‘value’ of null

why is it not recording the Quantity?

Its at http://fixmysite.us/Web_Programming_With_Javascriipt/Assignment2/index2.html

Because there’s neither an element with the ìd="quantity" nor id="price". You’d either have to add these IDs to your markup or access those elements otherwise.

1 Like

onSubmit also needs to be onsubmit

Replace <a href="javascript:document.tax_form.submit();">Submit</a> with <input type="submit">

1 Like

ok made a few changes

<script>
var User_Name = document.getElementById("User_Name").value;
var Quantity = document.getElementById("Quantity").value;
var Price = document.getElementById("Price").value;
var Tax = .0825;

function calculateTax(Price) {
document.getElementById("Total").value = Price * Tax;
}
</script>

and heres the form

<form name="tax_form" onsubmit="calculateTax()">
<label for="User_Name">Name:</label>
<input type="text" id="User_Name" required>
<label for="Quantity">Quantity</label>
<input type="number" id="Quantity" value="3">
<label for="Price">Price</label>
<input type="number" id="Price" value="5.31">
<label class="total">Total</label>
<input type="text" id="Total" readonly>   
<a href="javascript:document.tax_form.submit();">Submit</a>
</form>

`
But im getting an error when the page loads

Uncaught TypeError: Cannot read property 'value' of null

It says its on line 7 but where is that?
And im trying to submit the form without using a form element so I figured javascript is the best alternative for that…

Surely you are using an editor that displays line numbers. If not you should dump your current editor and replace it with one that at least provides this most basic of features.

It’s’ probably because you had the script before the HTML.

Never ever do <a href="javascript:...">

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<form id="tax_form" name="tax_form">
  <label for="User_Name">Name:</label>
  <input type="text" id="User_Name" required>
  <label for="Quantity">Quantity</label>
  <input type="number" id="Quantity" value="3">
  <label for="Price">Price</label>
  <input type="number" id="Price" value="5.31" step="0.01">
  <label class="total">Total</label>
  <input type="text" id="Total" readonly>
  <input type="submit" />
</form>
<script>
var calculateTax = function(event) {
  event.preventDefault();
  var price = document.getElementById("Price").value;
  var tax = .0825;
  document.getElementById("Total").value = price * tax;
}
var form = document.getElementById('tax_form');
form.addEventListener('submit', calculateTax, false);
</script>
</body>
</html>

input type number defaults to a step of 1, so if you need to be able to enter cents then you must set a step value otherwise it will be invalid.

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.