Question

如何在单击数据关闭按钮时清除Bootstrap V3模式中的所有输入字段？

Answer 1

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/

Answer 2

有一种更简单美观的方式：

$('#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转换完成）。

Answer 3

我是按照以下方式做到的。

将form元素（放置在模态中）设为ID。
分配data-dimiss ID。
点击onclick时调用data-dimiss方法。

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

 $(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>

希望这会对其他人有所帮助，因为很久以来我一直在努力。

Answer 4

如果您在模态中使用表格，则可以使用

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

Answer 5

将您的模态正文包含在具有id =“myform”

的表单中

然后

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

应该做的伎俩

Answer 6

$('[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"，其中包含所有验证错误。
使用此代码，我还可以清除类别为inerror的其他验证错误，该错误在span标记中使用类inerror指定并且使用document.getElementsByClassName

Answer 7

将模式中的内容放入表单中，并为其指定一个等于“myForm”的ID。

单击关闭按钮时，请单击“myFunction（）”函数。

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

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

Answer 8

以下对我有用：

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

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

Answer 9

除了@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 个答案: