webentwicklung-frage-antwort-db.com.de

So setzen Sie den Formularkörper in der modalen Bootstrap-Box zurück

Ich suche nach einer Möglichkeit, alle Elemente löschen in einem HTML-Formular enthaltenen in einem Bootstrap-Modal ohne die Seite zu aktualisieren.

Zur Zeit:

Der Benutzer gibt Daten ein und schließt das Modal.

Wenn der Benutzer das Modal erneut öffnet, bleibt das zuvor eingegebene Daten bleiben bestehen.

Wie kann ich alle Elemente innerhalb des Formulars während des Ereignis schließen des modalen Dialogfelds vollständig löschen, sodass der Benutzer beim erneuten Öffnen immer neue saubere Eingaben erhält?

23
Abdul Moeed

In Bootstrap 3 können Sie Ihr Formular nach dem Schließen Ihres modalen Fensters wie folgt zurücksetzen:

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

Sie können dazu eine JavaScript-Funktion erstellen: 

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

und dann können Sie diese Funktion jedes Mal aufrufen, wenn Ihr Modal ausgeblendet ist:

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

Ich ging mit einer etwas modifizierten Version von @ shibbirs Antwort:

// Clear form fields in a designated area of a page
$.clearFormFields = function(area) {
  $(area).find('input[type="text"],input[type="email"],textarea,select').val('');
};

So genannt:

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

Wenn Sie ajax verwenden, um den Körper von Modal auf diese Weise zu laden, und dessen Inhalt neu laden möchten

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

benutzen 

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

Mark Berrys Antwort hat hier gut funktioniert. Ich füge nur hinzu, um den vorherigen Code zu teilen:

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

zu:

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

Setzen Sie die leeren Werte einfach auf die Eingabefelder, wenn Modal ausgeblendet ist.

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

Dies ist eine Abweichung der Notwendigkeit, den ursprünglichen Inhalt wieder herzustellen. Es handelt sich nicht um ein Formular, aber ich denke, es könnte von Nutzen sein. Wenn der ursprüngliche Inhalt eine Tonne HTML war, ist es sehr schwierig, die HTML-Datei ausfindig zu machen und in einer Variablen zu speichern. Javascript akzeptiert nicht freundlich die Zeilenumbrüche, die VS 2015/was auch immer erlaubt. Ich speichere also beim Laden der Seite die originale Tonne html im Standard-Modal:

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

Dadurch kann ich diesen Inhalt wieder verwenden, wenn die ursprüngliche Standardschaltfläche für Modal gedrückt wird (es gibt andere Schaltflächen, die andere Inhalte in demselben Modal anzeigen).

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

Wenn ich einen Alarm für die styleString-Variable ausstelle, würde dies eine endlose Zeichenkette aller HTML-Dateien ohne Brüche enthalten, aber dies erledigt es für mich und hält sie vom VS-Editor fern.

So sieht es in Visual Studio innerhalb des Standardmodals aus. In der String-Variablen gespeichert, egal ob automatisch (.html) oder manuell in VS, handelt es sich um eine große Zeile:

<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

Finden Sie einfach Ihr Formular und löschen Sie es, bevor es geöffnet wird!

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