I've dug through all the tutorials and have been pulling my hair out trying to get this to work.
The onClick fires properly, but it never makes it inside the IF loop where it checks if the checkbox has been checked.
<!DOCTYPE html>
<html>
<head>
</head>
<header>
<script>
function updateTotal() {
document.orderform.total.value = 1*document.orderform.subtotal.value + 1*document.orderform.tax.value + 1*document.orderform.shipping.value;
}
**function applyDiscount(x) {
if (document.orderform.getElementById(x).checked == true) {
alert("Made it in if");
document.orderform.subtotal.value = .7*document.orderform.subtotal.value;
updateTotal();
}**
}
</script>
</header>
<body>
<section>
<h1>H1 here</h1>
<article>
<p>Article text here</p>
</article>
<form name="orderform" id="orderform" method="post" action="result.php">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="Enter First Name Here" />
<br />
<label for="subtotal">Subtotal</label>
<input type="text" name="subtotal" id="subtotal" value="10" onChange="updateTotal()"/>
<br />
<label for="shipping">Shipping</label>
<input type="text" name="shipping" id="shipping" value="2" onChange="updateTotal()"/>
<br />
<label for="tax">Tax</label>
<input type="text" name="tax" id="tax" value="1" onChange="updateTotal()" />
<br />
<label for="total">Total</label>
<input type="text" name="total" id="total" value="13" />
<br />
<label for="discountbox">Apply 30% discount</label>
<input type="checkbox" name="discountbox" id="discountbox" onClick="applyDiscount(this.id)"/>
<input type="submit" name="submit" />
</form>
</section>
<footer>
<p>Footer here</p>
</footer>
</body>
I've dug through all the tutorials and have been pulling my hair out trying to get this to work.
The onClick fires properly, but it never makes it inside the IF loop where it checks if the checkbox has been checked.
<!DOCTYPE html>
<html>
<head>
</head>
<header>
<script>
function updateTotal() {
document.orderform.total.value = 1*document.orderform.subtotal.value + 1*document.orderform.tax.value + 1*document.orderform.shipping.value;
}
**function applyDiscount(x) {
if (document.orderform.getElementById(x).checked == true) {
alert("Made it in if");
document.orderform.subtotal.value = .7*document.orderform.subtotal.value;
updateTotal();
}**
}
</script>
</header>
<body>
<section>
<h1>H1 here</h1>
<article>
<p>Article text here</p>
</article>
<form name="orderform" id="orderform" method="post" action="result.php">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="Enter First Name Here" />
<br />
<label for="subtotal">Subtotal</label>
<input type="text" name="subtotal" id="subtotal" value="10" onChange="updateTotal()"/>
<br />
<label for="shipping">Shipping</label>
<input type="text" name="shipping" id="shipping" value="2" onChange="updateTotal()"/>
<br />
<label for="tax">Tax</label>
<input type="text" name="tax" id="tax" value="1" onChange="updateTotal()" />
<br />
<label for="total">Total</label>
<input type="text" name="total" id="total" value="13" />
<br />
<label for="discountbox">Apply 30% discount</label>
<input type="checkbox" name="discountbox" id="discountbox" onClick="applyDiscount(this.id)"/>
<input type="submit" name="submit" />
</form>
</section>
<footer>
<p>Footer here</p>
</footer>
</body>
5 Answers
Reset to default 3Can you try to put this condition
if (document.getElementById('discountbox').checked == true)
the issue is that you're document.orderform is your form and getElementById is on document.
You can either do:
document.getElementById(x).checked
or:
document.orderform.elements[x].checked
Try something a bit simpler:
if (document.getElementById(x).checked)
A couple of things were wrong:
- The should be in the tags.
- the line document.orderform.getElementById needed to be document.getElementById
this worked for me in chrome:
<!DOCTYPE html>
<html>
<head>
<script>
function updateTotal() {
document.orderform.total.value = 1 * document.orderform.subtotal.value + 1 * document.orderform.tax.value + 1 * document.orderform.shipping.value;
}
function applyDiscount(x) {
if (document.getElementById(x).checked == true) {
alert("Made it in if");
document.orderform.subtotal.value = .7 * document.orderform.subtotal.value;
updateTotal();
}
}
</script>
</head>
<body>
<header>
Header Goes here.
</header>
<section>
<h1>H1 here</h1>
<article>
<p>Article text here</p>
</article>
<form name="orderform" id="orderform" method="post" action="result.php">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="Enter First Name Here" />
<br />
<label for="subtotal">Subtotal</label>
<input type="text" name="subtotal" id="subtotal" value="10" onChange="updateTotal()"/>
<br />
<label for="shipping">Shipping</label>
<input type="text" name="shipping" id="shipping" value="2" onChange="updateTotal()"/>
<br />
<label for="tax">Tax</label>
<input type="text" name="tax" id="tax" value="1" onChange="updateTotal()" />
<br />
<label for="total">Total</label>
<input type="text" name="total" id="total" value="13" />
<br />
<label for="discountbox">Apply 30% discount</label>
<input type="checkbox" name="discountbox" id="discountbox" onClick="applyDiscount(this.id)"/>
<input type="submit" name="submit" />
</form>
</section>
<footer>
<p>Footer here</p>
</footer>
</body>
</html>
I believe this is what you meant:
<script>
function updateTotal() {
document.getElementById("total").value = 1*document.getElementById("subtotal").value + 1*document.getElementById("tax").value + 1*document.getElementById("shipping").value;
}
function applyDiscount(x) {
if (document.getElementById(x).checked == true) {
document.getElementById("subtotal").value = .7 * document.getElementById("subtotal").value;
updateTotal();
}
}