jQueryForm (plugin) on submit do something with form -> $(this)

Question

I have multiple forms on one page and I am using jQueryForm plugin to handle them without page reload. The problem is, i need some visual response that form submit worked or not, so I am changing the border from gray to green if it worked and to red if it did not.

Well, that works with pure jQuery, but not with this plugin, as when I use $(this) it refers to function itself.

Does somebody have idea how to do that?

var edit_form = {
    dataType: 'json',
    success:    function(output) {
        console.log($(this));
        $form = $(this);
        $form.css("border-color", "green");
        setTimeout(function(){
            $form.css("border-color", "#323131");
        }, 3000);
    },
    error: function(output) {
        console.log($(this));
        $form = $(this);
        $form.css("border-color", "red");
        setTimeout(function(){
            $form.css("border-color", "#323131");
        }, 3000);
    }
};
$('.twitch-form').ajaxForm(edit_form);

Console log returns this:

[Object, constructor: function, init: function, selector: "", jquery: "1.7.2", size: function…]

Normally for such things I would use $.post but I need to be able to upload images with those forms...

Thanks.

Answer 1

If you look at the plugin documentation(look at the success option), the success method gets the form object as the 4th parameter

success
Callback function to be invoked after the form has been submitted. If a 'success' callback function is provided it is invoked after the response has been returned from the server. It is passed the following arguments: 1.) responseText or responseXML value (depending on the value of the dataType option). 2.) statusText 3.) xhr (or the jQuery-wrapped form element if using jQuery < 1.4) 4.) jQuery-wrapped form element (or undefined if using jQuery < 1.4)

So

var edit_form = {
    url: 'asdf/asdf',
    dataType: 'json',
    success: function (output, status, xhr, $form) {
        console.log('x',$form, status);
        $form.css("border-color", "green");
        setTimeout(function () {
            $form.css("border-color", "#323131");
        }, 3000);
    },
    error: function (xhr, status, error, $form) {
        console.log($form)
        $form.css("border-color", "red");
        setTimeout(function () {
            $form.css("border-color", "#323131");
        }, 3000);
    }
};
$('.twitch-form').ajaxForm(edit_form);

Demo: Fiddle

Answer 2

According to the documentation here's how you create a success callback:

var options = {
    success: showResponse
    ...
}

function showResponse(responseText, statusText, xhr, $form)  {
    ...
}

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