Close Bootstrap modal on form submit

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?

Solution 1

Use that Code

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

Solution 2

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

data-dismiss="modal"

e.g.

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

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

Solution 4

You can use one of this two options:

1) Add data-dismiss to the submit button i.e.

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

Solution 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

View more solutions

Comments

[Kandarp]

@Lara is it coming in click event?

[Lara]

NO, not getting even click event also

[Lara]

its quite big..Relevant html i posted

[Kandarp]

@Lara i posted another answer..try it

[Kandarp]

Let us continue this discussion in chat.

[martincarlin87]

which one? Are the css selectors correct? Either one of the suggestions in the answer should definitely work.

[Esteban Bouza]

This does indeed close the modal dialog, but in my case does not trigger the inner form in the modal to be submitted.

[martincarlin87]

@EstebanBouza did you change the selector to match your form? The jQuery I posted would use ajax to submit the form, if you don't have it, that's why. If you don't, take out the return false but the redirect to the action of the form will probably mean it doesn't matter if the modal is closed or not since a new page will be loaded or at least the form will submit to the same page.

[JazzCat]

Simply adding data-dismiss on the button will not submit it.

[othp]

This is almost correct, but do not return false from the event handler function as that's the same as calling preventDefault() and stopPropagation() on the event object. Calling preventDefault() stops the submit from happening which is not the desired outcome here. This is also why the data-dismiss attrib doesn't work - the event added by the bootstrap modal js also calls preventDefault() on the event.

[othp]

#button should be the id of the form, not the button (see the note at the top of link) - if using the event on a button, use the click event.

[othp]

also consider calling .modal('hide'); rather than 'toggle', otherwise if your form can also be submitted without the modal being visible the modal will be shown when the submit event is fired.

[Muhammad Fahad]

Answer is updated now in the view of your comments.. If there is something missing please share with me..Thanks

[Laurel]

Please don't post duplicate answers. If questions are duplicates, then flag to close them as duplicates.

[jgerman]

Adding data-dismiss causes the modal to close before submit occurs and prevents the submit. So that does not solve the problem. The jQuery given here is the same as the accepted answer - if one reads all the comments - but this is presented easier to copy.

[martincarlin87]

@jgerman - My answer also seems to have been posted first, so if anything the accepted answer is the same as mine.

[jgerman]

Interesting. The accepted answer was updated a couple times, so it started out wrong and was updated to be the same as your jQuery solution after you posted.

[Ivan Stin]

"Do it in JS like" ... better to say "in JQuery"

[Mr. Wizard]

With data-dismiss="modal" is not working because the request won't be send anymore.

[martincarlin87]

@Mr.Wizard remove the data-dismiss and try closing the modal programmatically using $('#my-modal').modal('hide');

[Mr. Wizard]

If the type of button is 'button' then you can submit() and then data-dismiss.

[PatsonLeaner]

I tried, I searched, But you Concept was unique and best for me so far. Many Thanks

[tomb]

adding data-dismiss on submit does indeed close the modal, but it prevents saving the object to the database.

[Jaynes01]

@othp could you edit the code in your suggested manner please? As it is now it doesn't seem to include all of your comments and I'm not exactly sure how to do it myself

[Admin]

Tried a lot of different ways. This was simplest and worked.

[cursorrux]

"DO NOT post images of code, data, error messages, etc. - copy or type the text into the post. Please reserve the use of images for diagrams or demonstrating rendering bugs, things that are impossible to describe accurately via text.

[Mohammad]

It does dismess the modal but the entire page became unclickable.