gpt4 book ai didi

javascript - 当用户单击提交时,ajax 停止 Bootstrap 模式框关闭

转载 作者:搜寻专家 更新时间:2023-11-01 04:15:38 25 4
gpt4 key购买 nike

这个问题解释起来有点棘手,但这里是:

我想在 Bootstrap 模态框中显示结果,执行以下操作:

enter image description here

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

我的问题

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

如何让模态框在用户点击提交时不关闭?

  <!-- 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'];
}

最佳答案

您似乎缺少“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;
});

关于javascript - 当用户单击提交时,ajax 停止 Bootstrap 模式框关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31290459/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com