I have rewritten a website for a charity, using Bootstrap 4.
It is a single page website, with 3 forms on it, submitting the forms sends an email to different officials of the charity.
The form handling is done using PHP on the same page.
That all works well, but I am trying to work out how to display a Bootstrap “Thank you” modal after the form handling.
I should point out that I know practically nothing about Javascript so have been trying code found on the internet
I have tried using a call within the PHP to call a JS modal.show function after sending the mail, but that isn’t working.
I have used a session variable to determine which form and the result (e.g. sent/not sent) and within the modal code use PHP to determine text to display. and was wondering if I could use that variable in a Javascript in a document.ready function to call the modal.show, but haven’t been able to get that to work either.
The attached pseudo code shows the PHP/HTML <head> structure that I have tried.
Can anyone help me sort this?
Thanks
“`
<?php
if (!isset($_SESSION[“modalform”])) {
session_start();
$_SESSION[“modalform”] = “”;
} else {
if (isset($_POST[“submit_CU”])) {
/* Handle email */
$form = “CU”;
} else if (isset($_POST[“submit_WL”])) {
/* Handle email */
$form = “WL”;
} else if (isset($_POST[“submit_UF”)) {
/* Handle email */
$form = “UF”;
}
$sent = mail($email_to, $email_subject, $message, $headers, “-f” . $email_from);
if ($sent) {
$_SESSION[“modalform”] = $form;
} else {
$_SESSION[“modalform”] = “FAIL”;
}
/* Have tried to echo a <script> function here, but didn’t work */
}
/* Helper Functions */
function tidy_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>V3 PHP</title>
<meta content=”width=device-width, initial-scale=1.0″ name=”viewport”>
<!– Favicon –>
<link href=”img/favicon.ico” rel=”icon”>
<!– Google Fonts –>
<link href=”https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700|Open+Sans:300,300i,400,400i,700,700i” rel=”stylesheet”>
<!– Bootstrap CSS File –>
<link href=”lib/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<!– Libraries CSS Files –>
<link href=”lib/font-awesome/css/font-awesome.min.css” rel=”stylesheet”>
<!– Main Stylesheet File –>
<link href=”css/style.css” rel=”stylesheet”>
<script src=”lib/jquery/jquery.min.js”></script>
<script src=”lib/bootstrap/js/bootstrap.bundle.min.js”></script>
<script>
$(document).ready(function () {
var value = <?php echo $_SESSION[‘modalform’]; ?>;
if
value < > “” (
value = “#” + value;
$(value).modal(‘show’);
}
});
</script>
</head>
<body>