4

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 = /^[A­Z0­9._%+­]+@[A­Z0­9.­]+\.[A­Z]{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 &copy; 2010 </div></footer> <!-- It's a shame there's no unicode for the copyleft symbol :( -->
</body> 
</html>
Improve this question
1
  • are you getting any javascript errors? Commented Dec 16, 2010 at 5:43

5 Answers 5

Reset to default
5

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".

Since you seem to be having trouble getting it to work, copy and paste the below and see if it works. (For me, without editing the textboxes, if you click the submit button, you get an alert right away). If it doesn't work, let me know what browser you're using.

    <!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 = /^[A­Z0­9._%+­]+@[A­Z0­9.­]+\.[A­Z]{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 &copy; 2010 </div></footer> <!-- It's a shame there's no unicode for the copyleft symbol :( -->
    </body> 
    </html>
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Interesting the 1 value was suppose to be -1? I've fixed all of these things but still no dice :(
Thanks that seems to work. I can finally finish the rest of this script! :D
1

I found this from John Resig's blog

Script tags that references external resources may not be able to execute inlined scripts.

Improve this answer

2 Comments

I fixed this, but it's still not calling the javascript properly.
Can you put an alert("1") statement as the first line in the inline script and try. And one more thing close the script tag with proper </script> tag not like <script scr="" />.
1

try this 

<!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>
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 == "")
{
    alert ("Dear Sir or Madam, please type in your e-mail address.");
    return false;
}
else
{
    return true;
  }
}


</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 &copy; 2010 </div></footer> <!-- It's a shame there's no unicode for the copyleft symbol :( -->
</body> 
</html>
Improve this answer

2 Comments

This works but I'm not sure what exactly you changed. I see some things that were changed but when I try to change them myself it doesn't work. But thank you for your help.
Wait you removed my email verification expression ;p
1 
onsubmit="return yay( );"

should not have a space between the parenthesis.

onsubmit="return yay();"
Improve this answer

1 Comment

That's not going to make any difference
1

use a separate script tag for the jquery, and for your javascript like this:

<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 () {

also, where is the action function declared?

UPDATE: could it be becouse you are using a } instead of a { on the line after function maplestory( yummy )?

Improve this answer

4 Comments

Hm. I tried this but it still doesn't seem to work. Is there a specific reason to make them separate?
<form name="poop" id="poop" method="POST" action="webdevfoundations.net/scripts/formdemo.asp" onsubmit="return yay( );">
no, the action function being called in action ( "Fill in the comment box!" );
Oh, it was suppose to be 'alert' I fixed it, but unfortunately it's still not working.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.