web-dev-qa-db-fra.com

Fermer Bootstrap Modal Sur le formulaire Soumettre

J'ai un Bootal Modal qui contient la forme. Le modal contient également, soumettre et annuler le bouton. Maintenant, selon mes besoins, sur le bouton Soumettre, cliquez sur le bouton Modal, le formulaire est envoyé avec succès, mais Modal n'est pas fermé .. Voici mon HTML ..

<div class="modal fade" id="StudentModal" tabindex="-1" role="dialog" aria-labelledby="StudentModalLabel" aria-hidden="true" data-backdrop="static">
   <div class="modal-dialog">
      <div class="modal-content">
         <form action="~/GetStudent" class="form-horizontal" role="form" method="post" id="frmStudent">
            <div class="modal-footer">
               <div class="pull-right">
                  <button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i> Save</button>
                  <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Close</button>
               </div>
            </div>
         </form>
      </div>
   </div>

Comment le faire ..Veuillez m'aider ..Merci ..

javascriptjqueryhtmlformstwitter-bootstrap
24
Lara

Utilisez ce code

 $('#button').submit(function(e) {
    e.preventDefault();
    // Coding
    $('#IDModal').modal('toggle'); //or  $('#IDModal').modal('hide');
    return false;
});
17
Muhammad Fahad

Ajoutez le même attribut que vous avez sur le bouton Fermer:

data-dismiss="modal"

par exemple.

<button type="submit" class="btn btn-success" data-dismiss="modal"><i class="glyphicon glyphicon-ok"></i> Save</button>

Vous pouvez également utiliser jQuery si vous le souhaitez:

$('#frmStudent').submit(function() {

    // submission stuff

    $('#StudentModal').modal('hide');
    return false;
});
13
martincarlin87

donne l'identifiant pour soumettre le bouton

<button id="btnDelete" type="submit" class="btn btn-success"><i class="glyphicon glyphicon-trash"></i> Delete</button>

$('#btnDelete').click(function() {
   $('#StudentModal').modal('hide');
});

Aussi, vous avez oublié de fermer dernier div.

</div>

J'espère que cela t'aides.

5
Kandarp

je fais ce code cela fonctionne bien, mais une fois que le bouton de modèle de formulaire de forme ouvre pas encore le modèle dire e.preventdefault n'est pas une fonction ..

Utilisez le code ci-dessous pour tout événement qui se produit lors de l'envoi du formulaire.

                $('.modal').removeClass('in');
                $('.modal').attr("aria-hidden","true");
                $('.modal').css("display", "none");
                $('.modal-backdrop').remove();
                $('body').removeClass('modal-open');

vous pouvez rendre ce code plus court ..

si un corps trouve la solution pour e.preventdefault, faites-le nous savoir.

3
Abhi

Vous pouvez utiliser l'une de ces deux options:

1) Ajoutez les données-ignorer au bouton d'envoi, c'est-à-dire.

<button type="submit" class="btn btn-success" data-dismiss="modal"><i class="glyphicon glyphicon-ok"></i> Save</button>

2) Faites-le en JS comme

$('#frmStudent').submit(function() {
    $('#StudentModal').modal('hide');
});
2
Mō Iđɍɨɇƶ

Ni ajouter data-dismiss="modal" ni utiliser $("#modal").modal("hide") en javascript n'a fonctionné pour moi. Bien sûr, ils ont fermé le modal mais la demande ajax n'est pas envoyée non plus.

Au lieu de cela, j'ai rendu à nouveau le partiel contenant les modaux après la réussite de l'ajax (j'utilise Ruby on Rails). J'ai également dû supprimer la classe "modal-open" de la balise body. Cela réinitialise les modaux. Je pense que quelque chose de similaire, avec un rappel sur une requête ajax réussie pour supprimer et rajouter les modaux devrait également fonctionner dans un autre cadre.

1
EJ2015

Les réponses répertoriées ne fonctionneront pas si les résultats du formulaire AJAX soumis affectent le code HTML en dehors de la portée du modal avant la fermeture de celui-ci. Dans mon cas, le résultat était un écran grisé (fondu) dans lequel je pouvais voir la mise à jour de la page mais ne pouvais interagir avec aucun des éléments de la page.

Ma solution:

$(document).on("click", "#send-email-submit-button", function(e){
    $('#send-new-email-modal').modal('hide')
});

 $(document).on("submit", "#send-email-form", function(e){
    e.preventDefault();
    var querystring = $(this).serialize();
    $.ajax({
        type: "POST",
        url: "sendEmailMessage",
        data : querystring,
        success : function(response) {
            $('#send-new-email-modal').on('hidden.bs.modal', function () {
                $('#contacts-render-target').html(response);
            }
    });
    return false;
});

Remarque: mon formulaire modal se trouvait à l'intérieur d'un div parent qui avait déjà été rendu via AJAX, d'où la nécessité d'ancrer l'écouteur d'événements au document.

0
Devon Luongo

si votre modal a un bouton d'annulation (sinon créez un bouton de fermeture caché). Vous pouvez simuler l'événement click sur ce bouton pour que votre formulaire soit fermé . Dans votre composant, ajoutez un ViewChild 

export class HelloComponent implements OnInit {

@ViewChild('fileInput') fileInput:ElementRef;

dans votre bouton de fermeture, ajoutez #fileInput 

<button class="btn btn-danger" #fileInput id="delete-node" name="button" data-dismiss="modal" type="submit">Cancelar</button>

Lorsque vous souhaitez fermer le modal, déclenchez par programme un événement de clic sur le bouton de fermeture.

this.fileInput.nativeElement.click();
0
Fernando Siqueira

J'utilise aussi Rails et ajax et j'ai eu le même problème. Il suffit de lancer ce code

 $('#modalName').modal('hide');

cela a fonctionné pour moi mais j'essaie aussi de le réparer sans utiliser jQuery. 

0
Hindreen

Essayez ce code

$('#frmStudent').on('submit', function() {
  $(#StudentModal).on('hide.bs.modal', function (e) {
    e.preventDefault();
  })
});
0
nnattawat

J'ai eu le même problème et finalement je l'ai obtenu avec ce code:

<%=form_with id: :friend_email_form, url: friend_emails_create_path do |f|%>

                      # form fields entered here

<div class="actions">
    <%= f.submit "Send Email", class: 'btn btn-primary', "onclick":"submit_form();", "data-dismiss":"modal"%>
</div>

 <script>
    function submit_form() {
      document.getElementById('friend_email_form').submit();
    }
</script>

La réponse choisie ne fonctionnait pas pour moi.

0
tomb