單擊數據關閉按鈕時如何清除引導模式中的所有輸入字段？

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 的模態類公開了一些用於連接模態功能的事件，詳情請見此處。

hide.bs.modal當調用 hide 實例方法時，會立即觸發此事件。

hidden.bs.modal當模態完成對用戶隱藏時觸發此事件（將等待 CSS 轉換完成）​​。

Answer 3

如果您在模態中使用表單，則可以使用

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

Answer 4

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

1. 為您的form元素（位於模態內）提供一個ID 。
2. 為您的data-dimiss分配一個ID 。
3. 單擊data-dimiss時調用onclick方法。

4. 在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>

希望這會幫助其他人，因為我長期以來一直在努力。

Answer 5

將您的模態中的內容放在一個表單中，並為其指定一個等於“myForm”的 ID。

當關閉按鈕被點擊時，給函數“myFunction()”一個onclick。

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

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

Answer 6

這很有幫助，它對我有用..

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

Answer 7

以下對我有用：

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

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

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

這將清除所有字段，隱藏字段除外。

Answer 9

用 id="myform" 將您的模態體包含在一個表單中

進而

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

應該做的伎倆

Answer 10

$('[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=" ";

})      

此代碼可用於關閉（數據關閉）模式。（清除所有字段）

1. 在這里，我已將輸入字段和 div 清除為id="errorDiv1" ，其中包含所有驗證錯誤。

2. 使用此代碼，我還可以清除具有類為inerror其他驗證錯誤，這些錯誤在 span 標記中指定為類inerror並且使用document.getElementsByClassName是不可能的