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.
lukeurtnowski:
ok made a few changes
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
system
Closed
July 23, 2016, 4:45am
7
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.