web-dev-qa-db-fra.com

Comment effacer tous les champs de saisie en mode bootstrap en cliquant sur le bouton de suppression des données?

Comment effacer tous les champs de saisie d'un modal Bootstrap V3 en cliquant sur le bouton de suppression des données?

javascripthtmltwitter-bootstrap
23
EgyEast

http://getbootstrap.com/javascript/#modals affiche un événement pour le moment où un modal est masqué. Il suffit de puiser dans cela:

$('#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/

Je suggère ce qui précède, car il lie la compensation au modal lui-même au lieu du bouton de fermeture, mais je réalise que cela ne répond pas à votre question spécifique. Vous pouvez utiliser la même logique d'effacement liée aux boutons de rejet:

$('[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/

50
Malk

Il y a un moyen plus facile et plus beau:

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

reset est une fonction prédéfinie, vous pouvez également utiliser $(this).find('form')[0].reset();

Et la classe modale de Bootstrap expose quelques événements à intégrer dans les fonctionnalités modales, detail at here .

hide.bs.modal Cet événement est déclenché immédiatement lorsque l'instance de masquage méthode a été appelée.

hidden.bs.modal Cet événement est déclenché lorsque le modal a fini d'être caché de l'utilisateur (attendra que les transitions CSS soient terminées).

47
Mithril

Ceci est utile, son travail pour moi ..

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

Je l'ai fait de la manière suivante.

  1. Donnez à votre élément form (qui est placé à l'intérieur du modal) une ID.
  2. Attribuez à votre data-dimiss une ID.
  3. Appelez la méthode onclick lorsque vous cliquez sur data-dimiss.

  4. Utilisez la fonction trigger() sur l'élément form . J'ajoute l'exemple de code avec. 

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

J'espère que cela aidera les autres, car cela faisait longtemps que je me débattais.

1
neophyte

Si vous utilisez un formulaire dans le modal, vous pouvez utiliser

$("#form_id").trigger("reset");
0
Hp Sharma

Ce qui suit a fonctionné pour moi:

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

Cependant, il soumet le formulaire, il se peut donc que ce ne soit pas ce que vous recherchez.

0
Alex Pandrea

insérez votre corps modal dans un formulaire avec un id = "myform"

et alors

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

devrait faire l'affaire

0
ShAkKiR

Placez le contenu de votre modal dans un formulaire et donnez-lui un identifiant égal à "myForm".

Lorsque vous cliquez sur le bouton de fermeture, cliquez sur la fonction "myFunction ()".

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

function myFunction() {
            document.getElementById("myForm").reset();
        }
0
Sidharth
$('[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=" ";

})

Ce code peut être utilisé à la fermeture (suppression de données) de modal (pour effacer tous les champs).

  1. Ici, j'ai effacé mes champs de saisie et mon div en tant que id="errorDiv1" qui contient toutes les erreurs de validation.

  2. Avec ce code, je peux aussi effacer les autres erreurs de validation ayant class inerror, spécifié dans la balise span avec class inerror.__ et qui n’était pas possible avec document.getElementsByClassName.

0
harshada