CODEWITHSUNDEEP
formstwitter-bootstrapjquery-uimodal-dialog
coleman-benjamin
coleman-benjamin

Reputation: 951

Bootstrap Modal closes on submit

I've been searching for a while for a solution to this issue, but nothing seems to be working... I have a form within a modal from bootstrap, and I need to perform validation on the form before submitting. On submission it just goes to another page, simple.

But when the validation fails, what I want is for the modal to not close, the form will not submit (already in place), and then I have some jquery-ui effects on the form fields. I've tried things like:

$('#modalDiv').modal('show');

when validation returns false, or adding that to that modal's hide.bs.modal event, but it just wigs out, goes away, and leaves the backdrop in place...?

Could there be some kind of conflict between bootstrap and jquery-ui? I'm surprised there isn't a simple way of disabling modal close on form submit, but I guess I'm not the first one to get into that debate lol. Any suggestions??

Upvotes: 3

Views: 1053

Answers (1)

Alay
Alay

Reputation: 21

I have been searching for a solution for a long time. I came up with the following "solution" I'd rather call a workaround. I removed the html form element and the used ajax for the validation.

HTML Code:

    <div class="modal fade"  id="addCategoryModal" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Add Category</h4>
          </div>
          <div class="modal-body">

                <div class="form-group">
                    <label for="categoryName">Category Name*</label>
                    <input type="text" class="form-control" id="categoryName" placeholder="Category Name">
                </div>
                <div>
                    <button class="submit" id="addCategoryBtn">Submit</button>
                </div>

          </div>
          <div class="modal-footer">
             <div id="message-warning" style="display: none;"></div>
             <div id="message-success" style="display: none;"></div>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

AJAX Code:

$( document ).ready(function() {

/* Add Category*/ 
$('#addCategoryBtn').click(function() {
      var categoryName = $('#categoryName').val();

      if (categoryName == "") {
                $('#message-warning').html("Please add Category");
                $('#message-warning').fadeIn();
      }
      else{

      var data = 'categoryName=' + categoryName;
      $.ajax({
          type: "POST",
          url: "insert.php",
          data: data,
          success: function(msg) {

            // Category was added
            if (msg == 'OK') {
               $('#message-warning').hide();
               $('#categoryName').val("");
               $('#message-success').html("Category Added");
               $('#message-success').fadeIn();   
            }
            // There was an error
            else {
               $('#message-warning').html(msg);
               $('#message-warning').fadeIn();
            }

          }

      });
    }
});//End Add Category


});//End Document Ready Function

Upvotes: 2

Related Questions