Validating a Check Box

I'm trying to create a page that has a button at the end with a check box before it. Unless the check box is checked, it shouldn't carry through with the link. I absolutely cannot get it to work. I've been toying around with it for over a half hour now and can't get it working. I'm not sure that I actually need the elements in there since it's not actually a form, but I can't begin to conceive how to make it work without the elements, though. Here's what I've come up with at this point:

<!accept.html>
<html>
<head><title>Agreement Page</title>
<script type="text/javascript">
<!-- HIDE FROM IMCOMPATIBLE BROWSERS

function submitForm() {
	var submitForm = false;
	if (document.forms[0].accept.value == "")
		window.alert("You must agree with the above items in order to utilize the statistics form.");
		return false;
	else {
		return true;
	}
}

// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script></head>
<body bgcolor="#CCCCCC">

<p><div align="center"><font size="4" face="Garramond">Before you go any further, you need to read the following and agree to it.Otherwise, you cannot utilize the statistics form.</font></div></p>

<p><font size="2" face="Arial">
<ul>
 <li>These pages have been developed for educational purposes only.</li>
 <li>No profit is intended to be made.</li>
 <li>The images contained herein are property of the National Football Leauge, the NFL Players Association, and the Dallas Cowboys.The use of them is not intended as copyright infringement.</li>
 <li>These pages are not intended to aid or promote illegal gambling.  By using them, you (the user) will not try and accomplish this means.</li>
</ul>
</font></p>

<p>Do you accept the terms as outlined above?
<form action="" method="post" onsubmit="return confirmSubmit();">
<input type="checkbox" name="accept" value="Accepted" />I Accept
<input type="button" name="proceed" value="Proceed" onclick=window.location="nflStats.html";>
</form></p>
</body>
</html>

kahaj

Junior Poster

193 posts since Sep 2005

Reputation Points: 10

Solved Threads: 0

4 Years Ago

move you window redirecting code to a javascript function. Make your onclick call a function to validate the checkbox (again, in javascript), and then if the checkbox is checked you can then redirect.

Actually looking at your code, you seem to be mixing 2 approaches. You do not actually need the onclick if you set the input type to "submit" and the form action to "nflStats.html". Using this will trigger your confirmSubmit function too.

So there are 2 approaches you can take, I suggest you take the latter one I have mentioned.

sillyboy

Practically a Master Poster

686 posts since Mar 2007

Reputation Points: 85

Solved Threads: 64

4 Years Ago

I made some changes and it is still loading nflStats.html whether the check box is checked or not. Here is what I have right now:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<!--accept.html-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Agreement Page</title>
<script type="text/javascript">
<!-- HIDE FROM IMCOMPATIBLE BROWSERS

function confirmSubmit() {
	var submitForm = false;
	if (document.forms[0].accept.value == "")
		window.alert("You must agree with the above items in order to utilize the statistics form.");
		return false;
	else {
		return true;
	}
}

// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script></head>
<body bgcolor="#CCCCCC">

<p><div align="center"><font size="4" face="Garramond">Before you go any further, you need to read the following and agree to it.Otherwise, you cannot utilize the statistics form.</font></div></p>

<p><font size="2" face="Arial">
<ul>
 <li>These pages have been developed for educational purposes only.</li>
 <li>No profit is intended to be made.</li>
 <li>The images contained herein are property of the National Football League, the NFL Players Association, and the Dallas Cowboys.The use of them is not intended as copyright infringement.</li>
 <li>These pages are not intended to aid or promote illegal gambling.  By using them, you (the user) will not try and accomplish this means.</li>
</ul>
</font></p>

<p>Do you accept the terms as outlined above?
<form action="nflStats.html" method="post" onsubmit="return confirmSubmit();">
<input type="checkbox" name="accept" value="Accepted" />I Accept
<input type="submit" name="proceed" value="Proceed">
</form></p>
</body>
</html>

Where do I seem to be dropping the ball at on this one?

kahaj

Junior Poster

193 posts since Sep 2005

Reputation Points: 10

Solved Threads: 0

4 Years Ago

Watch your blocks as I think you are missing a few { }.

I would do it slightly different to you, but this is how I would do it:

function confirmSubmit() {
        var acc = document.getElementById("accept");
	if (!acc.checked) {
		alert("You must agree with the above items in order to utilize the statistics form.");
		return false;
	} else {
		return true;
	}
}

For this to work with your code, just make sure you set the id for your checkbox to "accept".

sillyboy

Practically a Master Poster

686 posts since Mar 2007

Reputation Points: 85

Solved Threads: 64

4 Years Ago

Alright, it works now! I understand the "document.getElementById("accept");", but don't understand the (!acc.checked) part. I'm not familiar with what the !acc is about.

kahaj

Junior Poster

193 posts since Sep 2005

Reputation Points: 10

Solved Threads: 0

4 Years Ago

var acc = document.getElementById('accept') assigns the reference of the checkbox element of your form to acc. Checkboxes have a property checked which determines whether a checkbox is checked or not.

Thus !acc.checked means 'when checkbox is not checked'.

~s.o.s~

Failure as a human

Administrator

11,938 posts since Jun 2006

Reputation Points: 3,281

Solved Threads: 734

This question has already been solved

You