Wie man Formkörper in Bootstrap-Modal-Box zurücksetzt?

Question

Ich finde einen Weg, immer leeres Formular beim Öffnen von Bootstrap Modalbox ohne Seite zu aktualisieren.

Problem ist, dass, wenn Benutzer sein Datenübermittlungsformular eingibt und modalbox wieder öffnet, dann zeigt es vorher gegebene Daten an:. Wie kann ich das Formular onclose modelbox vollständig aktualisieren?

Answer 1

Sie können eine JavaScript-Funktion machen das zu tun:

$.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, wenn Ihr Modal nennen versteckt:

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

Answer 2

ich mit einer leicht modifizierten Version ging von @ shibbir 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) 
}); 

Answer 3

In Bootstrap 3 Sie Ihr Formular nach dem modalen Fenster zurücksetzen geschlossen wurde, wie folgt:

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

Answer 4

Die unten Lösung mein Problem gelöst und hielt auch die Standardwerte

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

Answer 5

Wenn Sie Ajax verwenden, um den Körper von Modal so zu laden und in der Lage sein, seinen Inhalt neu zu laden

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

Verwendung

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

Answer 6

Mark Antwort Berry arbeitete hier in Ordnung. Ich füge nur den vorherigen Code zu spalten:

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

Answer 7

Dies ist eine Abweichung von Notwendigkeit Körper ursprünglichen Inhalt zurückzustellen. Es geht nicht um eine Form, aber ich denke, es könnte von Nutzen sein. Wenn der ursprüngliche Inhalt eine Tonne HTML war, ist es sehr schwierig, den HTML-Code herauszufiltern und ihn in einer Variablen zu speichern. Javascript ist nicht nett zu den Zeilenumbrüchen, die VS 2015/was auch immer erlaubt. So speichere ich original Tonne html in Standard-modal, wie dies auf Seite laden:

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

Welche ich erlaubt, diesen Inhalt zu wiederverwenden, wenn ursprüngliche Standardschaltfläche für modal gedrückt wird (es andere Tasten, die anderen Inhalte zeigen in dasselbe modale).

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

Wenn ich eine Benachrichtigung für die styleString Variable setzen würde es ohne Pausen eine endlose Reihe von all dem HTML-Code hat, aber tut es für mich und hält sie aus VS-Editor.

Hier ist, wie es in Visual Studio im Standard Modal aussieht. Gespeichert in der String-Variable, ob automatisch (.html) oder von Hand in VS, wäre es eine große Linie:

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

Answer 8

gesetzt einfach die leeren Werte in die Eingabefeldern, wenn modal versteckt.

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

Answer 9

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

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