Success message pop-up after from submit button clicked
Question
I have created a web php web page with html and php code in, see below.
When I submit my form, it sends me an email and a success of fail message appears. So, everything works well.
My problem: I want to make the success or failure message pop-up or be a modal, but I don't know how. Where should I change the code and add the modal?
I have php at the top and then my HTML form. My form also has the google recaptcha verification tool. I just want to add a modal, but I do not know how and where to add the code.
<?php
error_reporting(0);
$msg="";
if (isset($_POST['submit'])) {
$to = "aleciadeklerk.119@gmail.com";
$subject = "Form Submission";
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$check = $_POST['check'];
$msgBody = 'Name: '.$name.'Message: '.$message.'Subscribe: '.$check.'E-mail: '.$email;
$headers = 'From: '.$email;
$secretKey = "6LdXbq8UAAAAAM1B79Yz2IPgcTuIynBXeJMF2ZLY";
$responseKey = $_POST['g-recaptcha-response'];
$url = "https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$responseKey";
$response = file_get_contents($url);
$response = json_decode($response);
if ($response->success) {
if (mail($to, $subject, $msgBody, $headers)) {
$msg="Message sent successfully!";
}
else {
$msg="Failed to send the message. Please try again.";
}
}
else {
$msg="Verification Failed";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<title>Dibene Solutions</title>
<link rel = "icon" type = "image/png" href = "images/dibene_icon_dark.png">
</head>
<body>
<div>
<div class="container-fluid" id="contact">
<div class="container">
<div class="row">
<div class="col-md-12">
<a name="contact"><h2>Contact us</h2></a>
</div>
</div>
<div class="row">
<div class="col-md-6">
<form action="<?= $_SERVER['PHP_SELF'] ?>" method="post" class="p-2">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Enter name" required>
</div>
<div class="form-group">
<input type="email" name="email" class="form-control" placeholder="Enter e-mail" required>
</div>
<div class="form-group">
<textarea name="message" rows="4" class="form-control" placeholder="Write your message" required></textarea>
</div>
<div class="form-group">
<label><input type="checkbox" name="check" class="form-control" checked>Subscribe to monthly newsletter.</label>
</div>
<div class="form-group">
<div class="g-recaptcha" data-sitekey="6LdXbq8UAAAAAAf7mQJqfbBbLWA36c1Qiin8EhBp"></div>
</div>
<div class="form-group">
<input type="submit" name="submit" value="Send" class="btn btn-block">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
My aim is to click the submit button and then a modal pops up with a success or failure message.
3 answers
solution1
0 2019-07-25 10:27:56
if you want to use modal as an information messages, put your modal inside your html after the body tag and then call it with a javascript after the event success or failed. javascript used for modal: $('#myModal').modal(options) .
or if you want simplier way, you can use javascript alert() to inform the success or failed event
solution2
0 2019-07-25 11:16:48
I made few changes to the code. I included bootstrap modal code and javascript function to call pop up. check this code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<title>Dibene Solutions</title>
<link rel = "icon" type = "image/png" href = "images/dibene_icon_dark.png">
</head>
<body>
<div>
<div class="container-fluid" id="contact">
<div class="container">
<div class="row">
<div class="col-md-12">
<a name="contact"><h2>Contact us</h2></a>
</div>
</div>
<div class="row">
<div class="col-md-6">
<form action="<?= $_SERVER['PHP_SELF'] ?>" method="post" class="p-2">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Enter name" required>
</div>
<div class="form-group">
<input type="email" name="email" class="form-control" placeholder="Enter e-mail" required>
</div>
<div class="form-group">
<textarea name="message" rows="4" class="form-control" placeholder="Write your message" required></textarea>
</div>
<div class="form-group">
<label><input type="checkbox" name="check" class="form-control" checked>Subscribe to monthly newsletter.</label>
</div>
<div class="form-group">
<div class="g-recaptcha" data-sitekey="6LdXbq8UAAAAAAf7mQJqfbBbLWA36c1Qiin8EhBp"></div>
</div>
<div class="form-group">
<input type="submit" name="submit" value="Send" class="btn btn-block">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p id="txtMsg"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
function popup(msg){
document.getElementById("txtMsg").innerHTML = msg;
$("#myModal").modal();
}
</script>
<?php
error_reporting(0);
$msg="";
if (isset($_POST['submit'])) {
$to = "aleciadeklerk.119@gmail.com";
$subject = "Form Submission";
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$check = $_POST['check'];
$msgBody = 'Name: ' . $name . 'Message: ' . $message . 'Subscribe: ' . $check . 'E-mail: ' . $email;
$headers = 'From: ' . $email;
$secretKey = "6LdXbq8UAAAAAM1B79Yz2IPgcTuIynBXeJMF2ZLY";
$responseKey = $_POST['g-recaptcha-response'];
$url = "https://www.google.com/recaptcha/api/siteverify?
secret=$secretKey&response=$responseKey";
$response = file_get_contents($url);
$response = json_decode($response);
if ($response->success) {
if (mail($to, $subject, $msgBody, $headers)) {
$msg = "Message sent successfully!";
echo '<script type="text/javascript">',
'popup("'.$msg.'");',
'</script>';
} else {
$msg = "Failed to send the message. Please try again.";
echo '<script type="text/javascript">',
'popup("'.$msg.'");',
'</script>';
}
}
else {
$msg="Verification Failed";
echo '<script type="text/javascript">',
'popup("'.$msg.'");',
'</script>';
}
}
?>
</body>
</html>
solution3
0 2019-07-25 11:24:07
You could create a hidden field like:
<input type="hidden" name="msg" id="msg" value="<?php echo $msg ?>">
Then using JQuery on document ready:
$(document).ready(function() {
if($('#msg').val() != "")
{
alert($('#msg').val()); // or replace with a JQuery modal
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Pop-up Form Success Message
Page Refresh & Pop Up Success Message After Submit
PHP display pop-up success message box using Codeigniter
Open JS pop-up when Submit is clicked
how to show a pop-up message(like this site) on submit form
Form Submit Button Pop-Up Box Php/Javascript
PHP - Submit button and Modal Pop-up AJAX on 2 browsers PHP
Pop-up message after submitting a form with php
How to show a pop-up confirmation after clicking button
pop-up password input, then submit the popup
Related Tags