simple jquery does not work

Question

I am new to JavaScript and jquery and want to check fields in a form before submitting. But even a simple example taken from How to do something before on submit? does not work. I do not ge an alert in Firefox and do not see any errors in the webdeveloper's console. See the code:

<html>
<head>

<script src="jquery.min.js"></script>
<script type="text/javascript">
$('#myForm').submit(function() {
  alert('Handler for .submit() called.');
  return false;
});
</script>
</head>

<body>


<form id="myForm" action="foo.php" method="get">
   <input type="text" value="" />
   <input type="submit" value="submit form" />
</form>



</body>
</html>

And of course there is "jquery.min.js" in the same folder.

Make sure to wrap your code in `document.ready` event **or** add the script before the closing `body` tag. — elclanrs, Nov 22 '13 at 09:54
You need a `DOM ready handler` to wrap your code with. See [here](http://learn.jquery.com/using-jquery-core/document-ready/) for more information on this. — Nunners, Nov 22 '13 at 09:56
I recommend to read [jQuery's documentation](http://learn.jquery.com/about-jquery/how-jquery-works/). There it says: *"To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the ready event"*. — Felix Kling, Nov 22 '13 at 10:35

score 3 · Accepted Answer · answered Nov 22 '13 at 09:54

3

You need to add the script in a dom ready handler

jQuery(function () {
    $('#myForm').submit(function () {
        alert('Handler for .submit() called.');
        return false;
    });
})

answered Nov 22 '13 at 09:54

Arun P Johny

365,836
60
503
504

score 1 · Answer 2 · answered Nov 22 '13 at 09:57

When the js code is executed, the html element has to already exists. To delay the code strat, use document.ready as above:

<script type="text/javascript">
$(document).ready(function(){
  $('#myForm').submit(function() {
    alert('Handler for .submit() called.');
    return false;
  });
});
</script>

Note: the syntax $('#myForm').submit(function() { is deprecated and should probably be replaced by $(document).on("submit", "#myForm", function() { or something similar :)

EDIT: also for what you ask, see javascript documentation about e.preventDefault(), this could also be useful for what you want :)

score 1 · Answer 3 · answered Nov 22 '13 at 09:57

This will work too, setting script after element already added to the DOM:

<html>

    <head>
        <script src="jquery.min.js"></script>
    </head>

    <body>
        <form id="myForm" action="foo.php" method="get">
            <input type="text" value="" />
            <input type="submit" value="submit form" />
        </form>
        <script type="text/javascript">
            $('#myForm').submit(function() {
                alert('Handler for .submit() called.');
                return false;
            });
        </script>
    </body>

score 1 · Answer 4 · answered Nov 22 '13 at 10:03

you should try e.preventDefault(); instead of return false; E.g

$(function() { $('#myForm').submit(function(e) { e.preventDefault(); alert('Handler for .submit called.'); }); });

because some times return false; may not be effective on some codes on jquery

score 0 · Answer 5 · answered Nov 22 '13 at 09:58

    <html>
    <head>
    <script src="jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('#myForm').submit(function() {
      alert('Handler for .submit() called.');
      return false;
    });
    });
    </script>
    </head>
    <body>
    <form id="myForm" action="foo.php" method="get">
       <input type="text" value="" />
       <input type="submit" value="submit form" onsubmit="submit" />
    </form>
</body>
</html>

demo: http://jsfiddle.net/kapil_dev/6Tf7Y/

simple jquery does not work

5 Answers5