twitter-bootstrap 如何在引导模式框中重置表单体？

How to reset form body in bootstrap modal box?

提问by Abdul Moeed

I am looking for a way to clear all elementsfound within an HTML formcontained inside a Bootstrap modalwithoutrefreshing the page.

我正在寻找一种方法来清除在 Bootstrap 模式中包含的HTML 表单中找到的所有元素，而无需刷新页面。

Currently:

目前：

The user enters data and closes the modal.

用户输入数据并关闭模态。

When the user re-opens the modal, the previously entered data still remains.

当用户重新打开模态时，之前输入的数据仍然保留。

How can I completely clear all elements within the form during the close eventof the modal dialog so that when the user re-opens it, they always get fresh clean inputs & etc?

如何在模态对话框的关闭事件期间完全清除表单中的所有元素，以便当用户重新打开它时，他们总是获得新的干净输入等？

回答by bart

In Bootstrap 3 you can reset your form after your modal window has been closed as follows:

在 Bootstrap 3 中，您可以在模态窗口关闭后重置表单，如下所示：

$('.modal').on('hidden.bs.modal', function(){
    $(this).find('form')[0].reset();
});

回答by Shibbir Ahmed

You can make a JavaScript function to do that:

你可以创建一个 JavaScript 函数来做到这一点：

$.clearInput = function () {
        $('form').find('input[type=text], input[type=password], input[type=number], input[type=email], textarea').val('');
};

and then you can call that function each time your modal is hidden:

然后您可以在每次隐藏模态时调用该函数：

$('#Your_Modal').on('hidden', function () {
        $.clearInput();
});

回答by Mark Berry

I went with a slightly modified version of @shibbir's answer:

我使用了@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('');
};

Called this way:

这样调用：

$('#my-modal').on('hidden', function(){
  $.clearFormFields(this)
});

回答by TachikomaGT

If you using ajax to load modal's body such way and want to be able to reload it's content

如果您使用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>

use

利用

<script>
    $(function() {
        $('.modal').on('hidden.bs.modal', function(){
            $(this).removeData('bs.modal');
        });
    });
</script>

回答by Leye Odumuyiwa

Mark Berry's answer worked fine here. I just add to split the previous code:

马克贝瑞的回答在这里工作得很好。我只是添加拆分以前的代码：

$.clearFormFields = function(area) {
  $(area).find('input[type="text"],input[type="email"],textarea,select').val('');
};

to:

到：

$.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("");
            };

回答by Gayashan Perera

Just set the empty values to the input fields when modal is hiding.

模式隐藏时，只需将空值设置为输入字段。

$('#Modal_Id').on('hidden', function () {
   $('#Form_Id').find('input[type="text"]').val('');
});

回答by user3127109

Just find your form and clear before it opens!

只需在打开之前找到您的表格并清除！

    $modal = $('#modal');
    $modal.find('form')[0].reset();

回答by JustJohn

This is a variance of need to reset body to original content. It doesn't deal with a form but I feel it might be of some use. If the original content was a ton of html, it is very difficult to string out the html and store it to a variable. Javascript does not take kindly to the line breaks that VS 2015/whatever allows. So I store original ton of html in default modal like this on page load:

这是需要将正文重置为原始内容的差异。它不处理表格，但我觉得它可能会有用。如果原始内容是大量的 html，则很难将 html 字符串化并将其存储到变量中。Javascript 不会善待 VS 2015/任何允许的换行符。因此，我在页面加载时将大量原始 html 存储在默认模式中，如下所示：

var stylesString = $('#DefaultModal .modal-body').html();

Which allows me to to reuse this content when original default button for modal is pressed (there are other buttons that show other content in same modal).

这允许我在按下模态的原始默认按钮时重用此内容（还有其他按钮在同一模态中显示其他内容）。

$("#btnStyles").click(function () {
    //pass the data in the modal body adding html elements
    $('#DefaultModal .modal-body').html(stylesString);
 $('#DefaultModal').modal('show');
})

If I put an alert for the styleString variable it would have an endless string of all the html with no breaks but does it for me and keeps it out of VS editor.

如果我为 styleString 变量发出警报，它将有一个无休止的所有 html 字符串，没有中断，但会为我做，并将其保留在 VS 编辑器之外。

Here is how it looks in Visual Studio inside default modal. Saved in the string variable whether automatic (.html) or by hand in VS, it would be one big line:

以下是它在 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>

回答by Adrian Iorgu

The below solution solved my problem and also kept the default values

以下解决方案解决了我的问题并保留了默认值

$('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 = ''; }
  }); 
});