javascript - 用jquery重置html表单后如何执行代码？

Question

单击 html 重置按钮后，

<input type="reset" />

我想执行一些代码。我怎样才能做到这一点并确保在这样做之前重置表单？

Answer 1

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

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

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

Answer 2

最好像 Ben 一样使用 setTimeout：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'>use ，而<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);
}