当用户单击提交时，ajax 停止引导模式框关闭答案

【问题标题】：ajax stop bootstrap modal box from closing when user clicks submit当用户单击提交时，ajax 停止引导模式框关闭
【发布时间】：2015-09-26 05:35:49
【问题描述】：

这是一个难以解释的问题，但这里是：

我想在引导模式框中显示结果，执行以下操作：

Selectbox1-->填充-->SelectBox2-->填充-->Selectbox3
当用户点击提交时从选择框中获取值
使用选择框值查询数据库
在模态框中显示结果

我的问题

一切正常，但是当用户点击提交模态框关闭时，当我再次打开模态框时，结果在模态框内

当用户点击提交时，如何让 MODALBOX 不关闭？

  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
      <script type="text/javascript">
$("form").on("submit", function(e) {
  var formData = $(this).serialize();
  e.preventDefault();
  $.ajax({
    url: 'functionTest.php',
    data: formData,
    type: 'post',
    success: function(data) {
        $('#resultForm').replaceWith(data);

    }

  });
});

</script>
<script type="text/javascript">
$(document).ready(function()
{
 $(".sport").change(function()
 {
  var id=$(this).val();
  var dataString = 'id='+ id;

  $.ajax
  ({
   type: "POST",
   url: "get_sport.php",
   dataType : 'html',
   data: dataString,
   cache: false,
   success: function(html)
   {
      $(".tournament").html(html);
   } 
   });
  });


 $(".tournament").change(function()
 {
  var id=$(this).val();
  var dataString = 'id='+ id;

  $.ajax
  ({
   type: "POST",
   url: "get_round.php",
   data: dataString,
   cache: false,
   success: function(html)
   {
    $(".round").html(html);
   } 
   });
  });

});
</script>

</head>

<body>

         <center>
<div>
<label>Sport :</label> 
<form method="post" id="resultForm" name="resultForm">
<select name="sport" class="sport">
<option selected="selected">--Select Sport--</option>
<?php
    include('connect.php');
 $sql="SELECT distinct sport_type FROM events";
 $result=mysql_query($sql);
 while($row=mysql_fetch_array($result))
 {
  ?>
        <option value="<?php echo $row['sport_type']; ?>"><?php echo $row['sport_type']; ?></option>
        <?php
 } 
?>
</select>

<label>Tournamet :</label> <select name="tournament" class="tournament">
<option selected="selected">--Select Tournament--</option>
</select>


<label>Round :</label> <select name="round" class="round">
<option selected="selected">--Select Round--</option>
</select>
<input type="submit" value="View Picks" name="submit" />
</form>


<?php
if(isset($_POST['submit'])){
echo  $tour = $_POST['tournament'];
 echo $round = $_POST['round'];
    }

【问题讨论】：

stackoverflow.com/questions/9894339/…

标签： javascript jquery ajax twitter-bootstrap

【解决方案1】：

您似乎缺少“return false;”在您的表单提交事件处理程序中：

$("form").on("submit", function(e) {
  var formData = $(this).serialize();
  e.preventDefault();
  $.ajax({
    url: 'functionTest.php',
    data: formData,
    type: 'post',
    success: function(data) {
        $('#resultForm').replaceWith(data);

    }

  });
  //Return false to cancel submit
  return false;
});

【讨论】：

【解决方案2】：

尝试从按钮中移除关闭类

【讨论】：

【解决方案3】：

我还没有测试过你的解决方案，但是试着把 e.stopPropagation();之前 e.preventDefault();

更新

为什么你的 Modal 在
部分？

【讨论】：