问题是无论表单为空，模态都会显示成功消息。我希望仅在数据库中输入数据时才收到成功消息，否则显示错误消息。这是我的刀片页面。存储库概念就是用于此目的。数据被插入到数据库中。 Bootstrap 模式上的问题。我希望仅当数据插入数据库时才能收到成功消息。否则显示错误消息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
:root {
--main-blue: #71b7e6;
--main-purple: #9b59b6;
--main-grey: #ccc;
--sub-grey: #d9d9d9;
}
body {
display: flex;
height: 100vh;
justify-content: center;
/*center vertically */
align-items: center;
/* center horizontally */
background: linear-gradient(135deg, var(--main-blue), var(--main-purple));
padding: 10px;
}
/* container and form */
.container {
max-width: 700px;
width: 100%;
background: #fff;
padding: 25px 30px;
border-radius: 5px;
}
.container .title {
font-size: 25px;
font-weight: 500;
position: relative;
}
.container .title::before {
content: "";
position: absolute;
height: 3.5px;
width: 30px;
background: linear-gradient(135deg, var(--main-blue), var(--main-purple));
left: 0;
bottom: 0;
}
.container form .user__details {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px 0 12px 0;
}
/* inside the form user details */
form .user__details .input__box {
width: calc(100% / 2 - 20px);
margin-bottom: 15px;
}
.user__details .input__box .details {
font-weight: 500;
margin-bottom: 5px;
display: block;
}
.user__details .input__box input {
height: 45px;
width: 100%;
outline: none;
border-radius: 5px;
border: 1px solid var(--main-grey);
padding-left: 15px;
font-size: 16px;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.user__details .input__box input:focus,
.user__details .input__box input:valid {
border-color: var(--main-purple);
}
/* inside the form gender details */
form .gender__details .gender__title {
font-size: 20px;
font-weight: 500;
}
form .gender__details .category {
display: flex;
width: 80%;
margin: 15px 0;
justify-content: space-between;
}
.gender__details .category label {
display: flex;
align-items: center;
}
.gender__details .category .dot {
height: 18px;
width: 18px;
background: var(--sub-grey);
border-radius: 50%;
margin: 10px;
border: 5px solid transparent;
transition: all 0.3s ease;
}
#dot-1:checked~.category .one,
#dot-2:checked~.category .two,
#dot-3:checked~.category .three {
border-color: var(--sub-grey);
background: var(--main-purple);
}
form input[type="radio"] {
display: none;
}
/* submit button */
form .button {
height: 45px;
margin: 45px 0;
}
form .button input {
height: 100%;
width: 100%;
outline: none;
color: #fff;
border: none;
font-size: 18px;
font-weight: 500;
border-radius: 5px;
background: linear-gradient(135deg, var(--main-blue), var(--main-purple));
transition: all 0.3s ease;
}
form .button input:hover {
background: linear-gradient(-135deg, var(--main-blue), var(--main-purple));
}
@media only screen and (max-width: 584px) {
.container {
max-width: 100%;
}
form .user__details .input__box {
margin-bottom: 15px;
width: 100%;
}
form .gender__details .category {
width: 100%;
}
.container form .user__details {
max-height: 300px;
overflow-y: scroll;
}
.user__details::-webkit-scrollbar {
width: 0;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
// $('#myModal').modal('show');
$("#registrationForm").submit(function(e) {
e.preventDefault();
var data = $("#registrationForm").serialize();
//alert("hello");
var pathurl = $("#url").val();
$.ajax({
url: pathurl + 'demouser', // Laravel route for store method
type: "POST",
data: {
_token: $('meta[name="csrf-token"]').attr('content'),
data: data
},
success: function(response) { //controller response
console.log("Data added successfully!");
console.log(response); //controller response
if (response.message == 'Item added successfully') {
//alert("hi");
$('#myModal').css("display", "show");
//$('#registrationForm').trigger('reset');
$('#registrationForm')[0].reset();
}
},
error: function(xhr, status, error) {
console.error("Error:", error);
}
});
})
});
</script>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Sucess message</h4>
</div>
<div class="modal-body">
<p>Your registration is completed..</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="container">
<!-- <div class="alert alert-success">
</div> -->
<div class="title">Registration</div>
<form method="post" id="registrationForm" name="registrationForm">
<input type="hidden" name="url" id="url" value="{{env('APP_URL')}}" />
<div class="user__details">
<div class="input__box">
<span class="details">Full Name</span>
<input type="text" name="name" placeholder="E.g: John Smith" required>
</div>
<div class="input__box">
<span class="details">Username</span>
<input type="text" name="username" placeholder="johnWC98" required>
</div>
<div class="input__box">
<span class="details">Email</span>
<input type="email" name="email" placeholder="[email protected]" required>
</div>
<div class="input__box">
<span class="details">Phone Number</span>
<input type="tel" name="contact" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="012-345-6789" required>
</div>
<div class="input__box">
<span class="details">Password</span>
<input type="password" name="password" placeholder="********" required>
</div>
</div>
<div class="gender__details">
<input type="radio" name="gender" id="dot-1" value="male">
<input type="radio" name="gender" id="dot-2" value="female">
<input type="radio" name="gender" id="dot-3" value="notprefer">
<span class="gender__title">Gender</span>
<div class="category">
<label for="dot-1">
<span class="dot one"></span>
<span>Male</span>
</label>
<label for="dot-2">
<span class="dot two"></span>
<span>Female</span>
</label>
<label for="dot-3">
<span class="dot three"></span>
<span>Prefer not to say</span>
</label>
</div>
</div>
<div class="button">
<input type="submit" name="submit" value="Register" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">
<!-- <button type="button" name="submit" id="submit" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">save data</button> -->
</div>
</form>
</div>
</body>
</html>
从
data-toggle="modal"<input type="submit" name="submit" value="Register" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">'Item added successfully'