I am running into an error on a javascript problem I have it display if the math problem is wrong, and an alert box that pops up, but when you hit OKAY on the alert box it still submits the form. I am wondering if there is an easy fix to this or not. I will post my code in a min here. I would really appreciate some help on this if you have the time. I have researched this for a while and rewrote my code many times but still not working. The part of the code i am looking for help on is the "function ValidBotBoot()"
<!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>
<title>Family Recipes | Share Your Passion</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="Content-type" content="text/html; charset=utf-8"><meta name="language" content="en">
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
.main {
width:200px;
border:1px solid black;
}
.month {
background-color:black;
font:bold 12px verdana;
color:white;
}
.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}
.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}
.days #today{
font-weight: bold;
color: red;
}
.tb5 {
height: 22px;
width: 230px;
}
.tb5a {
background: url(rounded.gif) no-repeat top left;
border: 0;
width:220px;
margin-top:3px;
}
</style>
<script type="text/javascript" src="basiccalendar.js"></script>
<script src="gen_validatorv4.js" type="text/javascript"></script>
<script type="text/javascript">
var a = Math.ceil(Math.random() * 20);
var b = Math.ceil(Math.random() * 20);
var c = a + b
function DrawBotBoot()
{
document.write("What is "+ a + " + " + b +"? ");
document.write("<input id='BotBootInput' type='text' maxlength='2' size='2'/>");
}
function ValidBotBoot(){
var d = document.getElementById('BotBootInput').value;
if (d == c) return true;
else
var text = document.getElementById('matherror').innerHTML = "Math Error, Try again";
alert('Please check your answer');
return false;
}
</script>
</head>
<body>
<div id="main">
<div id="header">
<div id="title">
<a href="#"><img id="logo" src="images/logo.gif" width="88" height="92" alt=""/></a>
<h1><a href="#">Family Recipes</a></h1>
<h2>Share your Passion</h2>
</div>
</div>
<div id="menu">
<ul><li><a href="index.php" title="">Home</a></li>
<li><a href="submit.php" title="">Submit Recipe</a></li>
<li><a href="searchrecipe.php" title="">Search Recipes</a></li>
<li><a href="/blog/index.php" title="">Food Blog</a></li>
</ul><div class="search" align="right">
<form method="get" action="searchrecipe.php">
<fieldset>
<input type="text" id="search-text" name="search" />
<input type="submit" id="search-submit" value="Search" />
</fieldset>
</form>
</div>
</div>
<div id="middle">
<div id="left">
<div align="center" class="box_left">
<h3><a href="#">Random Recipe</a></h3>
<ul>
<?php echo "\n\t<li><a href=\"searchrecipe.php?ID={$row['ID']}\">{$row['Recipe_Name']}</a></li>"; ?>
</ul>
</div>
<div align="center" class="box_left">
<h3><a href="#">Calendar</a></h3>
<script type="text/javascript">
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year
document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
</script>
</div>
</div>
<div id="right">
<div id="intro">
<h2>Welcome to Family Recipes Online</h2>
<p>Family Recipes is an Open Source, Community Recipe Search. We have designed this site to have a place to share and search for tasty and yummy recipes. Please do not submit anything that contains profanity, nudity, vulger or anything of the sort. We want to have this as a friendly community and strive to keep that aspect. </p>
</div>
<div id="box_right">
<table >
<tr>
<form name="form1" enctype="multipart/form-data" method="post" action="add.php">
<td>
<table width="100%">
<tr>
<td colspan="3" align="center">Please fill this out to submit your recipe.</td>
</tr>
<tr>
<td width="">Recipe Name</td>
<td width="">:</td>
<td width=""><input name="Recipe_Name" type="text" class="tb5a" id="Recipe_Name" size="30"/></td>
</tr>
<tr>
<td>Oven Heat</td>
<td>:</td>
<td><input size="30" type="text" class="tb5a" name="Oven_Heat" id="Oven_Heat" /></td>
</tr>
<tr>
<td>Submitted By</td>
<td>:</td>
<td><label>
<input name="Submitted" type="text" class="tb5a" id="Submitted" size="30" />
</label></td>
</tr>
<tr>
<td>Yield / Servings</td>
<td>:</td>
<td><input name="Servings" type="text" class="tb5a" id="Servings" size="30" /></td>
</tr>
<tr>
<td>Amount / Ingredient 1</td>
<td>:</td>
<td><label>
<input name="ingredient1" type="text" class="tb5a" id="ingredient1" size="30" />
</label></td>
</tr>
<tr>
<td>Amount / Ingredient 2</td>
<td>:</td>
<td><label>
<input name="ingredient2" type="text" class="tb5a" id="ingredient2" size="30" />
</label></td>
</tr>
<tr>
<td>Amount / Ingredient 3</td>
<td>:</td>
<td><label><input name="ingredient3" type="text" class="tb5a" id="ingredient3" size="30" />
</label></td>
</tr>
<tr>
<td>Amount / Ingredient 4</td>
<td>:</td>
<td><input name="ingredient4" type="text" class="tb5a" id="ingredient4" size="30" /></td>
</tr>
<tr>
<td>Amount / Ingredient 5</td>
<td>:</td>
<td><input name="ingredient5" type="text" class="tb5a" id="ingredient5" size="30" /></td>
</tr>
<tr>
<td>Amount / Ingredient 6</td>
<td>:</td>
<td><input name="ingredient6" type="text" class="tb5a" id="ingredient6" size="30" /></td>
</tr>
<tr>
<td>Amount / Ingredient 7</td>
<td>:</td>
<td><input name="ingredient7" type="text" class="tb5a" id="ingredient7" size="30" /></td>
</tr>
<tr>
<td>Amount / Ingredient 8</td>
<td>:</td>
<td><input name="ingredient8" type="text" class="tb5a" id="ingredient8" size="30" /></td>
</tr>
<tr>
<td>Amount / Ingredient 9</td>
<td>:</td>
<td><input name="ingredient9" type="text" class="tb5a" id="ingredient9" size="30" /></td>
</tr>
<tr>
<td>Amount / Ingredient 10</td>
<td>:</td>
<td><input name="ingredient10" type="text" class="tb5a" id="ingredient10" size="30" /></td>
</tr>
<tr>
<td>Amount / Ingredient 11</td>
<td>:</td>
<td><input name="ingredient11" type="text" class="tb5a" id="ingredient11" size="30" /></td>
</tr>
<tr>
<td>Amount / Ingredient 12</td>
<td>:</td>
<td><input name="ingredient12" type="text" class="tb5a" id="ingredient12" size="30" /></td>
</tr>
<tr>
<td>Directions</td>
<td>:</td>
<td><textarea name="Directions" id="Directions" rows="5" cols="30"></textarea></td>
</tr>
<tr>
<td>Key Words</td>
<td>:</td>
<td><label>
<textarea name="Keywords" id="Keywords" rows="5" cols="30"></textarea>
</label></td>
</tr>
<tr>
<td>Description</td>
<td>:</td>
<td><textarea name="description" id="description" rows="5" cols="30"></textarea></td>
</tr>
<tr>
<td>Upload a Picture</td>
<td>:</td>
<td><input name="image" type="file" class="tb5a"/></td>
</tr>
<tr>
<td>Are you human?<br /></td>
<td></td>
<td><script type="text/javascript">DrawBotBoot()</script></td><td><span id="matherror"></span>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td align="right"><input type="submit" onclick="ValidBotBoot();" name="Submit" id="Submit" value="Submit Recipe" />
<input type="reset" name="button2" id="button2" value="Reset" /></td>
</tr>
</table>
</td>
</form>
<script type="text/javascript">
var frmvalidator = new Validator("form1");
frmvalidator.addValidation("BotBootInput","req","Please complete the Are You Human Section");
</script>
</tr>
<tr><td align="right"></a></td></tr>
</table>
</div>
<div class="bar">
<div class="bar1">
<h3><a href="#">Cum sociis natoque</a></h3>
<img src="images/img1.jpg" width="188" height="115" alt=""><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean rutrum tortor a purus. Quisque convallis nisl ac augue. <a href="#">»»»</a></p>
</div>
<div class="bar2">
<h3><a href="#">Lorem ipsum</a></h3>
<img src="images/img2.jpg" width="188" height="115" alt=""><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla hendrerit lacus at metus.
Maecenas venenatis rhoncus nulla. <a href="#">»»»</a></p>
</div>
<div class="bar3">
<h3><a href="#">Proin lobortis</a></h3>
<img src="images/img3.jpg" width="188" height="115" alt=""><p>Proin lobortis nisi nec nisi. Morbi mattis fermentum lectus.
Nam vestibulum arcu vulputate ante. Maecenas rutrum dui nec quam. <a href="#">»»»</a></p>
</div>
<div class="clearing"> </div>
</div>
</div>
</div>
<div id="footer">
<p>Copyright © 2011 Family Recipes Online. | All Rights Reserved. | Designed by <a href="http://www.webdesignstudiocs.com/">Web Design Studio CS</a></p>
</div>
</div>
</body></html>