在表单提交时关闭 Bootstrap 模式

Question

I have a Bootstrap modal dialog which contains a form. The modal dialog contains a submit and a cancel button. Now on submit button click the form is submitted successfully but the modal dialog isn't getting closed. Here is my 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>

Anybody knows how to do this?

Answer 1

Use that Code

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

Answer 2

Add the same attribute as you have on the Close button:

data-dismiss="modal"

eg

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

You can also use jQuery if you wish:

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

    // submission stuff

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

Answer 3

give id to submit button

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

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

Also you forgot to close last div.

</div>

Hope this helps.

Answer 4

You can use one of this two options:

1) Add data-dismiss to the submit button ie

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

2) Do it in JS like

$('#frmStudent').submit(function() {
    $('#StudentModal').modal('hide');
});

Answer 5

i make this code it work fine but once form submit model button not open model again say e.preventdefault is not a function..

Use below code on any event that fire on submit form

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

you can make this code more short..

if any body found solution for e.preventdefault let us know

Answer 6

I am using rails and ajax too and I had the same problem. just run this code

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

that worked for me but I am trying to also fix it without using jQuery.

Answer 7

If anyone does not wish to use jQuery, In Bootsrap 5.0, you should now use data-bs-dismmis eg :

<button type="submit" class="btn btn-success" data-bs-dismiss="modal">SUBMIT</button>

or

<button type="button" class="btn btn-success" onclick="submitForm()" data-bs-dismiss="modal">SUBMIT</button>

Answer 8

Neither adding data-dismiss="modal" nor using $("#modal").modal("hide") in javascript worked for me. Sure they closed the modal but the ajax request is not sent either.

Instead, I rendered the partial containing the modals again after ajax is successful (I'm using ruby on rails). I also had to remove "modal-open" class from the body tag too. This basically resets the modals. I think something similar, with a callback upon successful ajax request to remove and add back the modals should work in other framework too.

Answer 9

if your modal has a cancel button (Otherwise create a hidden close button). You can simulate the click event on this button so that your form is closed. Iin your component add a ViewChild

export class HelloComponent implements OnInit {

@ViewChild('fileInput') fileInput:ElementRef;

in your close button add #fileInput

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

When you want to close the modal programmatically trigger an click event on the close button

this.fileInput.nativeElement.click();

Answer 10

I had the same problem and finally got it working with this 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>

The selected answer did not work for me.

Answer 11

The listed answers won't work if the results of the AJAX form submit affects the HTML outside the scope of the modal before the modal finishes closing. In my case, the result was a grayed out (fade) screen where I could see the page update, but could not interact with any of the page elements.

My 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;
});

Note: My modal form was inside a parent div that was already rendered via AJAX, thus the need to anchor the event listener to document.

Answer 12

Try this code

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

Answer 13

Use this to submit and close the modal at the same time

$('#form-submit').on('click', function(e){
    e.preventDefault();
    $('#con-close-modal').modal('toggle'); //or  $('#IDModal').modal('hide');
    $('#date-form').submit();
});

Answer 14

If you do not want to use jQuery, make the button type a normal button and add a click listener pointing to the function you would like to execute, and send the form in as a parameter. The button would be as follows:

<button (click)="yourSubmitFunction(yourForm)" [disabled]="!yourForm.valid" type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>

Remember to remove: (ngSubmit)="yourSubmitFunction(yourForm)" from the form div if you use this method.

Answer 15

This worked for me. I embedded an inline JavaScript code in the submit button to auto-click the close button on submit. I used the ID of the close button to reference it from the javascript (jQuery).

<button type="submit" class="btn btn-success float-right" onclick="javascript: $('#close-button').click();">Save</button>

Answer 16

What I do is press the close button that automatically brings the modal to the moment the request is satisfactorily fulfilled.was what I came up with at that time and it worked for me, I am using laravel with axios

i add an ID in the close button of modal and after i select the buttton and execute when the response is correct

document.getElementById("closeGroup").click();