Question

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

嗯，这适用于纯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

如果查看plugin documentation（查看success选项），则success方法将表单对象作为第4个参数

成功
表单之后要调用的回调函数提交。如果提供了“成功”回调函数，则调用它从服务器返回响应后。它通过了以下论点： 1.）responseText或responseXML值（取决于dataType选项的值）。 2.）statusText 3.）xhr（或jQuery包装的表单元素，如果使用jQuery＆lt; 1.4） 4.）jQuery包装的表单元素（如果使用jQuery＆lt; 1.4，则为undefined）

所以

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

演示：Fiddle

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>

提交的jQuery表单（插件）用表单做一些事情 - ＆gt; $（本）

3 个答案: