Как очистить все поля ввода в bootstrap modal при нажатии кнопки "Отмена данных"?

Ответ 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/

Ответ 2

Существует более простой и красивый способ:

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

reset является встроенным funtion, вы также можете использовать $(this).find('form')[0].reset();

И модальный класс Bootstrap предоставляет несколько событий для подключения к модальной функциональности, подробно здесь.

hide.bs.modal Это событие запускается немедленно, когда экземпляр hide метод был вызван.

hidden.bs.modal Это событие вызывается, когда модальное завершено скрытый от пользователя (будет ждать завершения CSS-переходов).

Ответ 3

Это полезно, его работа для меня..

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

Ответ 4

Я сделал это следующим образом.

• Дайте вашему элементу form (который находится внутри модального) ID.
• Назначьте свой data-dimiss a 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>

Надеюсь, это поможет другим, так как я долгое время боролся с ним.

Ответ 5

Если вы используете форму в модале, то вы можете использовать

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

Ответ 6

это работа для меня

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

Ответ 7

заключить ваше модальное тело внутри формы с id = "myform"

а затем

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

должен сделать трюк

Ответ 8

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

Ответ 9

Поместите содержимое в свой модальный внутри формы и присвойте ему идентификатор, равный "myForm".

Когда нажата кнопка закрытия, дайте onclick функции "myFunction()".

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

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

Ответ 10

Следующие работали для меня:

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

Однако он отправляет форму, поэтому может не быть того, что вы ищете.

Ответ 11

В дополнение к @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();
});

Это очистит все поля, кроме скрытых.