web-dev-qa-db-ja.com

bootstrapモーダルボックスでフォーム本体をリセットする方法は？

すべての要素をクリアするHTMLフォームに含まれるBootstrap modalwithoutページを更新します。

現在：

ユーザーがデータを入力し、モーダルを閉じます。

ユーザーがモーダルを再度開くと、以前に入力したデータがまだ残っています。

モーダルダイアログのcloseイベントの間にフォーム内のすべての要素を完全にクリアして、ユーザーが再度開いたときに常に新しいクリーンな入力などを取得するにはどうすればよいですか？

formstwitter-bootstraprefresh
23
Abdul Moeed

Bootstrap 3では、モーダルウィンドウを閉じた後、次のようにフォームをリセットできます。

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

これを行う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();
});
15
Shibbir Ahmed

@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)
});
7
Mark Berry

あなたがそのような方法でモーダルのボディをロードするために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>
3
TachikomaGT

マークベリーの答えはここでうまくいきました。前のコードを分割するために追加するだけです：

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

モーダルが非表示の場合は、入力フィールドに空の値を設定するだけです。

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

これは、本文を元のコンテンツにリセットする必要性の違いです。それはフォームを扱っていませんが、私はそれが何らかの役に立つかもしれないと感じます。元のコンテンツが大量の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で手動で文字列変数に保存すると、1行になります。

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

フォームを見つけて、開く前にクリアしてください！

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