Javascript function problem

oldskool · Mar 23, 2009

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]....I removed this part of the HTML for brevity.....[/I]

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 · Mar 23, 2009

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 · Mar 23, 2009

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 · Mar 23, 2009

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

kmote said:
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 · Mar 23, 2009

Works like a charm mate.

oldskool · Mar 23, 2009

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 · Mar 24, 2009

oldskool said:
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

Javascript function problem

oldskool

Oldie but a goodie

CrazeD

Fully Optimized

kmote

Seg Fault'n,

oldskool

Oldie but a goodie

kmote

Seg Fault'n,

oldskool

Oldie but a goodie

oldskool

Oldie but a goodie

Similar threads