forms - Bootstrap Modal 在提交时关闭

标签 forms twitter-bootstrap jquery-ui modal-dialog

我一直在寻找这个问题的解决方案,但似乎没有任何效果......我在 Bootstrap 的模态中有一个表单,我需要在提交之前对表单进行验证。提交后,它会转到另一个页面,很简单。

但是当验证失败时,我想要的是模式关闭,表单不会提交(已经到位),然后我在表单上有一些jquery-ui效果领域。我试过类似的东西:

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

当验证返回 false,或将其添加到该模态的 hide.bs.modal 事件中,但它只是假发消失,消失,并将背景留在原地...?

bootstrap 和 jquery-ui 之间会不会有某种冲突?我很惊讶没有一种简单的方法可以禁用表单提交时的模式关闭,但我想我不是第一个参与这场辩论的人,哈哈。有什么建议吗??

最佳答案

我一直在寻找解决方案。我想出了以下“解决方案”,我宁愿称之为解决方法。我删除了 html 表单元素和用于验证的 ajax。

HTML 代码:

    <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 代码:

$( 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

关于forms - Bootstrap Modal 在提交时关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26129395/

相关文章:

html - 如何使用 node.JS 将数据 POST 到 MongoDB 数据库?

html - Bootstrap 4 导航元素堆叠

twitter-bootstrap - 无法通过数据属性数据背景关闭 Bootstrap 模式

javascript - Angular JS 中 ng-repeat 中的表单

javascript - 使用 jQuery 将一个 div 移动到另一个 div

javascript - HTML 表单 - 不要写入默认值

jquery - 表单提交到新选项卡,并重定向当前窗口在 Chrome/Safari 中不起作用

ruby-on-rails - 如何配置 rails_admin 以将整数输入字段更改为选择字段?

jquery - 如何数据绑定(bind).ressized().draggable()?

jQuery ui 1.7.3 datepicker 设置选定日期+ 3 天