CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapmodal-dialog
U r s u s
U r s u s

Reputation: 6968

prevent bootstrap modal window from closing on form submission

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

Upvotes: 26

Views: 127370

Answers (7)

Jelgab
Jelgab

Reputation: 1900

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

Upvotes: 19

Saahithyan Vigneswaran
Saahithyan Vigneswaran

Reputation: 7143

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

Upvotes: 13

inżynier umair
inżynier umair

Reputation: 21

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.

Upvotes: 0

nnattawat
nnattawat

Reputation: 716

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

Upvotes: 3

Rajiv Sharma
Rajiv Sharma

Reputation: 7112

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

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

Upvotes: 1

Gadhia Reema
Gadhia Reema

Reputation: 196

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>

Upvotes: 5

ZooL
ZooL

Reputation: 194

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/

Upvotes: 16

Related Questions