Question

点击html重置按钮后，

<input type="reset" />

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

Answer 1

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

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

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

Answer 2

使用setTimeout作为Ben在这里做的最好：https://stackoverflow.com/a/21641295/144665

$("input[type='text']").val('Hello Everybody!');

$("input[type='reset']").closest('form').on('reset', function(event) {

  // executes before the form has been reset
  console.log('before reset: ' + $("input[type='text']").val());

  setTimeout(function() {
    // executes after the form has been reset
    console.log('after reset: ' + $("input[type='text']").val());
  }, 1);

});

您可能希望将该表单选择器缩小到所涉及的特定表单，可能带有id。

小提示证明：http://jsfiddle.net/iambriansreed/Zh5cd/

Answer 3

更新：使用preventDefault代替return false。

$('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
});

http://jsfiddle.net/EYqrX/1/

Answer 4

建议不要使用<input type='Reset'>以这种方式使用<input type = "button">，而是不必停止reset按钮的默认行为。您只需将onclick属性添加到按钮，在函数中您可以根据需要调用表单的重置方法，并根据需要控制行为。以下代码说明了

<强> HTML：

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

<强> JavaScript的：

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
}

Answer 5

试

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

Answer 6

这是一个使用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>

Answer 7

单击重置按钮时重置显示内容。

$('.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'));
    });
});

Answer 8

我最终承诺要允许我将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.
    });
});

Answer 9

这会有帮助吗

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

链接到jsfiddle：http://jsfiddle.net/sdkTz/1/

Answer 10

将click事件添加到重置按钮，并使其如下所示：

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

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

10 个答案: