48

I want to intercept a submit via jQuery and first check if a file is present on the server. If it's present continue with the request, if not display a message and don't send the request. This is what I have:

$("#methodForm").submit(function(e){

    checkIndex('upload/segments.gen').done(function() {
        return true;
    }).fail(function () {
        e.preventDefault();
        alert("No index present!");
        return false;
    });
});

this is the checkIndex():

function checkIndex(file){
    return $.ajax({
        url : file,
        type:'HEAD'
    });
}

What happens is this: The file is present on the server, but the checkIndex returns with fail. First I see the alert popup and then it continues and sends the post request to the server.

I use the checkIndex() for other purposes as well where it works like expected so I'm pretty sure the error is somewhere in the submit routine. But I can't find out what's wrong with it.

1
  • 1
    Unfortunately, that will only work with synchronous AJAX request. You should disable the button and enable it on done callback
    – Alexander
    Feb 14, 2013 at 18:48

2 Answers 2

79

You can't return out of a callback to an asynchronous method(such as ajax). Instead, prevent the submit all together, then submit it when you are ready.

$("#methodForm").submit(function(e){
    e.preventDefault();
    var form = this;
    checkIndex('upload/segments.gen').done(function() {
        form.submit(); // submit bypassing the jQuery bound event
    }).fail(function () {
        alert("No index present!");
    });
});
3
  • 3
    This is not working for me. I get "TypeError: form.submit is not a function" and if I use $(form).submit() it call the submit handler over and over again.
    – Rooster242
    Feb 11, 2014 at 1:22
  • 3
    you have an element with id="submit", change it to something else.
    – Kevin B
    Feb 11, 2014 at 1:23
  • I had a similar issue with one further twist: A dialog displaying the images to be overwritten is shown. A click on the "Confirm" button (<a> element) would submit the form. I had to make sure to add e.preventDefault() when handling that click event, otherwise my request would be blocked. Oct 9, 2020 at 7:59
3

It does'nt really work like that, checkIndex is asynchronous, so by the time it returns anything, the form is submitted, and the return statements are in a different scope as well, try something more like this:

$("#methodForm").submit(function(e){
    e.preventDefault(); //prevent submit
    var self = this;
    checkIndex('upload/segments.gen').done(function() {
        self.submit(); //submit if ajax OK
    }).fail(function () {
        alert("No index present!");
   });
});
1
  • @KevinB - Yes it would, changed it!
    – adeneo
    Feb 14, 2013 at 18:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.