Javascript 使用jquery重置html表单后如何执行代码？

单击html重置按钮后

<input type="reset" />

我想执行一些代码。如何执行此操作并确保在执行此操作之前已重置表单？

请重试

$('your-form').bind('reset', function() {
  alert('hi');
});

这有帮助吗

  $("input[type='reset']").on("click", function(){
    alert("the form has been reset");
  });

---

链接到JSFIDLE:

向重置按钮添加一个

单击事件，并使其看起来像这样：

function(e) {
    setTimeout(function() {
        // your actual code here
    },1);
}

像Ben这样使用setTimeout是最好的：

您可能希望将该表单选择器缩小到所涉及的特定表单，可能需要一个id

防小提琴：更新：使用
preventDefault
而不是
returnfalse

$('input[type="reset"]').click(function(evt) {
    // Prevent the reset button from firing the form's reset event again
    evt.preventDefault();
    $(this).closest('form').get(0).reset();
    // At this point your form's inputs should have their values reset
});

我并不特别喜欢将重置事件绑定到重置按钮而不是表单。表单可以通过其他方式重置，在这些情况下，您的事件不会触发

相反，将函数绑定到重置事件，但将其置于瞬时setTimeout内。它将确保在调用函数之前实际重置表单

$('form').on('reset', function(e)
{
    setTimeout(function() { /* ... */ });
});

建议不要使用
而是以这种方式使用
，您不必停止
重置
按钮的默认行为。您只需将
onclick
属性添加到按钮，在函数中，您可以随时调用表单的重置方法，并根据需要控制行为。下面的代码说明了这一点

HTML:

<input type="button" value="Limpiar" onclick="resetForm(this);"/>

function resetForm(element) {
    //Do what you need before reset the form
    element.form.reset(); //Reset manually the form
    //Do what you need after reset the form
}

这里是一个使用
onreset
事件的示例，类似于通常使用表单元素的
onsubmit
事件捕捉单击提交按钮的方式。添加
onsubmit
示例以进行说明

在脚本中：

function submitForm(form){
    var xhr = new XMLHttpRequest(),
        data = new FormData(form);

    xhr.open("POST", url, true);
    xhr.onload = function(event) {
        switch (event.target.status){
            case 200:
                onSuccess(event);
                break;
            default:
                onError(event);
        }
    };
    xhr.send(data);
    return false;
}

function resetForm(form){
    var elements = form.elements;
    // set some initial values to those form elements
    return false;
}

在html中：

<form onsubmit="return submitForm(this);" onreset="return resetForm(this);">
    <button type="submit">Save</button>
    <button type="reset">Reset</button>
</form>


拯救
重置
单击重置按钮时重置显示内容

$('.custom-file-input').on('change', function(){
    const $label = $(this).next('.custom-file-label');
    const fileName = $(this).val().split('\\').pop(); 
    $label.data('default', $label.html());
    $label.addClass('selected').html(fileName);
});

$('form').on('reset', function(){
    $('.custom-file-input').each(function(){
        const $label = $(this).next('.custom-file-label');
        $label.html($label.data('default'));
    });
});

我最终承诺允许我将dom更改链接在一起。这样，我可以确保在重置其他需要根据表单中的输入进行更改的dom内容（包括重置表单）之前，先重置表单。我不一定期望表单重置失败，因此我不使用拒绝函数：

const form = document.getElementById("saveForm");
const resetBtn = form.querySelector("button[type=reset]");
resetBtn.addEventListener("click", function overrideReset(e) {
    e.preventDefault();
    return new Promise((resolve, reject) => resolve(form.reset())).then(() => {
        //run code here.
    });
});

应该提供背景和一些文档，说明这是如何工作的以及为什么工作的，以及为什么jQuery文档中没有更多关于它的内容。这在表单重置之前执行。然后尝试绑定到事件中的更改事件，由于下一个更改将是重置操作，这很好，但是OP没有要求将事件附加到重置按钮单击吗？是的，他要求了，但是绑定到重置事件更好，比如绑定到提交比提交按钮更好。您转到未绑定到演示文稿成员的事件路由。感谢您的否决票。您可以绑定到表单的重置事件，但是这发生在输入值重置之前。没有一个事件会在输入重置后立即运行。如果必须等到输入重置，请在重置事件中执行一个setInterval，当它检测到输入值已重置时，该重置事件会自动清除，然后运行代码。@OP您发现有什么有用的吗？@Kevin_B，为什么
setInterval
而不是
setTimeout
？这会在表单重置之前执行。
返回false不仅仅是停止表单提交。看：现在它看起来像我的，除了OP的警报呼叫。：）是的，在我编辑我的答案之前，我没有注意到你用正确的默认行为发布了你自己的答案。我喜欢使用关键字
event
，因为Dreamweaver附带了它的代码完成功能。不确定是谁否决了你，为什么否决了你，但我投了你的赞成票并接受了你的答案。谢谢。绑定到事件比单击按钮更可靠！是，以下答案（由Benjammin）应标记为首选解决方案。表单重置可能是由
甚至JavaScript引起的。绑定到“提交”按钮上的单击事件过于间接。我想这就是反对票的目的。我必须同意@PezCuckow并推荐Benjamin Fleming的答案。将第二个参数设为setTimeout是否得到普遍支持？w3schools和mozilla都将其列为必需参数。似乎在我所有的浏览器中都能正常工作，但我不确定是否使用较旧的浏览器IE@Kip是的，它在旧版IE中运行良好。我还没有测试过IE6，但我并不太担心。在严格模式下也可以正常工作。但是，添加零可能会使代码更加清晰。如果不设置超时，它在任何现代浏览器中都无法正常工作。不确定执行顺序，但猜测重置事件是在窗体开始重置时发生的，而不是在重置完成时发生的。我缺少
setTimeout
部分。当我按下重置按钮几分钟后，试图找出问题的原因。如果不是这个答案，我可能会在这上面再浪费一个小时。谢谢。之所以必须在这里使用
setTimeout（）
，是因为函数是一个处理程序，而不是回调函数。我很好奇，如果没有
setTimeout（）
，怎么做。我能想到的唯一方法是使用
preventDefault（）
，然后自己重新设置表单。
const form = document.getElementById("saveForm");
const resetBtn = form.querySelector("button[type=reset]");
resetBtn.addEventListener("click", function overrideReset(e) {
    e.preventDefault();
    return new Promise((resolve, reject) => resolve(form.reset())).then(() => {
        //run code here.
    });
});