提交表单时，bootstrap 模式打开，但单击确定按钮时，它不起作用

Question

我有一个用 php 代码更新 mysqli 数据库的表格。代码很好，当我提交表单时，数据库会更新，这意味着它工作正常。但是我想在提交表单之前收到确认 bootstrap 模式。为此，我使用了以下代码。此处模态打开，但单击“确定”按钮时它不起作用。

<button class="btn btn-danger btn-lg" name="submit" value="submit" type="submit" data-condition="salaryinfo" data-toggle="modal-confirm" data-message="Are you sure?" data-title="Hi you!" data-target="#submit-confirm">Submit</button>         

          </form>
          <!-- Modal -->
<div class="modal fade" id="submit-confirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" data-confirm="modal">OK</button>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>

<!-- For modal -->
<script src="js/confirm-bootstrap.js"></script>
<script type="text/javascript">    
function salaryinfo(){
            return true;
        };

    $(document).ready(function(){
        //modal delete confirm
        $('button[data-toggle="modal-confirm"]').click(function(event) {
            event.preventDefault();
            var self = $(this);
            var message = self.data('message');
            var title = self.data('title');
            var target = $(self.data('target'));
            var condition = self.data('condition');
            if( target.length == 1) {
                target.find('.modal-title').html(title);
                target.find('.modal-body').html(message);
                var showModal = true;
                var fn = window[condition];
                if(typeof fn === 'function') {
                    showModal = fn(condition);
                }
                if( showModal ) {
                    target.on('shown.bs.modal', function(e) {
                        target.find('button[data-confirm="modal"]').click(function(e){
                            e.preventDefault();
                            var parentForm = self.closest('form');
                            console.log(parentForm.html());
                            if( parentForm.length == 1 ) {
                                parentForm.submit();
                            }
                        });
                    });
                    target.modal({ show: true });
                };
            };
        });
    });    
    </script>

对工作模式有什么建议吗？

Answer 1

您已经在模式打开之前提交了表单，因为您的按钮具有提交值：

<button class="btn btn-danger btn-lg" name="submit" value="submit" type="submit" data-condition="salaryinfo" data-toggle="modal-confirm" data-message="Are you sure?" data-title="Hi you!" data-target="#submit-confirm">Submit</button>

所以只需将其设为带有数据切换到您的模态的普通按钮即可。

然后在你的modal上制作确认按钮，使其具有提交的价值。

您还需要在 <form> </form>

中包含您的模式

Answer 2

您可以将表单提交绑定到确定按钮而不是提交按钮。

单击 Submit 按钮：打开模式。
单击 Ok 按钮：提交表单

为您的表单指定一个 ID <form id='my_form'>。

为您的 Ok 按钮分配一个 ID
<button id='my_ok_button' type="button" class="btn btn-primary" data-confirm="modal">OK</button>

将表单提交绑定到您的 Ok 按钮

<script type='text/javascript'>
    $(document).on('click', '#my_ok_button', function() {
        $('#my_form').submit();
    })    
</script>

您需要包含 jQuery 才能使此脚本正常工作。

提交表单时，bootstrap 模式打开，但单击确定按钮时，它不起作用

when submitting a form, bootstrap modal opens, but when clicking the ok button, it's not working

php

jquery

bootstrap-modal