Problem is the modal will show success message whether the form is empty . I wish to get the success message only if data entered in database otherwise show error message. here is my blade page. Repository concept is used for this. Data is inserted in db. The problem on Bootstrap modal. i wish to get success message only if data is inserted in database.otherwise shows error message.
<!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>