Javascript Method Not Working - Checkbox

Question

Good Morning,

I am having difficulty firguring out why this following Javascript method is not working.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!--Author: Alejandro Deguzman Jr-->

<html>
<head>

<title>Realtor Inquiry</title>

<script type="text/javascript">

/* <![CDATA[ */
function termAgreed() {
    if (document.getElementByID.checked == true) {
        window.alert("Works!");
        }
}
/* ]]> */

</script>

</head>

 <body>
<form>
<input type="checkbox" id="agree" value="Terms" type="checked" checked="unchecked">Agree with the Terms & Conditions<br>
</form>
</body>
</html>

What im am trying to accomplish with the code above is when the checkbox is checked a prompt will appear. I did'ny quite know how to search for this specific answer I was looking for.

I'm calling this method in the body, I think. Well atleast it is where I want the method to activate. When the checkbox is checked the prompt will appear. — AJ_, Sep 18 '14 at 18:57
I don't see anything here associating the checkbox with that function. I suggest you read up on `onclick` events. — JLRishe, Sep 18 '14 at 19:33

killQuotes · Answer 1 · 2014-09-18T19:06:47.067

0

First, you're not using getElementById correctly. You need to pass in the element you're looking to find. Like so, getElementById("agree"). And as others have already posted in the comments, you're not calling 'termAgreed' in your code.

edited Sep 18 '14 at 19:06

answered Sep 18 '14 at 18:53

killQuotes

178
13

I just realized that. I forgot to put the checkbox ID. How would i go about calling the method in my form? Should I use onClick? I just want the method to activate once the checkbox is checked. – AJ_ Sep 18 '14 at 18:58
Consider using jQuery for this. Create a click event for the checkbox, see if it's 'checked', then perform your alert based on that check. Here's the fiddle -> http://jsfiddle.net/5o6h4g8o/ – killQuotes Sep 18 '14 at 19:03
I'm sorry, but I am not familiar with JQuery yet. I'm still trying to wrap my head around Javascript. – AJ_ Sep 18 '14 at 19:05
@killQuotes: Have you even tried this line of code `getElementByID("agree")` before posting it as asnwer? – Syed Ali Taqi Sep 18 '14 at 19:07
@Syed, No, I didn't, but I see it was a typo on my end. Sorry, I fixed it. – killQuotes Sep 18 '14 at 19:08
Yes i realized that I forgot to put the ID after I posted my questions, I apologize. – AJ_ Sep 18 '14 at 19:08

score 0 · Accepted Answer · answered Sep 18 '14 at 19:00

0

1) As suggested above you need to call your function inside your HTML. Use onchange() and call the function on change of check box.

2)You need to correct syntax of selecting element. its Id not ID and also pass the Id of element you want to select.

function termAgreed() {
if (document.getElementById("agree").checked == true) {
window.alert("Works!");
}
}

<input type="checkbox" id="agree" onchange="termAgreed()" value="Terms" checked="unchecked">Agree with the Terms & Conditions

answered Sep 18 '14 at 19:00

Syed Ali Taqi

4,898
3
34
44

Awesome, did exactly what I was trying to accomplish. – AJ_ Sep 18 '14 at 19:07
Please mark it answer. – Syed Ali Taqi Sep 18 '14 at 19:09

score 0 · Answer 3 · answered Sep 18 '14 at 19:03

0

I modified your termAgreed slightly. Please note that querySelector is not available in older browsers. I added a portion at the end to add the change event to the checkbox:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!--Author: Alejandro Deguzman Jr-->

<html>
<head>

<title>Realtor Inquiry</title>

<script type="text/javascript">

/* <![CDATA[ */
function termAgreed() {
    if (document.querySelector('#agree').checked) {
        window.alert("Works!");
        }
}
/* ]]> */

</script>

</head>

 <body>
<form>
<input type="checkbox" id="agree" value="Terms" type="checked" checked="unchecked">Agree with the Terms & Conditions<br>
</form>
<script type="text/javascript">
document.querySelector('#agree').addEventListener('change', termAgreed);
</script>
</body>
</html>

answered Sep 18 '14 at 19:03

user4040648

669
8
17

I see, this seems to be a more advanced way of using event handlers? I am not familiar with JQuery as of yet. – AJ_ Sep 18 '14 at 19:07
No jQuery here. Though I recommend looking into it if you start using more JavaScript. Though maybe not suitable for your usage, adding event handlers through JavaScript (what I did) is more maintainable as you add more JavaScript to your page. It is also generally accepted as a [best practice](http://stackoverflow.com/questions/15792498/is-it-bad-practice-to-use-inline-event-handlers-in-html) (and [here](http://www.sitepoint.com/web-foundations/onclick-html-attribute/), see note after compatibility at bottom, for example). – user4040648 Sep 18 '14 at 19:28

Javascript Method Not Working - Checkbox

3 Answers3