Html not calling javascript functions

I'm trying to code a small html5 webpage that asks a user to type in a ment and their e-mail address. If they do not enter a ment 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=".4.4/jquery.min.js"></script>
<script  type="text/javascript>


function yay () {
if (document.poop.melon.value == "" || document.poop.melon.value == "Type ment here!" || document.poop.melon.value == "..." )
{
    alert ( "Fill in the ment box you poopyhead!" );
    document.poop.melon.value = "Type ment 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 ment below:</h2>
<form name="poop" id="poop" method="POST" action=".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>

     <!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./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 ment here!" || document.poop.melon.value == "..." )
{
    alert ( "Fill in the ment box you poopyhead!" );
    document.poop.melon.value = "Type ment 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 ment below:</h2>
<form name="poop" id="poop" method="POST" action="http://www.webdevfoundations/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>

Share Improve this question edited Dec 16, 2010 at 6:12 asked Dec 16, 2010 at 5:35 에이바바 1,03111 gold badges36 silver badges61 bronze badges

are you getting any javascript errors? – The Scrum Meister Commented Dec 16, 2010 at 5:43

Add a ment |

5 Answers 5

Sorted by: Reset to default 5

There are several problems with your source that stopped Javascript from running:

<script type="text/javascript" src="http://ajax.googleapis./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./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 ment here!" || document.poop.melon.value == "..." )
    {
     alert ( "Fill in the ment box!" );
     document.poop.melon.value = "Type ment 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 ment below:</h2>
    <form name="poop" id="poop" method="POST" action="http://www.webdevfoundations/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>

I found this from John Resig's blog

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

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./ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
function yay () {
if (document.poop.melon.value == "" || document.poop.melon.value == "Type ment here!" || document.poop.melon.value == "..." )
{
    alert ( "Fill in the ment box!" );
    document.poop.melon.value = "Type ment 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 ment below:</h2>
<form name="poop" id="poop" method="POST" action="http://www.webdevfoundations/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>

onsubmit="return yay( );"

should not have a space between the parenthesis.

onsubmit="return yay();"

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

<script type="text/javascript" src="http://ajax.googleapis./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 )?

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Html not calling javascript functions - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)