CODEWITHSUNDEEP
javascriptcheckboxonclick
NQQ
NQQ

Reputation: 71

Javascript: detecting if checkbox checked not working

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>

Upvotes: 3

Views: 31390

Answers (5)

willyp
willyp

Reputation: 11

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();
    }

}

Upvotes: 0

James Khoury
James Khoury

Reputation: 22319

A couple of things were wrong:

  1. The should be in the tags.
  2. 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>

Upvotes: 0

user578895
user578895

Reputation:

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

Upvotes: 2

Corey Sunwold
Corey Sunwold

Reputation: 10254

Try something a bit simpler:

if (document.getElementById(x).checked)

Upvotes: 2

Muhammad Akhtar
Muhammad Akhtar

Reputation: 52241

Can you try to put this condition

if (document.getElementById('discountbox').checked == true)

Upvotes: 3

Related Questions