Member Avatar for kahaj

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 <form> elements in there since it's not actually a form, but I can't begin to conceive how to make it work without the <form> 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.<br />Otherwise, you cannot utilize the statistics form.</font></div></p><br /><br />

<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.<br />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><br /><br />

<p>Do you accept the terms as outlined above?<br />
<form action="" method="post" onsubmit="return confirmSubmit();">
<input type="checkbox" name="accept" value="Accepted" />I Accept<br /><br />
<input type="button" name="proceed" value="Proceed" onclick=window.location="nflStats.html";>
</form></p>
</body>
</html>
  • 3 Contributors
  • 5 Replies
  • 120 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ~s.o.s~
Member Avatar for sillyboy

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.

Member Avatar for kahaj

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.<br />Otherwise, you cannot utilize the statistics form.</font></div></p><br /><br />

<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.<br />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><br /><br />

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

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

Member Avatar for sillyboy

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".

Member Avatar for kahaj

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.

Member Avatar for ~s.o.s~

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'.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.