如何在bootstrap模式框中重置表单主体？

Question

我正在寻找一种方法来清除Bootstrap模式中包含的HTML表单中找到的所有元素,而无需刷新页面.

目前:

用户输入数据并关闭模态.

当用户重新打开模态时,先前输入的数据仍然存在.

如何在模式对话框的关闭事件期间完全清除表单中的所有元素,以便当用户重新打开它时,它们总是获得新鲜的干净输入等？

Answer 1

在Bootstrap 3中,您可以在模式窗口关闭后重置表单,如下所示:

$('.modal').on('hidden.bs.modal', function(){
    $(this).find('form')[0].reset();
});

Answer 2

您可以使用JavaScript函数来执行此操作:

$.clearInput = function () {
        $('form').find('input[type=text], input[type=password], input[type=number], input[type=email], textarea').val('');
};

然后你可以在每次隐藏你的模态时调用该函数:

$('#Your_Modal').on('hidden', function () {
        $.clearInput();
});

Answer 3

我带了一个稍微修改过的@ shibbir的答案:

// Clear form fields in a designated area of a page
$.clearFormFields = function(area) {
  $(area).find('input[type="text"],input[type="email"],textarea,select').val('');
};

这样叫:

$('#my-modal').on('hidden', function(){
  $.clearFormFields(this)
});