JQuery Post Not Working With IE8 + 9

Question

I am using jquery to post a form. Works fine on all browsers apart from IE, IE does not seem to be picking up the "prevent default" as the browser is directing to "beta.php". Here is my code

    $(document).ready(function(){   
        $("#betaform").submit(function(e){
            event.preventDefault();
            $.ajax({
                url: "beta.php",
                type: "POST",
                data: $(this).serialize(),
                success: function(data){
                    content = "<H2>Thank you, data received</H2>";
                    $("#betaform").empty().append(content);
                }

            });
        });

     });

Use `e.preventDefault();` as you've passed `e` through the function. — Albzi, Dec 03 '14 at 15:54
possible duplicate of http://stackoverflow.com/questions/1000597/event-preventdefault-function-not-working-in-ie — meskobalazs, Dec 03 '14 at 15:55
Also this may help http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false — Zach Leighton, Dec 03 '14 at 15:56

score 2 · Accepted Answer · answered Dec 03 '14 at 15:55

Instead of using event.preventDefault();, use e.preventDefault().

You've passed e through in the function:

$("#betaform").submit(function(e){
                               ^ here

So either change e to event or event to e.

Zach has also stated that return false; could be included too.

Make sure if you do include return false, it goes at the bottom of the function.

$(document).ready(function(){   
    $("#betaform").submit(function(e){
        e.preventDefault();
        $.ajax({
            url: "beta.php",
            type: "POST",
            data: $(this).serialize(),
            success: function(data){
                content = "<H2>Thank you, data received</H2>";
                $("#betaform").empty().append(content);
            }

        });
      return false; // here
    });

 });

Also may want to return false too – Zach Leighton Dec 03 '14 at 15:56 — Zach Leighton, Dec 03 '14 at 15:56
return false is/was not needed. – epascarello Dec 03 '14 at 16:10 — epascarello, Dec 03 '14 at 16:10

score 0 · Answer 2 · answered Dec 03 '14 at 15:58

0

We use this function for cross-browser support because event.preventDefault() doesn't exist in earlier version of IE.

function PreventDefault(event) {
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
}

answered Dec 03 '14 at 15:58

Joce Pedno

334
1
7

That is NOT needed with jQuery...and this is not the problem. – epascarello Dec 03 '14 at 16:11

score 0 · Answer 3 · answered Dec 03 '14 at 16:03

The JavaScript submit event does not bubble in Internet Explorer. However, scripts that rely on event delegation with the submit event will work consistently across browsers as of jQuery 1.4, which has normalized the event's behavior.

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems

from jQuery API

Go and check all tags inside form and check for attributes having value (submit, length, or method) and rename attributes on something like:

<input type="submit" id="submit" name="submit" />

into

<input type="submit" id="submision" name="valid" />

JQuery Post Not Working With IE8 + 9

3 Answers3