在表单重置后调用函数

Call a function after form reset

本文关键字：调用 函数 表单      更新时间：2023-09-26

是否有一种方法可以让我在点击表单中的重置按钮后调用函数，我的意思是之后，使表单首先重置，然后调用我的函数。正常事件冒泡将调用我的函数，然后重置表单。现在我想避免使用setTimeout来实现这个。

我需要的是调用一个函数当一个表单被重置，因为我使用统一和统一需要更新时，值的变化。

现在我是这样做的:

//Reset inputs in a form when reset button is hit  
$("button[type='reset']").live('click', function(){  
    elem = this;  
    //Sadly we need to use setTimeout to execute this after the reset has taken place  
    setTimeout(function(){  
        $.each($(elem).parents('form').find(":input"), function(){  
            $.uniform.update($(this));  
        });  
    }, 50);  
});

我尝试在$(':input').change()上做所有这些，但重置元素似乎不会触发更改事件。
提前感谢您的任何帮助。

HTML表单确实有一个onReset事件，你可以在里面添加你的调用:

function updateForm()
{
    $.each($('form').find(":input"), function(){  
        $.uniform.update($(this));  
    });  
}
<form onReset="updateForm();">

就像fracimazric Hamidi在评论中指出的那样，你也可以像这样使用bind:

$('form').bind('reset', function() {
    $.each($(this).find(":input"), function(){  
        $.uniform.update($(this));  
    }); 
});

经过一些测试后，似乎两种方式都在复位之前触发，而不是在复位之后。你现在做这件事的方法似乎是最好的。

在这里的这个问题中也发现了同样的结论

我还没有在所有的浏览器中测试过，但是你可以在一个点击事件中做你自己的排序:http://jsfiddle.net/vol7ron/9KCNL/1/

$(document).ready(function() {
    $("input:reset").click(function() {       // apply to reset button's click event
        this.form.reset();                    // reset the form
        window.alert($("input:text").val());  // call your function after the reset      
        return false;                         // prevent reset button from resetting again
    });
});

前段时间，我调试了一个谷歌IE相关的插件，我解决了一个冒泡技巧的主要错误。这就是为什么我认为立即在这个解决方案为您的问题(当然应该是跨浏览器):

<form>
    <div id="capture_bubble">
        <input type="text"><input type="reset">
    </div>
</form>

通过这种方式，您可以在触发reset事件后使用$('#capture_bubble')捕获冒泡。

您可以使用以下命令进行快速测试:

(function($) {
    $(function() {
        $('#capture_bubble').live('click', function(){
            console.debug('capture_bubble');
            alert('capture_bubble')
        })
        $("input[type='reset']").live('click', function(){
            this.form.reset(); // forcing reset event
            console.debug('reset');
            alert('reset')
        });                 
    });
})(jQuery);

请注意:this.form.reset();(由于jeff-wilbert观察而做的更改)

你不需要等待50毫秒。如果你使用超时为零的setTimeout，它实际上意味着"将此代码推入事件堆栈"。因为表单重置保证首先触发，所以setTimeout中的代码保证(在行为良好的javascript解释器中)能够访问您想要的表单值(重置后)。你应该能够使用下面的代码，没有负罪感。

var afterReset = function(){
    var pushMeOntoTheEventStack = window.setTimeout(function(){
        $("#form input").each(function(){
            console.log( this.name + ' = ' + this.value );
        });
    },0);
};
$("#form").on("reset",afterReset);

试试这个方案

目标:

  • add on "click"事件
  • 防止默认动作(重置)
  • 触发"reset"
  • 运行所需代码

的例子:

$("button[type='reset']").on('click', function(evt) {
   evt.preventDefault();
   $(evt.target).trigger('reset');
   // enter code to run after reset
   $.each($(this).find(":input"), function(){  
      $.uniform.update($(this));  
   }); 
});

相关文章：