adis
adis

Reputation: 5951

Why jQuery .submit is not working?

I tried for almost an hour to figure out how to perform some validation before submitting the form. My form is like this:

<!doctype html>
<head>
<title>sample</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">      </script>
<script>
 $("#myform").submit(function() {
   alert("it is not working");
   return false;
 });
</script>
</head>
<body>
  <form id="myform">
   <input id="foo" value="Change me and press enter"/>
   <input type="submit" />
  </form>
</body>
</html>

It is not working in IE, Chrome FF :-( I must be doing something terribly wrong, but what?

EDIT

Working sample:

<!doctype html>
<head>
<title>sample</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> </script>
<script>
    $(document).ready(function() {
    $("#myform").submit(function() {
        alert("Now it is def working!");
        return false;
    });
});
</script>
</head>
<body>
<div id="myform">
<form id="myform">
    <input id="foo" value="Change me and press enter"/>
    <input type="submit" />
</form>
</div>
</body>
</html>

Upvotes: 2

Views: 16169

Answers (1)

Naftali
Naftali

Reputation: 146302

Wrap it in the ready function:

$(function(){
   $("#myform").submit(function() {
      alert("THIS IS WORKING!!!!!!");
      return false;
   });
});

You need to wrap it in the ready function because where your function is now, the DOM element #myForm does not exist, so you are attaching the handler to a non existent element.

The ready function waits for the DOM to load and then runs everything inside of the ready fintion.

Upvotes: 16

Related Questions