Question

下面有一个示例代码，其中包含一个用于删除确认消息的简单引导程序模式。当我输入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>

请帮助我。

Answer 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']）将为空白，因为“是，提交”按钮没有名称。

只需将名称添加到该按钮，它将起作用。

最终代码如下所示：[已解决]

Answer 2

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

您（首先）在脚本标签中输入了错字（应该是javascript）。然后，您必须聆听表单的提交以防止表单提交。您会听到单击类别为Submit的元素所发出的声音。

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

2 个答案: