Wie löscht man alle Eingabefelder im Bootstrap-Modus, wenn man auf die Schaltfläche zum Schließen der Daten klickt?

Question

Wie werden alle Eingabefelder in einem modul Bootstrap V3 gelöscht, wenn auf die Schaltfläche zum Schließen von Daten geklickt wird?

Answer 1

http://getbootstrap.com/javascript/#modals zeigt ein Ereignis, wenn ein Modal ausgeblendet ist. Tippen Sie einfach in das:

$('#modal1').on('hidden.bs.modal', function (e) { 
    $(this) 
    .find("input,textarea,select") 
     .val('') 
     .end() 
    .find("input[type=checkbox], input[type=radio]") 
     .prop("checked", "") 
     .end(); 
}) 

http://jsfiddle.net/5LCSU/

---

Ich würde das oben als es die Lichtung an den modalen selbst anstelle der Schließen-Schaltfläche binden, aber ich weiß, das ist nicht Ihre spezielle Frage nicht ansprechen .

$('[data-dismiss=modal]').on('click', function (e) { 
    var $t = $(this), 
     target = $t[0].href || $t.data("target") || $t.parents('.modal') || []; 

    $(target) 
    .find("input,textarea,select") 
     .val('') 
     .end() 
    .find("input[type=checkbox], input[type=radio]") 
     .prop("checked", "") 
     .end(); 
}) 

http://jsfiddle.net/jFyH2/

Answer 2

Es ist eine einfache und schöne Weise: Sie konnten die gleiche Clearing-Logik auf die entlassenen Tasten gebunden verwenden

$('#MyModal').on('hidden.bs.modal', function() { 
    $(this).find('form').trigger('reset'); 
}) 

reset ist dom build-in funtion, Sie kann auch $(this).find('form')[0].reset();

Und Bootstrap Modalklasse macht ein paar Ereignisse für das Einhaken in modale Funktionalität, de Schwanz at here.

hide.bs.modal Dieses Ereignis wird sofort, wenn die Methode aufgerufen wurde Instanz hide gebrannt.

hidden.bs.modal Dieses Ereignis wird ausgelöst, wenn das Modal vor dem Benutzer verborgen ist (wartet auf CSS-Übergänge, um abzuschließen).

Answer 3

Ihre modal Körper in einer Form einschließen mit einem id = "myform"

und dann

$("#activatesimModal").on("hidden.bs.modal",function(){ 
     myform.reset(); 
}); 

sollte den Trick

Answer 4

$('[data-dismiss=modal]').on('click', function (e) 

{ 

var $t = $(this), 

     target = $t[0].href || $t.data("target") || $t.parents('#myModal') || []; 

    $(target) 

    .find("input") 
     .val('') 
     .end() 
    .find("input[type=checkbox]") 
     .prop("checked", " ") 
     .end(); 



$("span.inerror").html(' '); 

$("span.inerror").removeClass("inerror"); 

document.getElementById("errorDiv1").innerHTML=" "; 

})  

Dieser Code auf tun verwendet werden kann schließen (Daten ablehnen) von modal. (um alle Felder zu löschen)

1. Hier habe ich meine Eingabefelder und meine div wie id="errorDiv1", die alle Validierungsfehler enthält gelöscht.

2. Mit diesem Code kann ich auch klar, andere Fehler Prüfklasse als inerror, die in Span-Tag mit Klasse inerror angegeben ist, und das war nicht möglich, mit document.getElementsByClassName

Answer 5

Diese hilfreich ist, seine Arbeit für ich ..

$('.bd-example-modal-sm').on('hidden.bs.modal', function() { 
     $(this).find("select").val('').end(); // Clear dropdown content 
     $("ul").empty(); // Clear li content 
}); 

Answer 6

Ich tat es auf folgende Weise.

1. Geben Sie Ihr form Element ein ID (die innerhalb der modalen platziert wird).
2. Weisen Sie Ihre data-dimiss eine ID zu.
3. Rufen Sie die onclick Methode auf, wenn auf data-dimiss geklickt wird.

4. Verwenden Sie die trigger()-Funktion für das Element form. Ich füge das Codebeispiel dazu.

   $(document).ready(function() 
       { 
       $('#mod_cls').on('click', function() { 
       $('#Q_A').trigger("reset"); 
       console.log($('#Q_A')); 
   }) 
       }); 
   

<div class="modal fade " id="myModal2" role="dialog" > 
    <div class="modal-dialog"> 
    <!-- Modal content--> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" ID="mod_cls" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title" >Ask a Question</h4> 
    </div> 
    <div class="modal-body"> 
     <form role="form" action="" id="Q_A" method="POST"> 
     <div class="form-group"> 
      <label for="Question"></label> 
      <input type="text" class="form-control" id="question" name="question"> 
     </div> 

     <div class="form-group"> 
      <label for="sub_name">Subject*</label> 
      <input type="text" class="form-control" id="sub_name" NAME="sub_name"> 
     </div> 
     <div class="form-group"> 
      <label for="chapter_name">Chapter*</label> 
      <input type="text" class="form-control" id="chapter_name" NAME="chapter_name"> 
     </div> 
     <button type="submit" class="btn btn-default btn-success btn-block"> Post</button> 
           </form> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button><!--initially the visibility of "upload another note" is hidden ,but it becomes visible as soon as one note is uploaded--> 
     </div> 
     </div> 
     </div> 
     </div> 

Hope this anderen helfen, als ich mit ihm seit langer Zeit zu kämpfen war.

Answer 7

Setzen Sie den Inhalt in Ihrem modal in ein Formular und geben Sie ihm eine ID, die gleich "myForm" ist.

Wenn die Schließen-Schaltfläche geklickt wird, klicken Sie auf die Funktion "myFunction()".

<button class="btn btn-default" data-dismiss="modal" onclick="myFunction()">Cancel</button> 

function myFunction() { 
      document.getElementById("myForm").reset(); 
     } 

Answer 8

Das funktionierte für mich folgendes:

$(':input').val(''); 

Es wird jedoch Absenden des Formulars, so könnte es nicht sein, was Sie suchen.