Problem preventing form submission with jquery

Question

I wish to execute a jquery based ajax form submission on pressing the enter key. Obviously this involves stopping the normal form submission process. My form consists of a single input field. Here is the code:

<script type="text/javascript">
$(document).ready(function() {
    // add vid ajax
    $.ajaxSetup({
        cache:false;
    });
    var ajax_load = '<div class="displayBox">Adding url...</div>';
    var loadUrl = 'ajax/add';

    $("#vidForm").submit(function(){
        e.preventDefault();
        alert("hello");
        /*$("body").html(ajax_load)
        .load(loadUrl,{url:$("#addurl").value},function(responseText){
            $("#videos").append(responseText);
        });*/
        return false;
    });

});
</javascript>
...
<form id="vidForm" action="ajax/">  
    <input id="addurl" name="addurl"/>
</form>

I'd expect the above to submit to 'ajax/add' but it doesn't, submitting instead a full blown http-request to 'ajax' the default behaviour (in Chrome at least).

What am I doing wrong?

Answer 1

As a general rule, any JavaScript errors will probably result in the same behavior as no JavaScript at all, and that's what you're seeing...the default submission behavior because of script errors. I've outlined the issues below:

Your closing tag is off:

</javascript>

should be:

</script>

---

Also object literals shouldn't have a ; for properties, so change:

$.ajaxSetup({
    cache:false;
});

To:

$.ajaxSetup({
    cache:false
});

---

And lastly, remove this:

e.preventDefault();

Your return false is already taking care of this (and would error anyway because of the missing parameter, as in TJ's answer).

Answer 2

Update: Now that you've cleared up the earlier issues, I'm not seeing any problem. Fundamentally, it works: http://jsbin.com/ugowa4 (Tested on Chrome, Firefox, and Opera for Linux; IE6 and IE8.) You'll have to walk through with a debugger to figure out at what point things are failing. The basics should work.

---

Looks like you've forgotten to declare the event parameter:

$("#vidForm").submit(function(e){
                              ^--- Add this

Without it, you're trying to access a variable e from the containing scope. If there isn't one, or it doesn't have a function called preventDefault, you'll get an exception at that point and the rest of the function will be ignored.

See also Nick's note about the closing tag (should be </script>) and the misplaced ;.

Answer 3

Do you have any button with the type submit in the form? For example like

<form id="vidForm" action="ajax/">  
    <input id="addurl" name="addurl"/>
    <button type="submit">Send</button>
</form>

or

<form id="vidForm" action="ajax/">  
    <input id="addurl" name="addurl"/>
    <input type="submit" value="Send" />
</form>

Clicking of the "Send" button in the example will submit the form. If you form has more elements please post the whole code.