Bootstrap 5.2.3 modal - HTML表单导致黑屏

Question

我有一个问题与形式内模态。我可以有时间输入元素，也不能有任何日期元素，否则屏幕将变成空白，而不是显示模态。

这里是两个时间输入的模态的工作版本

<div class="hidden modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body" id="bookingIdText">
</div>
<form action="myBookingBackend.php" method='post'>
<div>
<label for="timeStart">Time Start</label> 
<input type="time" name="timeStart" id="timeStart">
<label for="timeEnd">Time End</label> 
<input type="time" name="timeEnd" id="timeEnd">
<input type="hidden" name="bookingIdHidden" id="bookingIdHidden" value="">
</div>
<button type="submit" id="submit" class="btn btn-primasry">Submit</button>
</form>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

这是一个图片来展示它的工作

这是我的模态的一个非功能版本。注意:新的时间输入是前一个时间输入的直接复制和过去，并且更改了名称和id，因此理论上应该没有问题。

<div class="hidden modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body" id="bookingIdText">
</div>
<form action="myBookingBackend.php" method='post'>
<div>
<label for="timeStart">Time Start</label> 
<input type="time" name="timeStart" id="timeStart">
<label for="timeEnd">Time End</label> 
<input type="time" name="timeEnd" id="timeEnd">
<label for="timeEnd1">Time End</label> 
<input type="time" name="timeEnd1" id="timeEnd1">
<input type="hidden" name="bookingIdHidden" id="bookingIdHidden" value="">
</div>
<button type="submit" id="submit" class="btn btn-primasry">Submit</button>
</form>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

和…不工作

我与这个问题斗争了一会儿，不能解决它，也不能在网上找到任何关于它的东西。

这是我使用的bootstrap版本

```     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

当我尝试使用<select>和<option>标签来创建一个下拉框时，我也有同样的问题，所以我尝试了这些:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

运气不

我想我可以添加，这个模式使用jQuery来设置隐藏元素的值

如果这是我遇到麻烦的原因，这里是jQuery函数

function takeId(newButtonId){

$('#myModal').modal('show');
try {
$('#bookingIdHidden').attr('value', newButtonId);
} catch(err) {
alert(err); 
}
};

<script src="jquery-3.6.1.min.js"></script>
<input type='button' name='edit' value='Edit' onclick=takeId($newButtonId) id='1' </button>

如有任何帮助，不胜感激

Answer 1

我认为可能需要更多的上下文。

提交表单后，您是否试图留在页面上?

看起来你正在提交到myBookingBackend.php。当我将您的示例粘贴到文件中时，表单按预期提交。在myBookingBackend.php中执行业务逻辑后，您是否进行了重定向?

如果您试图提交表单并留在页面上，那么您需要使用ajax请求。由于您已经在使用jQuery，所以请查看有关ajax方法的文档。您还可以使用post方法和get方法，它们只是不那么啰嗦。

我已经得到了模态工作不清除页面在这个jsfiddle。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Launch demo modal
</button>

<div class="hidden modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body" id="bookingIdText">

<form action="https://mocki.io/v1/63dd1e5a-95a4-4a6c-b179-54805e8d8236" method='post'>
<div>
<label for="timeStart">Time Start</label> 
<input type="time" name="timeStart" id="timeStart">
<label for="timeEnd">Time End</label> 
<input type="time" name="timeEnd" id="timeEnd">
<input type="hidden" name="bookingIdHidden" id="bookingIdHidden" value="">
</div>
<!--<button type="submit" id="submit" class="btn btn-primary">Submit</button>-->
<button type="button" onclick="someFunction()" id="submit" class="btn btn-primary">The old button did a server side form submission (not ajax) so the page will get redirect to myBookingBackend.php, which is expected. You could do a client side request and update the page like this instead if that's what you're looking for.</button>
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
function someFunction() {
alert("The page won't be cleared, because you won't be going anywhere.");
// you can get the form info
var bookingEndpoint = document.querySelector("#myModal form").action
// then do your ajax request
$.get(bookingEndpoint, function(data) {
console.log("Booking endpoint was hit.")
})
.done(function(data) {
console.log("Data returned by the request")
console.log(data)
document.querySelector("#myModal form").innerHTML = "Thanks! You're booking was successful.";
})
.fail(function() {
document.querySelector("#myModal form").innerHTML = "Thanks! You're booking was successful.";
})
.always(function() {
console.log("Ajax request has completed.")
});
}
</script>