Javascript: detecting if checkbox checked not working

Question

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>

Muhammad Akhtar · Accepted Answer · 2011-04-06 04:54:11Z

3

Can you try to put this condition

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

answered Apr 6, 2011 at 4:54

Muhammad Akhtar

52.2k37 gold badges142 silver badges191 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user578895 · Accepted Answer · 2011-04-06 04:56:04Z

2

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

answered Apr 6, 2011 at 4:56

user578895

Comments

Corey Sunwold · Accepted Answer · 2011-04-06 04:54:32Z

2

Try something a bit simpler:

if (document.getElementById(x).checked)

answered Apr 6, 2011 at 4:54

Corey Sunwold

10.3k6 gold badges53 silver badges55 bronze badges

Comments

James Khoury · Accepted Answer · 2011-04-06 04:58:13Z

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>

willyp · Accepted Answer · 2011-04-06 05:02:40Z

0

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

}

answered Apr 6, 2011 at 5:02

willyp

112 bronze badges

Collectives™ on Stack Overflow

Javascript: detecting if checkbox checked not working

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related