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>
2
Answers
Remove
data-toggle="modal"from<input type="submit" name="submit" value="Register" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">. The modal will show only if response from server is'Item added successfully'Of course for this to happen you need to open the modal properly:
Also, you had jQuery included twice, that caused issues.
Live example:
In the provided code, the success message modal appears regardless of whether the form is filled or not because the modal is triggered by the form submission event. To display the success message only when the data is successfully inserted into the database, you need to check the server response in the AJAX success callback function. If the response indicates a successful insertion, show the modal; otherwise, display an error message. You can achieve this by modifying the AJAX success callback function and adding an error handling section in the AJAX error callback function.