在我的 WordPress v5.8.2 中，我在 Bootstrap modal v4 中有一個自定義的 HTML 表單。
<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="form" method="POST" class="form">
<input id="name" name="name" class="form-control" type="text" placeholder="Full Name" value="">
<button type="submit" name="form_submit" id="form_submit" class="btn">Submit</button>
</form>
</div>
<div class="modal-footer">
<div id="confirm" class="row d-none">
<div class="col-12 text-center">
<div id="alert" role="alert"></div>
</div>
</div>
</div>
</div>
</div>
</div>
對于用戶體驗，想要在 div 中#confirm使用以下 jQuery提交表單后顯示 2 秒的確認訊息：
$(document).on("submit", "#form", function(e) {
$name = $(this).find('input[name=name]').val(); // Name
$("#alert").text('Thank you ' $name '.');
$("#confirm").removeClass("d-none");
setTimeout(function() {
$("#modal").modal('hide');
}, 2000);
});
我想在它隱藏之前保持模態 2 秒鐘，以便我可以在#confirmdiv 中顯示訊息。然而，模態立即關閉。
這是https://jsfiddle.net/kingBethal/08v2qfa5/10/。
uj5u.com熱心網友回復：
我建議您使用一種button按鈕（不是一種submit按鈕），然后以編程方式處理表單提交
請看下面的示例代碼
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Test</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
window.addEventListener('load', () => {
document.getElementById('submitButton').addEventListener('click', () => {
let name = document.getElementById('name').value;
if (name !== '') {
let alertPlaceholder = document.getElementById('alertPlaceholder');
alertPlaceholder.outerHTML = '<div >Thank you, ' name '!</div>';
setTimeout(() => { document.getElementById('form').submit(); }, 2000);
}
});
});
</script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Test</button>
<div class="modal" id="exampleModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">This is a test</h5>
</div>
<div class="modal-body">
<div id="alertPlaceholder"></div>
<form id="form">
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input class="form-control" id="name" name="name" value="Fabio" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="submitButton">Submit</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
uj5u.com熱心網友回復：
您的代碼的問題是當您單擊提交時，它會直接提交您的表單而不執行您的 JS 腳本，因此要執行 JS 腳本，您必須防止提交表單。為此，請將此代碼提交給 Js
e.preventDefault()
用于在腳本執行后提交表單代碼
document.getElementById("form").submit()
這是作業代碼，希望對您有所幫助。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
<script>
$(document).on("submit", "#form", function(e) {
e.preventDefault()
$name = $(this).find('input[name=name]').val(); // Name
$("#alert").text('Thank you ' $name '.');
$("#confirm").removeClass("d-none");
setTimeout(function() {
$("#modal").modal('hide');
document.getElementById("form").submit();
}, 2000);
});
</script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="form" method="POST" class="form">
<input id="name" name="name" class="form-control" type="text" placeholder="Full Name" value="">
<button type="submit" name="form_submit" id="form_submit" class="btn">Submit</button>
</form>
</div>
<div class="modal-footer">
<div id="confirm" class="row d-none">
<div class="col-12 text-center">
<div id="alert" role="alert"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/387801.html