Я нахожу способ всегда получать пустую форму при открытии bootstrap modalbox без обновления страницы.
Проблема заключается в том, что когда пользователь вводит форму отправки данных и снова открывает modalbox, он показывает предыдущие данные:. как я могу compreletly обновить форму onclose modelbox????
В Bootstrap 3 вы можете reset свою форму после того, как ваше модальное окно было закрыто следующим образом:
$('.modal').on('hidden.bs.modal', function(){
$(this).find('form')[0].reset();
});
Вы можете сделать функцию 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();
});
Я пошел со слегка измененной версией ответа @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)
});
Если вы используете ajax для загрузки модального тела таким образом и хотите иметь возможность перезагрузить его содержимое
<a data-toggle="modal" data-target="#myModal" href="./add">Add</a>
<a data-toggle="modal" data-target="#myModal" href="./edit/id">Modify</a>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Content will be loaded here -->
</div>
</div>
</div>
использовать
<script>
$(function() {
$('.modal').on('hidden.bs.modal', function(){
$(this).removeData('bs.modal');
});
});
</script>
В ответ Марк Берри отлично справился. Я просто добавляю для разделения предыдущего кода:
$.clearFormFields = function(area) {
$(area).find('input[type="text"],input[type="email"],textarea,select').val('');
};
в
$.clearFormFields = function(area) {
$(area).find('input#name').val('');
$(area).find('input#phone').val("");
$(area).find('input#email').val("");
$(area).find('select#topic').val("");
$(area).find('textarea#description').val("");
};
Это дисперсия необходимости в reset корпусе к исходному контенту. Это не касается формы, но я чувствую, что это может быть полезно. Если исходный контент был тонны html, очень сложно вывести html и сохранить его в переменной. Javascript не проявляет любезности к разрыву строк, который VS 2015/что позволяет. Таким образом, я храню оригинальную тонну html по умолчанию, модальную, как это на странице загрузки:
var stylesString = $('#DefaultModal .modal-body').html();
Это позволяет мне повторно использовать этот контент, когда нажата кнопка оригинального по умолчанию для модального (есть другие кнопки, которые показывают другое содержимое в том же модальном формате).
$("#btnStyles").click(function () {
//pass the data in the modal body adding html elements
$('#DefaultModal .modal-body').html(stylesString);
$('#DefaultModal').modal('show');
})
Если я поставлю предупреждение для переменной styleString, у него будет бесконечная строка всего html без перерывов, но он сделает это для меня и сохранит ее из редактора VS.
Вот как он выглядит в Visual Studio внутри модального модальности. Сохраненная в строковой переменной автоматическая (.html) или вручную в VS, это была бы одна большая строка:
<div class="modal-body" id="modalbody">
<div class="whatdays"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">All Styles</span></div>
<div class="whatdays" style="background-image: url('../../Responsive/ballroom.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Ballroom</span></div>
<div class="whatdays" style="background-image: url('../../Responsive/blues.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Blues</span></div>
<div class="whatdays" style="background-image: url('../../Responsive/contra.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Contra</span></div>
<div class="whatdays" style="background-image: url('../../Responsive/countrywestern.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Country</span></div>
<div class="whatdays" style="background-image: url('../../Responsive/english-country.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">English Country</span></div>
<div class="whatdays" style="background-image: url('../../Responsive/israeli.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Israeli</span></div>
<div class="whatdays" style="background-image: url('../../Responsive/lindyhop.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Lindy Hop/Swing</span></div>
<div class="whatdays" style="background-image: url('../../Responsive/miscvariety.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Misch/Variety</span></div>
<div class="whatdays" style="background-image: url('../../Responsive/neo-square.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Neo-Square</span></div>
<div class="whatdays" style="background-image: url('../../Responsive/polka.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Polka</span></div>
<div class="whatdays" style="background-image: url('../../Responsive/salsa.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Salsa</span></div>
<div class="whatdays" style="background-image: url('../../Responsive/scottish.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Scottish</span></div>
<div class="whatdays" style="background-image: url('../../Responsive/square.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Square</span></div>
<div class="whatdays" style="background-image: url('../../Responsive/tango.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Tango</span></div>
<div class="whatdays" style="background-image: url('../../Responsive/waltz.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Waltz</span></div>
<div class="whatdays" style="background-image: url('../../Responsive/wcswing.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">WCS</span></div>
<div class="whatdays" style="background-image: url('../../Responsive/zyedeco-gator.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Zydeco/Cajun</span></div>
Просто установите пустые значения в поля ввода, когда модальный сокрытие.
$('#Modal_Id').on('hidden', function () {
$('#Form_Id').find('input[type="text"]').val('');
});
Ниже решение решило мою проблему, а также сохранили значения по умолчанию
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).find('input[type="text"],input[type="email"],textarea,select').each(function() {
if (this.defaultValue != '' || this.value != this.defaultValue) {
this.value = this.defaultValue;
} else { this.value = ''; }
});
});