web-dev-qa-db-fra.com

Comment réinitialiser le corps du formulaire dans la boîte modale bootstrap?

Je cherche un moyen de effacer tous les éléments trouvés dans un formulaire HTML contenu dans un Bootstrap modal _ ​​sans rafraîchissant la page.

Actuellement:

L'utilisateur entre les données et ferme le modal.

Lorsque l'utilisateur rouvre le modal, les données précédemment entrées restent toujours.

Comment puis-je effacer complètement tous les éléments du formulaire lors de l'événement close du dialogue modal afin que, lorsque l'utilisateur le rouvre, il reçoive toujours de nouvelles entrées propres, etc.?

formstwitter-bootstraprefresh
23
Abdul Moeed

Dans Bootstrap 3, vous pouvez réinitialiser votre formulaire une fois votre fenêtre modale fermée comme suit:

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

Vous pouvez créer une fonction JavaScript pour le faire: 

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

et ensuite vous pouvez appeler cette fonction chaque fois que votre modal est caché:

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

Je suis allé avec une version légèrement modifiée de la réponse de @ 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('');
};

Appelé de cette façon:

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

Si vous utilisez ajax pour charger le corps de modal de cette manière et que vous souhaitez pouvoir recharger son contenu

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

utilisation 

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

La réponse de Mark Berry a bien fonctionné ici. Je viens d'ajouter pour scinder le code précédent:

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

Il suffit de définir les valeurs vides dans les champs d'entrée lorsque modal se cache.

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

Ceci est une variation du besoin de réinitialiser le corps au contenu original. Cela ne traite pas d'un formulaire, mais j'estime qu'il pourrait être utile. Si le contenu d'origine était une tonne de code HTML, il est très difficile d'extraire le code HTML et de le stocker dans une variable. Javascript n'apprécie pas les sauts de ligne que VS 2015/ce que permet. Donc, je stocke la tonne originale de HTML en modal par défaut comme ceci au chargement de la page:

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

Ce qui me permet de réutiliser ce contenu lorsque vous appuyez sur le bouton par défaut d'origine pour modal (d'autres boutons affichent un autre contenu dans le même modal).

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

Si je mets une alerte pour la variable styleString, elle aurait une chaîne infinie de tout le code HTML sans pause, mais le fait pour moi et la garde hors de l'éditeur VS.

Voici à quoi cela ressemble dans Visual Studio avec Modal par défaut. Enregistré dans la variable de chaîne, qu’il soit automatique (.html) ou manuellement dans VS, ce serait une grande ligne:

<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

Il suffit de trouver votre formulaire et effacer avant qu'il ne s'ouvre!

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