Javascript function problem

oldskool · 03-23-2009, 06:15 PM

I am trying to get this code to work such that when you click the button, a pop-up box tells you that you have to check the checkbox first. There isn't actually a destination page yet, I am trying to just get the code to work right for the above to occur.

Can anyone tell me what is wrong with my code ? Thanks in advance for any help.

Code:

<html>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Check box practice HTML</title>

<meta http-equiv="content-type" content="text/html;
     charset=iso-8859-1" />


....I removed this part of the HTML for brevity.....

Do you agree to the terms above ? <br />

If so, please check the checkbox below.<h3>

<br />
<br />

<script type="text/javascript">
/* <![CDATA[ */
//code written by Eric Maddan

 


function chkBoxselected()  {
   if (document.terms.chkBox.checked == false)   {
     
      alert (' You didn't click the checkbox to confirm the rules listed above !');
      return false;
      }
   else
      {
      return true;
      }

}
 

/* ]]> */


</form>
</script>
</head>

<body>
<script type="text/javascript">
/* <![CDATA[ */



/* ]]> */

</script>


<form name="terms">
<input type="checkbox" name="chkBox" />  I accept the terms and conditions<br /><br />
<input type="button" name="close" value="Enter Site" size="75" 
    onclick="function chkBoxselected()";>

</form>
    
    

</body>
</html>

CrazeD · 03-23-2009, 06:27 PM

Code:

<html>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Check box practice HTML</title>

<meta http-equiv="content-type" content="text/html;
     charset=iso-8859-1" />


....I removed this part of the HTML for brevity.....

Do you agree to the terms above ? <br />

If so, please check the checkbox below.<h3>

<br />
<br />

<script type="text/javascript">
/* <![CDATA[ */
//code written by Eric Maddan

function validateForm(theForm)
{
	var reason = "";

	reason += validateCheckbox(theForm.chkBox);	  

	if (reason != "") {
		alert("Please fix the errors below!\n\n" + reason);
		return false;
	}
}

function validateCheckbox(el)
{
	var error = "";

	if (el.checked == false) {
		error = "You didn't click the checkbox to confirm the rules listed above !";
	}

	return error;
}
 
</script>
</head>

<body>
<script type="text/javascript">
/* <![CDATA[ */



/* ]]> */

</script>


<form name="terms" onsubmit="return validateForm(this);">
<input type="checkbox" name="chkBox" />  I accept the terms and conditions<br /><br />
<input type="submit" name="close" value="Enter Site" size="75" />

</form>
    
    

</body>
</html>

Try this.

I changed your button to a submit, and added an onsubmit argument to the form. Basically, when you press submit, the function in onsubmit will run. If it returns false (in the case of an error), the form won't submit... but if it returns true, the form will submit. The function checks another function that validates if the check box is pressed or not.

The advantage to my way is that you can add more validation functions (for other parts of a form, maybe) very easily.

kmote · 03-23-2009, 06:39 PM

onclick would also work but you need to bring the semicolon into the double quotes and escape the apostrophe in "didn't"

EDIT: also remove the word function from the onclick atribute

oldskool · 03-23-2009, 06:39 PM

Well that was some quick response ! Thanks, CrazeD. Ok, I see where you are going with that. I appreciate your help very much.

Quote:

Originally Posted by kmote

onclick would also work but you need to bring the semicolon into the double quotes and escape the apoatrophe in "didn't"

So the code I had would have worked if I had made those changes, kmote ?

kmote · 03-23-2009, 06:45 PM

Works like a charm mate.

oldskool · 03-23-2009, 06:50 PM

Thank you, then. I am glad to know that I am making some progress. Thanks to you and CrazeD, and jaeusm at times as well. You guys rock !

oldskool · 03-24-2009, 09:52 PM

Quote:

Originally Posted by oldskool

Thank you, then. I am glad to know that I am making some progress. Thanks to you and CrazeD, and jaeusm at times as well. You guys rock !

EDIT: Ok, I got it going now, here it is :

Code:

<html>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Check box practice HTML</title>

<meta http-equiv="content-type" content="text/html;
     charset=iso-8859-1" />


<br />
<br />
<br />

<center><h3>Do you agree to the terms above ? <br />

If so, please check the checkbox below.<h3></center>

<br />
<br />


<script type="text/javascript">
/* <![CDATA[ */
//code written by Eric Maddan


function chkBoxselected()  {
   if (document.terms.chkBox.checked == false)   {
     
      window.alert(" You did not click the checkbox to confirm the rules listed above ");
      return false;
      }
   else
      {
      return true;
      }

}
 

/* ]]> */


</script>
</head>

<body>
<script type="text/javascript">
/* <![CDATA[ */



/* ]]> */

</script>

<center>
<form name="terms">
<input type="checkbox" name="chkBox" />  I accept the terms and conditions<br /><br />
<input type="button" name="close" value="Enter Site" size="75" 
    onClick="chkBoxselected()"></center>

</form>
    
    

</body>
</html>

ATTN: Admins, this thread can be closed now

Member Login