jQueryForm (插件)在提交时使用表单-> $(这个)做一些事情

Question

我在一个页面上有多个表单，我使用jQueryForm插件来处理它们，而不需要重新加载页面。问题是，我需要一些视觉反应，表单提交工作与否，所以我改变的边框从灰色到绿色，如果它有效，红色如果它没有。

嗯，这适用于纯jQuery，但不适用于这个插件，因为当我使用$(this)时，它指的是函数本身。

有人知道怎么做吗？

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);

控制台日志返回以下内容：

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

通常情况下，我会使用$.post，但我需要能够上传这些表格的图片.

谢谢。

Answer 1

如果查看插件文档(查看success选项)，成功方法将表单对象作为第四个参数

成功 要在表单提交后调用的回调函数。如果提供了“成功”回调函数，则在从服务器返回响应后调用它。传递以下参数:1.responseText或responseXML值(取决于dataType选项的值)。2.)( statusText 3.)xhr (如果使用jQuery <1.4，则使用jQuery包装的表单元素)4。jQuery包装的表单元素(如果使用jQuery<1.4，则未定义)

所以

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);

演示：小提琴

Answer 2

根据文档，下面是如何创建一个成功的回调：

var options = {
    success: showResponse
    ...
}

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

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

Answer 3

阅读API，在那里提供可用的选项..。尝尝这个

<script> 

    $(document).ready(function() { 
        // bind 'myForm' and provide a simple callback function 
        var options = { 
          target:     '#divToUpdate', 
          url:        'comment.php', 
          success:    function(){ alert("Success ")},

          error:function(){
            alert("Error occurd");
          }

        }; 
        $('#myForm').ajaxForm(options);  





      }); 
    </script> 

       <form id="myForm" action="" method="post"> 
      Name: <input type="text" name="name" /> 
      Comment: <textarea name="comment"></textarea> 
      <input type="submit" value="Submit Comment" /> 
    </form>