jQueryForm（插件）在提交表单时对表单执行某些操作 - > $（this）

Question

jQueryForm（插件）在提交表单时对表单执行某些操作 - > $（this）

3

我在同一页上有多个表单，使用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来处理这些事情，但是我需要能够上传图片与这些表单一起使用...谢谢。

- MiChAeLoKGB

尝试记录输出而不是 $(this) - DigitalDouble

@digitaldouble 输出=output是被调用文件返回的数据，对我来说毫无用处，尤其是在出现错误的情况下。 - MiChAeLoKGB

3个回答

1

根据文档，这是创建成功回调的方法：

var options = {
    success: showResponse
    ...
}

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

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

- DigitalDouble

我接受了Arun的答案，因为他先发布了，但真的非常感谢你们两个。太遗憾了，我不能接受两个答案 :( - MiChAeLoKGB

0

阅读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>

- Buddhika

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Arun P Johny · Accepted Answer

如果您查看插件文档（请参考此链接中的success选项），成功方法会将表单对象作为第四个参数。回调函数用于在表单提交后被调用，如果提供了“success”回调函数，则在从服务器返回响应后调用它。它接收以下参数： 1.响应内容（根据dataType选项的值而定，可能是responseText或responseXML）。 2.状态描述 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);

演示： Fiddle