Menu
I'm trying to code a small html5 webpage that asks a user to type in a comment and their e-mail address. If they do not enter a comment and or an e-mail they will be prompted via javascript to fix their input. The problem I'm having is that the javascript is not functioning at all. I think it's being skipped altogether. Please tell me where I'm going wrong...
<!DOCTYPE HTML>
<html lang="en-US">
<link rel="icon" type="image/png" href="img/favicon.png">
<link rel="stylesheet" type="text/css" href="css/new.css">
<title>Comments</title>
</head>
<body>
<nav id="navbar"> Navigation:
<table><tr>
<td><a href="bio.html">Bio</a></td>
<td><a href="resume.html">Resume</a></td>
<td><a href="classes.html">Classes</a></td>
<td><a href="new.html">New</a></td>
</tr></table>
</nav>
<header>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript>
function yay () {
if (document.poop.melon.value == "" || document.poop.melon.value == "Type comment here!" || document.poop.melon.value == "..." )
{
alert ( "Fill in the comment box you poopyhead!" );
document.poop.melon.value = "Type comment here!";
return false;
}
if (document.poop.maplestory.value == "[email protected]" || document.poop.maplestory.value == "" || maplestory (document.poop.maplestory.value)){
alert ("Dear Sir or Madam, please type in your e-mail address.");
return false;
}
return true;
}
function maplestory( yummy )
{
var regex = /^[AZ09._%+]+@[AZ09.]+\.[AZ]{2,4}$/i;
if( yummy.search( regex ) == -1 )
return true ;
return false ;
}
</script>
</header>
<h2>Leave a delicious comment below:</h2>
<form name="poop" id="poop" method="POST" action="http://www.webdevfoundations.net/scripts/formdemo.asp" onsubmit="return yay();">
<textarea name="melon" id="melon" cols="35" rows="10">...</textarea><br>
<label for "maplestory">E-mail</label>:<br><textarea name="maplestory" id="maplestory" cols="35" rows="1">[email protected]</textarea><br>
<input id="submit" type="submit" value="Submit"></form>
<footer><div class="right"> name © 2010 </div></footer> <!-- It's a shame there's no unicode for the copyleft symbol :( -->
</body>
</html>
980
There are several problems with your source that stopped Javascript from running:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
You were missing the closing quotes for the src attribute. That made the DOM interpret everything after that as part of the src attribute, screwing up everything.
function maplestory( yummy )
{
You had a closing curly bracket instead of an opening one. This caused a parse error because Javascript was expecting an opening curly bracket.
if( yummy.search( regex ) == 1 )
You had an invisible character before the 1. This one was particularly difficult to find—I had to use my Javascript debugger to find it.
<label for="maplestory">E-mail</label>:<br><textarea name="maplestory" id="maplestory" cols="32" rows="1">[email protected]</textarea><br>
This shouldn't affect your problem, but you were missing the equals sign between the for and the "maplestory".
<!DOCTYPE HTML>
<html lang="en-US">
<link rel="icon" type="image/png" href="img/favicon.png">
<link rel="stylesheet" type="text/css" href="css/new.css">
<title>Comments</title>
</head>
<body>
<nav id="navbar"> Navigation:
<table><tr>
<td><a href="bio.html">Bio</a></td>
<td><a href="resume.html">Resume</a></td>
<td><a href="classes.html">Classes</a></td>
<td><a href="new.html">New</a></td>
</tr></table>
</nav>
<header>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function yay(){
if (document.poop.melon.value == "" || document.poop.melon.value == "Type comment here!" || document.poop.melon.value == "..." )
{
alert ( "Fill in the comment box!" );
document.poop.melon.value = "Type comment here!";
return false;
}
if (document.poop.maplestory.value == "[email protected]" || document.poop.maplestory.value == "" || maplestory (document.poop.maplestory.value)){
alert ("Dear Sir or Madam, please type in your e-mail address.");
return false;
}
return true;
}
function maplestory(yummy)
{
var regex = /^[AZ09._%+]+@[AZ09.]+\.[AZ]{2,4}$/i;
if( yummy.search( regex ) == -1 )
return true ;
return false ;
}
</script>
</header>
<h2>Leave a poopy comment below:</h2>
<form name="poop" id="poop" method="POST" action="http://www.webdevfoundations.net/scripts/formdemo.asp" onsubmit="return yay();">
<textarea name="melon" id="melon" cols="32" rows="10">...</textarea><br>
<label for="maplestory">E-mail</label>:<br><textarea name="maplestory" id="maplestory" cols="32" rows="1">[email protected]</textarea><br>
<input id="submit" type="submit" value="Submit"></form>
<footer><div class="right"> name © 2010 </div></footer> <!-- It's a shame there's no unicode for the copyleft symbol :( -->
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
