CODEWITHSUNDEEP
jqueryajaxformsform-submit
shubniggurath
shubniggurath

Reputation: 966

jquery .preventDefault() issue

I want forms handled with this code:

 //All form submissions should go through here.
 $(document).on('submit', 'form', function (x) {
     //x.preventDefault();  //commented out because it's not working
     $.ajax({
         url: $(this + '#formdestination').val(), //formdestination is a hidden field, showing where to submit the form
         type: 'post',
         dataType: 'json',
         data: $(this).serialize(),
         complete: function (xhr, status) {
            if (status === 'error' || !xhr.responseText) {
                window.location = '/broken/?err=Inconsolable%20onsubmit%20ajax%20error'; //i'd like the real error here, ideally
            } //end if
            else {
                loader($('#pagedestination').val()); 
                //loader is a function that animates the page as it loads new content.
                //#pagedestination is a hidden field that stores where the page should go when it's done.
                //Yes, I know formdestination and pagedestination could be handled with the form or the backend.  There are reasons that do not matter much here.
            } //end else
        } //end complete function

    });

    return false;
});

There are a couple of problems I'm having.

1.) When a form is submitted, it calls this function. It doesn't call loader, or if it does, it's overridden by the controller's redirect. I need to prevent a generic submit when the form is submitted. .preventDefault() is not working properly (see below).

2.) (far less important than #1) If the ajax craps out, I'd like to get the legit error. How?

On .preventDefault() - when I try it, I get this error:Uncaught SyntaxError: Unexpected identifier

Thanks for your help.

Upvotes: 1

Views: 3211

Answers (2)

cernunnos
cernunnos

Reputation: 2806

The exception your getting is coming from some other place, visit this fiddle: http://jsfiddle.net/DgRLa/

It has this code:

$(document).on('click', '.test', function (x) {
    x.preventDefault();  //commented out because it's not working

    $.ajax({
         url: "test.php", //formdestination is a hidden field, showing where to submit the form
         type: 'post',
         dataType: 'json',
         data: $(this).serialize(),
         complete: function (xhr, status) {
             console.log("hi");
         } 
    }).fail(function () {
        alert("error");
    });
});

When you click the "clickme" element you will get both the console.log and the alert.

Use the "success" callback instead of the "complete" one, and use deferred .fail to capture an error, try something like this:

$(document).on('submit', 'form', function (x) {
     x.preventDefault();  //commented out because it's not working
     var url = $(this).attr("action");     

     $.ajax({
         url: url , // Use the form action attribute instead of a hidden field
         type: 'post',
         dataType: 'json',
         data: $(this).serialize(),
         success: function (data) {
             loader($('#pagedestination').val()); 
         } 
    }).fail(function (error) {
         // error has all sorts of fun stuff
    });

    // return false; Dont return false, preventDefault is enough
});

PS: you mention loader sends the user to a different page, is there a reason to submit a form with ajax if you are going to redirect the page anyway?

Upvotes: 1

Brad M
Brad M

Reputation: 7898

$(document).on('submit', 'form', function (x) {
    x.preventDefault();  //x must be inside the anonymous function
    $.ajax({

Upvotes: 1

Related Questions