表單提交后如何打開模式
[英]How to open a modal after form submission
問題描述
我正在為我的網站創建一個網站，想知道在提交表單后如何打開表單所在的模式。 我在單擊“提交”按鈕后正在尋找打開它的位置，以便可以看到輸入下的錯誤或顯示錯誤已發送。 我試圖將javascript放入結果if或else標記中，它將無法打開模式，而只是提交表單或顯示錯誤，但只有打開模式后才能看到它們。 所以我想知道提交后如何打開備份。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="FiveM roleplay server, with custom vehicles and scripts. Join today!">
<meta name="Keywords" content="aclfx, aclfxserver, fivem, fivem server, roleplay, gtav roleplay, gta v roleplay, fivem roleplay, fivem roleplay server, fort myers roleplay, fmrp, FMRP, fort myers rp">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../fmrp_test/styles/animate.css" rel="stylesheet" type="text/css">
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" />
<script src="https://unpkg.com/simplebar@latest/dist/simplebar.js"></script>
<link href="https://fonts.googleapis.com/css?family=Overpass" rel="stylesheet">
<link href="../fmrp_test/styles/extra.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<title>FMRP | Applications</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="../fmrp_test/index.html">FMRP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml-auto" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="https://www.fortmyersrp.net/forum/">Forums</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../fmrp_test/help.php">Help</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="../fmrp_test/applications_menu.php">Applications <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</div>
</nav>
<br><br>
<div class="container">
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
<h1 class="title text-center" id="staff">Staff Member Application (Moderator):</h1>
<?php
if (isset($_POST["submit"])) {
$fullname = $_POST['fullname'];
$age = $_POST['age'];
$discord = $_POST['discord'];
$timezone = $_POST['timezone'];
$roleplaydescription = $_POST['roleplaydescription'];
$experence = $_POST['experence'];
$to = 'blakecharlie239@gmail.com';
$subject = 'Staff Form';
$body = "From: $fullname\n Age: $age\n Discord: $discord\n Timezone: $timezone\n How long have you roleplayed: $roleplaydescription\n Past staff experience: $experence";
// Check if name has been entered
if (!$_POST['fullname']) {
$errName = 'Please enter your full name.';
}
// Check if email has been entered and is valid
//Check if message has been entered
if (!$_POST['age']) {
$errage = 'Please enter your age.';
}
if (!$_POST['discord']) {
$errdiscord = 'Please enter your discord tag.';
}
if (!$_POST['timezone']) {
$errtimezone = 'Please enter your timezone.';
}
if (!$_POST['roleplaydescription']) {
$errroleplaydescription = 'Please enter if you have roleplayed before.';
}
if (!$_POST['experence']) {
$errexperence = 'Please enter your level of staff experience.';
}
// If there are no errors, send the email
if (!$errName && !$errage && !$errdiscord && !$errtimezone && !$errroleplaydescription && !$errexperence) {
if (mail ($to, $subject, $body)) {
$result='<div class="alert alert-success">Thank you for the application! Please allow 4-36 hours from the time of submission for a response. Please do not resubmit an application if we do not respond within that timeframe; we may have other priorities.</div>';
} else {
$result='<div class="alert alert-danger">We are sorry, but there was an error sending your message; please try again. If the error keeps occurring, please pm Spartan78942#0877 on discord for help resolving this.</div>';
} echo "<script>
$('.collapse').css('display', 'show !important');
</script>";
}
}
?>
<?php echo "<p class='text-danger'>$result</p>";?>
<div class="row">
<div class="col-md-12 col-lg-12"> <form action="applications_menu.php" method="post">
<div class="form-group">
<label for="exampleInputEmail1">First & last name:</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter your first & last name here." name="fullname">
<?php echo "<p class='text-danger'>$errName</p>";?>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Age (MIN 16):</label>
<input type="number" class="form-control" id="exampleInputPassword1" placeholder="Enter your age here." name="age">
<?php echo "<p class='text-danger'>$errage</p>";?>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Discord:</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter your discord tag here. Should look like this: [name]#[4 digits] Ex: aclfx#8109" name="discord">
<?php echo "<p class='text-danger'>$errdiscord</p>";?>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Timezone:</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter your timezone here." name="timezone">
<?php echo "<p class='text-danger'>$errtimezone</p>";?>
</div>
<div class="form-group">
<label for="exampleInputEmail1">How long have you roleplayed?:</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter how long have you been roleplaying." name="roleplaydescription">
<?php echo "<p class='text-danger'>$errroleplaydescription</p>";?>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Past staff experience:</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter and describe your past staff experience." name="experence">
<?php echo "<p class='text-danger'>$errexperence</p>";?>
</div>
<br>
<div class="row"><div class="col-lg-12"><button type="submit" name="submit" value="send" class="subbut btn btn-primary mx-auto d-block" style="width: 190px !important;height: 60px !important;font-size: 25px;">Submit</button></div></div></form>
</div>
</div></div>
</div>
</div>
</div>
</body>
</html>
2 個解決方案
解決方案1
0 2018-09-25 17:00:00
首先，您的JavaScript定位了多個元素，因為您也在導航欄中使用了collapse 。 您需要改為定位#collapseExample 。
其次，您必須將show類添加到元素，而不是設置其display屬性。
所以正確的js是：
$('#collapseExample').addClass('show');
您還將腳本包含在“無錯誤”條件下，因此它將無法運行。
如果需要，您可以在php中執行此操作。 將錯誤檢查移到表單之前，如果有任何錯誤，請設置一個變量。
<?php
if ($errName || $errage) // Boilerplate to set the error
$error = true;
?>
<div class="collapse<?= $error ? ' show' : '' ?>" id="collapseExample">
希望這就是您想要的，因為我在您的代碼中找不到模態。
解決方案2
0 已采納 2018-09-25 17:35:24
只需在關閉body標簽之前添加以下代碼
它檢查是否提交了表單，以及是否提交了javascript代碼，該代碼會觸發折疊，從而顯示您的表單響應或錯誤。
<?php if(isset($_POST['submit'])){
?>
<script type="text/javascript">
jQuery('#collapseExample').collapse({
toggle:true
})
</script>
<?php
}?>
使用引導程序驗證器進行驗證后，停止提交表單並打開引導程序模式（確認對話框）
[英]stop form submission and open a bootstrap modal (confirm dialogue box ) after validating using bootstrap validator
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.