Jquery Form ajaxSubmit not submitting

Question

I am using the JQuery Form extension to submit a form with AJAX. I have the following code:

var options = { 
    beforeSubmit:  showRequest,  // pre-submit callback 
    success:       showResponse,  // post-submit callback 

    // other available options: 
    //url:       url         // override for form's 'action' attribute 
    //type:      'post',       // 'get' or 'post', override for form's 'method' attribute 
    //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
    clearForm: true,        // clear all form fields after successful submit 
    //resetForm: true        // reset the form after successful submit 

    // $.ajax options can be used here too, for example: 
    timeout:   3000 
}; 


$('#composeForm').submit(function() { 
    // inside event callbacks 'this' is the DOM element so we first 
    // wrap it in a jQuery object and then invoke ajaxSubmit
 $(this).find(':disabled').removeAttr('disabled');

    $(this).ajaxSubmit(options); 

    // !!! Important !!! 
    // always return false to prevent standard browser submit and page navigation 
    return false; 
});

The problem is that the form doesn't appear to be submitting, or atleast the success function is not being called. If I remove the return false, then the submission works, but the page navigates away. Is there a problem in my code that could be causing this?

Cheers, Gazler.

EDIT| Seems to be working on my localhost. Could it be something to do with the domain being an add-on domain?

When you look at the XMLHttpRequest information with Firebug, what do you see? — Pointy
– Pointy, Commented Mar 24, 2010 at 15:13
Thanks, I was unaware of this feature in firebug. I got a 403 Forbidden response, which is strange given that if I remove the return false then it works fine. — Gazler
– Gazler, Commented Mar 24, 2010 at 15:20
Kinda off a bit off topic. I think using e.preventDefault() would be a better choice than returning false. — xandy
– xandy, Commented Mar 24, 2010 at 15:25
I am using return false as the documentation recommends it. By the way my permissions on the files are 755. — Gazler
– Gazler, Commented Mar 24, 2010 at 15:28
For completeness sake, my server responses were "301 moved permanently" - the URL was incorrect (I am using CodeIgniter in addition, which has to use index.php in the URL, even with mod_rewrite in .htaccess). Once I specified the full URL in my options, the 301 error disappeared and all my POST variables were submitted correctly. — Mirkules
– Mirkules, Commented Nov 30, 2012 at 7:26

ant · Accepted Answer · 2010-03-24 16:15:36Z

3

Here try this :

$(document).ready(function(){
      $("#composeForm").submit(function(){
                var str = $(this).serialize(); 
                var formAction = $(this).attr("action");
                $(this).find(':disabled').attr('disabled','');

$.ajax({
         type: "POST",
         url: formAction,
         data: str,
         beforeSubmit:  showRequest,
         success: showResponse
       });

  return false;

  });

 });

edited Mar 24, 2010 at 16:15

answered Mar 24, 2010 at 16:10

ant

23k36 gold badges139 silver badges185 bronze badges

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

1 Comment

Gazler Over a year ago

That would work, but not with images. As they can't be passed natively via XMLHTTPRequest I believe.

Hogan · Accepted Answer · 2010-03-24 15:19:01Z

2

My guess is that when you remove the false your regular submit is happening -- it does not work at all in both cases.

I think you need to have the correct values for more of the options. There is a lot of stuff commented out there. Also, it might be better if you just use a button to do the submit and not a form submit, then you don't have to worry about trying to turn off the auto-magic stuff the browser does.

answered Mar 24, 2010 at 15:19

Hogan

70.7k10 gold badges83 silver badges119 bronze badges

1 Comment

Hogan Over a year ago

Exactly -- if you want to make the jQuery ajax submit work use a button so you are not interacting with the other submit in this way it will be easier to solve the problem.

Gazler · Accepted Answer · 2010-03-24 16:15:56Z

1

Adding own solution,

The iframe option needed to be:

iframe: true

Which solved the problem.

Thanks to everyone for their input.

answered Mar 24, 2010 at 16:15

Gazler

84.4k18 gold badges285 silver badges245 bronze badges

Comments

kantsverma · Accepted Answer · 2015-09-18 06:13:45Z

0

There will be some fields inside form that is validated and it may be hide so please check the all fields and set its validation it will work for me its work when i saw there was a hidden fields that is hide due to jQuery hide show. Or you can remove all validation from form it will work.

answered Sep 18, 2015 at 6:13

kantsverma

6361 gold badge13 silver badges34 bronze badges

Collectives™ on Stack Overflow

Jquery Form ajaxSubmit not submitting

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related