Question

I’m using a jQuery/Ajax script that submits a form without reloading the page. I have multiple forms on the page and they all have the same class (and no id). This works fine to submit the form using:

    $('document').ready(function()
{
    $('.form').ajaxForm( {
        success: function() {
            //$('.form').addClass("clicked");
            //$(this).slideUp('fast');
        }
    });
});

but as soon as I want to do something when the submission is successful there doesn’t appear to be a way to refer to the form that is submitted. Using the this operator would make sense but it doesn’t work. I want to do something like this:

$(this).slideUp('fast');

for each element individually depending on which form was submitted. (Using .form as the selector doesn’t work as it hides all of the forms).

I’ve tried adding a class to the form (though can’t seem to refer to the right element either) to then use to call the slideUp function.

Thanks

Answer 1

The ajaxForm plugin you’re using provides a reference to the form in the success callback:

success: function (responseText, statusText, xhr, $form) {
    $form.slideUp("fast");
}

Documentation: http://jquery.malsup.com/form/#ajaxForm

If you weren’t using this plugin, you’d have to maintain that reference yourself. One popular approach is to preserve the reference to the appropriate this by assigning it to something like self:

$(".form").on("submit", function () {
    var self = this;
    $.ajax({
        success: function () {
            $(self).slideUp();
        }
    });
});