如何在引导模式框中重置表单主体？

Posted 2023-02-22

【中文标题】如何在引导模式框中重置表单主体？

【英文标题】：How to reset form body in bootstrap modal box?

【发布时间】：2013-03-27 11:24:04

【问题描述】：

我正在寻找一种方法来清除在 HTML 表单 中找到的所有元素，该表单包含 Bootstrap 模态 没有 em> 刷新页面。

目前：

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

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

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

【参考方案1】：

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

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

【讨论】：

但是关闭modal后，如何让dismissal消息淡出？

... 如果事件根本没有触发，请确保在实例化模态 ***.com/a/25466850/2436549

之前放置此代码

不适合我 D：我讨厌简单的解决方案不起作用 xd，但是当必须手动完成时，跳入检查器并找出错误字段上应用了哪些类并用一个简单的函数删除它们可能会解决问题。

【参考方案2】：

您可以创建一个 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();
);

【参考方案3】：

我对@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)
);

【讨论】：

我没有得到隐藏甚至被解雇。

shams，我的方法是基于 this answer 的 Bootstrap 2。看起来它在 Bootstrap 3 中发生了变化。也许巴特的答案对你有用？否则，对于一般 Bootstrap 模态问题，您可能需要创建自己的问题。

【参考方案4】：

如果您使用 ajax 以这种方式加载 modal 的正文并希望能够重新加载它的内容

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

【参考方案5】：

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

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

【讨论】：

对我来说就像一个魅力。

对于 bootstrap 5，将 hidden 替换为 hidden.bs.modal

【参考方案6】：

Mark Berry 的回答在这里效果很好。我只是添加拆分之前的代码：

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

【参考方案7】：

这是需要将正文重置为原始内容的差异。它不处理表格，但我觉得它可能有用。如果原始内容是大量的 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>

【参考方案8】：

在打开之前找到您的表单并清除它！

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

【参考方案9】：

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

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

【讨论】：

考虑在您的代码中添加一些解释，以便对新读者有用。

如果你可以使用 $(this).find('form')[0].reset();