PDA

View Full Version : Javascript checkbox form validation



TonyDevlin
05-27-2008, 09:50 AM
Hi I am trying to validate my webpage which has 2 checkboxes on it. I only want the user to select 1 checkbox and if they do select 2 and click submit then an alert box will appear telling them that they have selected 2 boxes. I have managed to make the above happen by having the alert box appear when the 2 checkboxes are selected however the content of the page still gets submitted and moves onto the next page!! How do I stop the page from getting submitted if an alert box appears? I have added my code below.

Thank you.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script language="JavaScript" type="text/javascript">
function checkscript() {
if (document.myform.box1.checked == true && document.myform.box2.checked == true)
{ alert('box1 & 2 are selected');
form.email.focus();
return false ;
}

// If the script makes it to here, everything is OK,
// so you can submit the form

else return true;
}

</script>
</head>

<body>

<form name="myform" action="page.html" method="post" onsubmit="return checkscript()">


<input
type="checkbox"
name="box1"
value="yes1">
<input
type="checkbox"
name="box2"
value="yes2">
<input
type="submit">
</form>
</body>
</html>

rangana
05-27-2008, 11:05 AM
language is a deprecated attribute, type will suffice.

See if removing the highlighted helps:


<script language="JavaScript" type="text/javascript">
function checkscript() {
if (document.myform.box1.checked == true && document.myform.box2.checked == true)
{ alert('box1 & 2 are selected');
// form.email.focus(); this part is erroeneous
return false ;
}

// If the script makes it to here, everything is OK,
// so you can submit the form

else return true;
}

</script>