prevent bootstrap modal window from closing on form submission

Question

Hi I'm using Bootstrap for the first time and I can't get my modal form to stay open on clicking the submit button. I've searched SO but all related questions deal with slightly different issues (example below).

Disallow twitter bootstrap modal window from closing

do you submit the form via ajax or is it just a normal submit form? — apostolov, Sep 19 '13 at 11:51
@Apostolov, thanks for the quick reply! I'm not using ajax. Ajax doesn't post back the page and since I do want to postback on submission, I thought I shouldn't. — U r s u s, Sep 19 '13 at 11:55
@apostolov i have the same problem, and i'm using Ajax what should i do? — hale, Jan 20 '16 at 21:51

score 18 · Answer 1 · answered Aug 19 '15 at 22:44

Remove the following:

data-dismiss = "modal"

From the button that should not close the dialog. After that, you can close the dialog by using $( "#TheDialogID" ).modal( "hide" ). Example:

<!--<SimpleModalBox>-->
<div class="modal fade" id="SimpleModalBox" tabindex="-1" role="dialog" aria-labelledby="SimpleModalLabel" aria-hidden="true">
  <!--<modal-dialog>-->
  <div class = "modal-dialog">

    <!--<modal-content>-->
    <div class = "modal-content">

      <div class = "modal-header">
        <button type = "button" class = "close" data-dismiss = "modal">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class = "modal-title" id = "SimpleModalLabel">Title for a simple modal</h4>
      </div>

      <div id="TheBodyContent" class = "modal-body">
        Put your content here
      </div>

      <div class = "modal-footer">
        <button type = "button" class = "btn btn-default" data-dismiss = "modal">Yes</button>
        <button type = "button" class = "btn btn-default" onclick="doSomethingBeforeClosing()">Don't close</button>
        <button type = "button" class = "btn btn-default" data-dismiss = "modal">Cancel</button>
      </div>

    </div>
    <!--<modal-content>-->

  </div>
  <!--/modal-dialog>-->
</div>
<!--</SimpleModalBox>-->

Javascript code:

//#region Dialogs
function showSimpleDialog() {
  $( "#SimpleModalBox" ).modal();
}

function doSomethingBeforeClosing() {
  //Do something. For example, display a result:
  $( "#TheBodyContent" ).text( "Operation completed successfully" );

  //Close dialog in 3 seconds:
  setTimeout( function() { $( "#SimpleModalBox" ).modal( "hide" ) }, 3000 );
}
//#endregion Dialogs

ZooL · Accepted Answer · 2013-09-19T14:03:57.343

16

look at => http://getbootstrap.com/2.3.2/javascript.html#modals

use

data-backdrop="static"

or

$("#yourModal").modal({"backdrop": "static"});

Edit1 :

on your link opening your modal ==>

<a href="#" onclick="$('#yourModal').modal({'backdrop': 'static'});" class="btn btn-primary">yourModal</a>

Edit2 :

http://jsfiddle.net/BVmUL/39/

edited Sep 19 '13 at 14:03

answered Sep 19 '13 at 12:22

ZooL

194
1
4

Hi @ZooL, thanks for your suggestions. I've tried both of them and, oddly enough, the JS works and the markup doesn't. However the JS route doesn't quite cut it because the modal window shows up on page load, rather than on link-click. – U r s u s Sep 19 '13 at 13:03
have you tried your edit at all? I've noticed you removed the double quotes, but I still believe it doesn't work because href has to be set to the modal window's id. – U r s u s Sep 19 '13 at 13:28
@dura you have to try. The onclick event occurs when you click on link. – ZooL Sep 19 '13 at 13:44
I have tried it @ZooL. The window still closes on clicking the 'submit' button. I've tried to add the onclick event to that button but that doesn't work either. – U r s u s Sep 19 '13 at 13:55
thanks a lot for all your efforts. I had a play around with your jfiddle and it works. However, it also works (i.e. the modal window doesn't close on submit) if I remove the JS and add the original 'role' and 'data-toggle' of the bootstrap example. Let's move this to the chat perhaps. – U r s u s Sep 19 '13 at 14:23
@dura If it works, please valid the Answer. Maybe it will be useful for someone else. – ZooL Sep 19 '13 at 14:40
I will accept your answer as it has been useful overall. However it hasn't solved my problem. – U r s u s Sep 19 '13 at 15:00
@ZooL It is bad practice to have JavaScript in an onclick attribute. Check out [Unobtrusive JavaScript](https://en.wikipedia.org/wiki/Unobtrusive_JavaScript). You should update the answer to advise new programmers against this. – Crazy Redd Aug 20 '18 at 10:52
data-backdrop="static" this works perfectly. Thanks – Sunny Chaudhari Jun 01 '20 at 11:24

score 13 · Answer 3 · edited Jun 24 '22 at 09:42

This is how I did in my program, hope it helps.

This is the button which triggers the modal. Here I have disabled the keyboard and mouse click outside the modal.

<button type="button" data-toggle="modal" data-target="#modalDivId"
                data-backdrop="static" data-keyboard="false">

This is the modal div, with a form and a submit button. Replace ... with your modal content.

<div class="modal fade" id="modalDivId" role="dialog">
 <form>
   ...
  <button type="submit" onClick="myFunction()" class="btn btn-success">
     Submit
  </button>
 </form>
</div>

Finally the function which triggers when you click submit button. Here event.preventDefault(); will prevent the default action of form submit, so that the modal will remain.

function myFunction() {
    $("form").on("submit", function (event) {
        event.preventDefault();
        $.ajax({
            url: "yoururl",
            type: "POST",
            data: yourData,
            success: function (result) {
                console.log(result)
            }
        });
    })
}

score 5 · Answer 4 · answered May 25 '18 at 12:02

5

If you want to add multiple data and you want modal to stay open use

<button type="button"></button>

and If you want to close the modal after submitting data you must use

<button type="submit"></button>

answered May 25 '18 at 12:02

Gadhia Reema

186
3
17

score 3 · Answer 5 · edited Apr 25 '19 at 12:27

I ran into the similar problem where I use modal as a form so I cannot initially set data-backdrop="static" data-keyboard="false" because I want the user to be able to close it as long as he has not submitted the form. Once he has submitted the form, I want to prevent him from closing the form modal. Here is how I can get around.

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

score 1 · Answer 6 · answered Feb 05 '19 at 20:06

1

Use this to prevent bootstrap modal window from closing on form submission

$( "form" ).submit(function( event ) {
  event.preventDefault();
});

answered Feb 05 '19 at 20:06

Rajiv Sharma

6,746
1
52
54

score 0 · Answer 7 · edited Nov 17 '21 at 06:56

0

use below code only:-

$(document).ready(function () {
    $("#myModal").modal('show');
});

and write your html code in update panel then remove data-dismiss="modal" from the button. Hope it works for you.

edited Nov 17 '21 at 06:56

Naeem Khan

950
4
13
34

answered Aug 10 '17 at 09:37

inżynier umair

21
6

It would be great if you could add some explanation to your code. If you only write directives the learning effect is greatly reduced. – dv3 Aug 10 '17 at 09:56
This what i want to say : Explanation: - – inżynier umair Aug 10 '17 at 14:40

prevent bootstrap modal window from closing on form submission

7 Answers7

Linked