单击数据关闭按钮时如何清除引导模式中的所有输入字段？答案

【问题标题】：How to clear all input fields in bootstrap modal when clicking data-dismiss button?单击数据关闭按钮时如何清除引导模式中的所有输入字段？
【发布时间】：2014-01-16 00:16:39
【问题描述】：

当点击数据关闭按钮时，如何清除 Bootstrap V3 模态中的所有输入字段？

【问题讨论】：

你说的是什么领域？文字、广播等？另外，它们有共同的类名吗？
文本，我想按 ID 清除它们。

标签： javascript html twitter-bootstrap

【解决方案1】：

还有一个更简单漂亮的方法：

$('#MyModal').on('hidden.bs.modal', function () {
    $(this).find('form').trigger('reset');
})

reset是dom内置函数，也可以使用$(this).find('form')[0].reset();

Bootstrap 的模态类公开了一些用于连接模态功能的事件，详情 at here。

hide.bs.modal隐藏实例时立即触发此事件方法已被调用。

hidden.bs.modal 当模态框结束时触发此事件对用户隐藏（将等待 CSS 转换完成）。

【讨论】：

缺少});（分号）。请解决这个问题。
最好在所有模型中都有这个处理程序 - $(".modal").on("hidden.bs.modal", function() { $(this).find(' form').trigger("reset"); });

【解决方案2】：

http://getbootstrap.com/javascript/#modals 显示隐藏模式时的事件。只需点击它：

$('#modal1').on('hidden.bs.modal', function (e) {
  $(this)
    .find("input,textarea,select")
       .val('')
       .end()
    .find("input[type=checkbox], input[type=radio]")
       .prop("checked", "")
       .end();
})

http://jsfiddle.net/5LCSU/

我会建议上述内容，因为它将清除绑定到模式本身而不是关闭按钮，但我意识到这并不能解决您的具体问题。您可以使用绑定到关闭按钮的相同清除逻辑：

$('[data-dismiss=modal]').on('click', function (e) {
    var $t = $(this),
        target = $t[0].href || $t.data("target") || $t.parents('.modal') || [];

  $(target)
    .find("input,textarea,select")
       .val('')
       .end()
    .find("input[type=checkbox], input[type=radio]")
       .prop("checked", "")
       .end();
})

http://jsfiddle.net/jFyH2/

【讨论】：

感谢您的回答，但这仅适用于我使用 $('#myModal').modal('hide') 隐藏模态但使用 data-dismiss="modal" 时此事件不是解雇
我的输入清除代码不太正确，如果逐字使用会引发错误。我把它清理干净了。我还添加了一个小提琴链接，当单击关闭按钮时，表单字段似乎清除得很好。也许您可以调整小提琴以复制您的用例，我们可以更好地了解。
它还清除了我的输入类型提交的按钮标签。最好这样做：.find("input[type=email],input[type=text],textarea,select")
$("#formID").validate().resetForm();还将重置表单 jquery javascript 验证。
有没有不影响输入按钮的方法？

【解决方案3】：

如果您在模态中使用表单，那么您可以使用

$("#form_id").trigger("reset");

【讨论】：

【解决方案4】：

$('[data-dismiss=modal]').on('click', function (e) 

{

var $t = $(this),

        target = $t[0].href || $t.data("target") || $t.parents('#myModal') || [];

   $(target)

    .find("input")
       .val('')
       .end()
    .find("input[type=checkbox]")
       .prop("checked", " ")
       .end();



$("span.inerror").html(' ');

$("span.inerror").removeClass("inerror");

document.getElementById("errorDiv1").innerHTML=" ";

})

此代码可用于模式的关闭（数据关闭）。（清除所有字段）

在这里，我已将输入字段和 div 清除为 id="errorDiv1"，其中包含所有验证错误。

document.getElementsByClassName

【讨论】：

【解决方案5】：

以下内容对我有用：

$(':input').val('');

但是，它正在提交表单，所以它可能不是您要查找的内容。

【讨论】：

【解决方案6】：

将模态框内的内容放在一个表单中，并给它一个等于“myForm”的 ID。

当点击关闭按钮时，给函数“myFunction()”一个onclick。

<button class="btn btn-default" data-dismiss="modal" onclick="myFunction()">Cancel</button>

function myFunction() {
            document.getElementById("myForm").reset();
        }

【讨论】：

【解决方案7】：

我是通过以下方式做到的。

给您的form 元素（位于模态框内）一个ID。
分配您的data-dimiss 和ID。
点击data-dimiss时调用onclick方法。

在form 元素上使用trigger() 函数。我正在添加代码示例。

 $(document).ready(function()
     {
    $('#mod_cls').on('click', function () {
  $('#Q_A').trigger("reset");
    console.log($('#Q_A'));
 })
  });

    <div class="modal fade " id="myModal2" role="dialog" >
    <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" ID="mod_cls" data-dismiss="modal">&times;</button>
      <h4 class="modal-title" >Ask a Question</h4>
    </div>
    <div class="modal-body">
      <form role="form" action="" id="Q_A" method="POST">
        <div class="form-group">
          <label for="Question"></label>
          <input type="text" class="form-control" id="question" name="question">
        </div>

      <div class="form-group">
          <label for="sub_name">Subject*</label>
          <input type="text" class="form-control" id="sub_name" NAME="sub_name">
        </div>
        <div class="form-group">
          <label for="chapter_name">Chapter*</label>
          <input type="text" class="form-control" id="chapter_name" NAME="chapter_name">
        </div>
        <button type="submit" class="btn btn-default btn-success btn-block"> Post</button>
                               </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button><!--initially the visibility of "upload another note" is hidden ,but it becomes visible as soon as one note is uploaded-->
      </div>
      </div>
      </div>
      </div>

希望这对其他人有帮助，因为我长期以来一直在努力。

【讨论】：

【解决方案8】：

除了@Malk，我想清除弹出窗口中的所有字段，隐藏字段除外。要做到这一点，只需使用这个：

$('.modal').on('hidden.bs.modal', function () {
    $(this)
        .find("input:not([type=hidden]),textarea,select")
        .val('')
        .end()
        .find("input[type=checkbox], input[type=radio]")
        .prop("checked", "")
        .end();
});

这将清除所有字段，隐藏字段除外。

【讨论】：

【解决方案9】：

这很有帮助，它对我有用..

$('.bd-example-modal-sm').on('hidden.bs.modal', function () { 
      $(this).find("select").val('').end(); // Clear dropdown content
      $("ul").empty();   // Clear li content 
});

【讨论】：

【解决方案10】：

用 id="myform" 将您的模态正文包含在一个表单中

然后

 $("#activatesimModal").on("hidden.bs.modal",function(){
        myform.reset();
});

应该做的伎俩

【讨论】：