jQuery Bootstrap 确认对话框模式 - 提交按钮不起作用答案

【问题标题】：jQuery Bootstrap Confirmation Dialog Modal - Submit Button Does not workjQuery Bootstrap 确认对话框模式 - 提交按钮不起作用
【发布时间】：2019-11-04 06:47:04
【问题描述】：

我在下面有一个示例代码，其中包含一个用于删除确认消息的简单引导模式。代码运行良好，虽然我给出了 input type= button ，但是一旦我给出 type=submit 它就不会提交表单并且对话框模式不会打开。这是我的代码。

<?php
if(isset($_POST['submit'])){
echo $_POST['first_name'];
}
?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<script type="text/javasript">
$('.submit').click(function(e){
  e.preventDefault();
});
</script>

  <title>JS Bin</title>
</head>
<body>
<form action="" method="post">
  <input type="text" name="first_name" id="first_name">
  <!--<button type="button" class="btn btn-default" data-toggle="modal" data-target="#confirm-submit">Submit</button>-->
  <button type="submit" name="submit" class="btn btn-default" data-toggle="modal" data-target="#confirm-submit">Submit</button>


  <div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h2 class="modal-title">Confirm</h2>
        </div>
        <div class="modal-body">
          <p>Are you sure you want to submit?</p>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success">Yes, Submit</button>
          <button type="submit" name="" class="btn btn-danger" data-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</form>
</body>
</html>

请帮帮我..

【问题讨论】：

标签： php jquery bootstrap-modal

【解决方案1】：

在模态页脚 [已解决]

<div class="modal-footer">
      <button type="submit" class="btn btn-success">Yes, Submit</button>
      <button type="submit" name="submit" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>

作为表单上的第一个按钮，

<button type="submit" name="submit" class="btn btn-default" data-toggle="modal" data-target="#confirm-submit">Submit</button>

打开模式但不提交表单，因为您使用了 e.preventDefault();点击那个按钮，

点击“是，提交”后，模式打开后，它将再次提交表单，但这次 isset($_POST['submit']) 将是空白的，因为“是，提交”按钮没有名称.

只需为该按钮添加名称即可。

最终代码将如上所示 [已解决]

【讨论】：

当我更改为 type=button 时，在第一个提交按钮中，它工作正常，但是当我将它更改为 type=submit 时，模式不会打开。
由于 e.preventDefault() 无法打开模态框；尝试删除它
这不是真的。模式未打开，因为表单已立即提交，因为 preventDefault() 未运行。

【解决方案2】：

<script type="text/javascript">
$(document).on('submit', 'form', function(e){
  e.preventDefault();
});
</script>

您（首先）在脚本标签中有错字（应该是 javascript）。然后你必须听表单的提交来防止它。您会听到单击不存在的类提交的元素。

【讨论】：

现在模式打开了，但是表单没有提交。
是的，当然。 preventDefault() 为您执行此操作。
您能告诉我确切的代码是什么吗？
如果你想实现你想要的，你不需要javascript。只需将模态提交更改为：并将提交保留在模态之外（type="按钮”）。这对我有用