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?

Hmm. Well, if anything is broken in your javascript, you may not even be getting as far as the submit()... Do you see any errors in the console if your run this using a debugger such as Firebug? — Matt Gibson
– Matt Gibson, Commented Oct 4, 2010 at 13:52
It's well worth using some tools to help you with things. Look at using the Dev Tools that are part of Chrome or Safari (Ctrl+Shift+I), or installing Firebug on Firefox, or using the free Visual Studio environment for IE. Any of them would have pointed out several of the issues with that code. — T.J. Crowder
– T.J. Crowder, Commented Oct 4, 2010 at 13:53
no errors to report in firebug after fixing the 2 issues below — citronic
– citronic, Commented Oct 4, 2010 at 14:09
That's odd, see my updated answer -- that leaves very little to go wrong. — T.J. Crowder
– T.J. Crowder, Commented Oct 4, 2010 at 14:18

Nick Craver · Accepted Answer · 2010-10-04 13:55:08Z

4

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

edited Oct 4, 2010 at 13:55

answered Oct 4, 2010 at 13:50

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

citronic Over a year ago

I removed the semi colon and the call to e.preventDefault(). The <javascript> was a typo in my question. Still didn't get an alert box popping up, and default behaviour.

T.J. Crowder · Accepted Answer · 2010-10-04 14:18:05Z

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

edited Oct 4, 2010 at 14:18

answered Oct 4, 2010 at 13:50

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

1 Comment

citronic Over a year ago

I had another small bit of javascript that apparently hid the failings of my code posted above; swapped their position and works ok now cheers

Oleg · Accepted Answer · 2010-10-04 15:45:41Z

0

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.

answered Oct 4, 2010 at 15:45

Oleg

222k36 gold badges414 silver badges826 bronze badges

Collectives™ on Stack Overflow

Problem preventing form submission with jquery

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related