Success message pop-up after from submit button clicked - php

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.

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

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>

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
}
});

Related

HTML Form Sent to Email [duplicate]

This question already has answers here:
PHP mail function doesn't complete sending of e-mail
(31 answers)
Closed 4 years ago.
I'm having an issue with my html form sending to my email.
I have it set up so that it goes to a php file and it works fine, but when I change the filename from index.php to contact.php it doesn't send anymore.
contact.php:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style/stylesheet.css">
<script src="script/scripts.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="banner">
<img src="images/banner.jpg">
</div>
<div class="navigation">
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Parts
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Cases
Motherboards
Processors
Graphics Cards
Storage
Power Supplies
RAM
Other
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Builds
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
</div>
</div>
<div class="contact" id="navright">
Contact
</div>
</div>
</div>
<div class="contact_page">
<form class="contact_form" action="contactform.php" method="post">
<label>Full Name:</label><br/>
<input type="text" name="name" placeholder="Full Name"><br/>
<label>Your Email:</label><br/>
<input type="text" name="mail" placeholder="Email"><br/>
<label>Subject:</label><br/>
<input type="text" name="subject" placeholder="Subject"><br/>
<label>Message:</label><br/>
<textarea name="message" class="contacttext" placeholder="Message..."></textarea><br/>
<button class="submit" type="submit">Submit</button>
</form>
</div>
<div class="footer">
<div class="footertext">
<p>Here at Terry's Computers we do not claim to own any of
the products showed on this website.</p>
<p>Contact Us</p>
</div>
</div>
</body>
</html>
contactform.php:
<?php
if (isset($_POST['submit'])) {
$name = $_POST['name'];
$subject = $_POST['subject'];
$mailFrom = $_POST['mail'];
$message = $_POST['message'];
$mailTo = "terryjtowell#terrytowell.com";
$headers = "From: ".$mailFrom;
$txt = "You have received an Email from ".$name.".\n\n".$message;
mail($mailTo, $subject, $txt, $headers);
header("Location: contact.php?mailsend");
}
?>
It's not my web hoster because it worked with this file.
index.php:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta charset="UTF-8">
<title>Email Form</title>
</head>
<body>
<main>
<p class="header">E-MAIL FORM</p>
<form class="contact-form" action="contactform.php" method="post">
<p class="title">Your Name</p>
<input type="text" name="name" placeholer="Full Name"><br/>
<p class="title">Your E-Mail</p>
<input type="text" name="mail" placeholer="Your E-mail"><br/>
<p class="title">Subject</p>
<input type="text" name="subject" placeholer="Subject"><br/>
<p class="title">Message</p>
<textarea name="message" maxrows="10" placeholder="Message"></textarea><br/>
<button type="submit" name="submit"><h2>SUBMIT</h2></button><br/>
</form>
</main>
</body>
</html>
Your PHP line:
if (isset($_POST['submit'])) {
Will never execute because you need an element with the name of submit, but you have:
<button class="submit" type="submit">Submit</button>
Which you have in the example you say works. The solution should be as simple as adding a name attribute like this:
<button class="submit" name="submit" type="submit">Submit</button>

Login Script Redirecting me back to login page

I have a login form that requires a username and password. It does tell you when your username and password is wrong but when its correct it just takes you back to login. I have tried everything but the only thing that works is to remove the checklogin.php but then it removes the point of having a login page
Below are my Check Login and Login page scripts:
CHECKLOGIN.PHP
<?php
if(!isset($_SESSION['finance_id']))
echo '<script type="text/javascript">window.location="login.php"; </script>';
?>
LOGIN.PHP
<link rel="shortcut icon" href="img/icon.ico" type="image/x-icon"/>
<?php
include("php/dbconnect.php");
include("php/checklogin.php");
$error = '';
if(isset($_POST['login']))
{
$username = mysqli_real_escape_string($conn,trim($_POST['username']));
$password = mysqli_real_escape_string($conn,$_POST['password']);
if($username=='' || $password=='')
{
$error='All fields are required';
}
$sql = "select * from Finance where username='".$username."' and password = '".md5($password)."'";
$q = $conn->query($sql);
if($q->num_rows==1)
{
$res = $q->fetch_assoc();
$_SESSION['finance_username']=$res['username'];
$_SESSION['finance_id']=$res['id'];
$_SESSION['finance_name']=$res['name'];
echo '<script type="text/javascript">window.location="FinanceManage.php";
</script>';
}else
{
$error = 'Invalid Username or Password';
}
}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>iBroker Systems</title>
<!-- BOOTSTRAP STYLES-->
<link href="css/bootstrap.css" rel="stylesheet" />
<!-- FONTAWESOME STYLES-->
<link href="css/font-awesome.css" rel="stylesheet" />
<!-- GOOGLE FONTS-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<style>
.myhead{
margin-top:0px;
margin-bottom:0px;
text-align:center;
}
</style>
</head>
<body >
<div class="container">
<div class="row ">
<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
<div class="panel-body" style="background-color: #FFFFFF; margin-top:50px; border:solid 3px #0e0e0e;">
<h3 class="myhead">iBroker Systems</h3>
<center><img src="img/logo.png"></center>
<form role="form" action="login.php" method="post">
<hr />
<?php
if($error!='')
{
echo '<h5 class="text-danger text-center">'.$error.'</h5>';
}
?>
<h3 class="myhead">Finance Administration</h3>
<div class="form-group input-group">
<span class="input-group-addon"><i class="fa fa-tag" ></i></span>
<input type="text" class="form-control" placeholder="Your Username " name="username" required />
</div>
<div class="form-group input-group">
<span class="input-group-addon"><i class="fa fa-lock" ></i></span>
<input type="password" class="form-control" placeholder="Your Password" name="password" required />
</div>
<center><button class="btn btn-primary" type= "submit" name="login">Login Now</button>
</center>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Sessions are not initialized in PHP if session_start() is not called, put it in the very beginning of all your scripts
Another thing, for redirection, you better use header('Location: login.php');die();

form validation using php not working in xampp

I am not able to validate the form using php and form is getting submitted even though its not validated. I am using Xampp sever. Please let me know the solution.
<?php
$error = "";
if($_POST) {
if(!$_POST["email"]) {
$error .= "Email address is required<br>";
}
if(!$_POST["subject"]) {
$error .= "Subject is required<br>";
}
if(!$_POST["exampleTextarea"]) {
$error .= "Text Area address is required<br>";
}
if (filter_var($_POST["email"], FILTER_VALIDATE_EMAIL) === false) {
$error .= "Email address is invalid<br>";
}
if($error != ""){
$error = '<div class="alert alert-danger" role="alert"><p><strong>Oh snap! There were error(s) in your form:</strong></p>'. $error . '</div>';
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="container"id="containerID">
<h1>Get in touch!!!</h1>
<div id="error"><? echo $error; ?></div>
<form method="post">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email" name="email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" class="form-control" id="subject" name="subject">
</div>
<div class="form-group">
<label for="exampleTextarea">What would you like to ask us??</label>
<textarea class="form-control" id="exampleTextarea" rows="5" name="exampleTextarea"></textarea>
</div>
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</form>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script type="text/javascript">
</script>
</body>
</html>
Problem with your code not handling form post correctly, your are overriding the value for variable $error where you are checking
if ($error != "") {
$error = '<div class="alert alert-danger" role="alert"><p><strong>Oh snap! There were error(s) in your form:</strong></p>'. $error . '</div>';
} this will lead to neglect all the previous error assignment you have made above this piece of code. Plus on page reload the $error initializes with "", so all the hard work in validating errors and populating the $error variable becomes useless. Therefore, I have used session in my answer.
<?php
$error = "";
$errors = "";
session_start();
if(isset($_POST['submit'])) {
if(empty($_POST["email"])) {
$error .= "Email address is required<br>";
} else if (filter_var($_POST["email"], FILTER_VALIDATE_EMAIL) === false) {
$error .= "Email address is invalid<br>";
}
if(empty($_POST["subject"])) {
$error .= "Subject is required<br>";
}
if(empty($_POST["exampleTextarea"])) {
$error .= "Text Area address is required<br>";
}
if($error != ""){
$errors = '<div class="alert alert-danger" role="alert"><p><strong>Oh snap! There were error(s) in your form:</strong></p>'. $error . '</div>';
$_SESSION['errors'] = $errors;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="container"id="containerID">
<h1>Get in touch!!!</h1>
<?php
if (isset($_SESSION['errors'])) {
echo $_SESSION['errors'];
unset($_SESSION['errors']);
}
?>
<form method="post">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email" name="email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" class="form-control" id="subject" name="subject">
</div>
<div class="form-group">
<label for="exampleTextarea">What would you like to ask us??</label>
<textarea class="form-control" id="exampleTextarea" rows="5" name="exampleTextarea"></textarea>
</div>
<button type="submit" name="submit" class="btn btn-primary" id="submit">Submit</button>
</form>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script type="text/javascript">
</script>
</body>
</html>
Try giving your <button> a name, like <button name="submitbtn"> and at the top of the if statement, try if(isset($_POST['submitbtn'])
I don't know will this work in your code, but this is what I normally do.
Instead of
<div id="error"><? echo $error; ?></div>
try this
<div id="error">
<?php
echo $error;
?>
</div>

Alerts for Contact Form after being sent / error found

I myself am not good with PHP so I am wondering If someone on here can help me with my issue. My main page is the following code
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Leave a Message</title>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="font-awesome.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
</head>
<body id="particles">
<body id="particles">
<div class="main">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title">Leave a message</h4>
</div>
<div class="modal-body">
<form method="post" action="contact_me.php">
<div class="form-group">
<label>Your name</label>
<br>
<input type="text" class-"form-control" name="name" required="" style="width: 100%;">
</div>
<div class="form-group">
<label>Your email</label>
<br>
<input type="text" class-"form-control" name="email" required="" style="width: 100%;">
</div>
<div class="form-group">
<label>Your message</label>
<br>
<textarea type="text" class-"form-control" name="message" required="" style="width: 100%; max-width: 100%; min-height: 100px"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info" style="width: 100%;">Submit</button>
</div>
</form>
</div>
<div class="modal-footer" style="text-align: center;">
<small>Copyright © 2016. All Rights Reserved.</small>
</div>
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script src="particles.jquery.min.js"></script>
<script src="custom.min.js"></script>
</body>
</html>
My action is contact_me.php and that code is
<?php
// Check for empty fields
if(empty($_POST['name']) ||
empty($_POST['email']) ||
empty($_POST['message']) ||
!filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
{
header( 'Location: http://www.wotm8.net/error-pages/contact' ) ;
return false;
} header('Location: ' . $_SERVER['HTTP_REFERER']);
$name = strip_tags(htmlspecialchars($_POST['name']));
$email_address = strip_tags(htmlspecialchars($_POST['email']));
$message = strip_tags(htmlspecialchars($_POST['message']));
// Create the email and send the message
$to = 'me#lolnick.com'; // Add your email address inbetween the '' replacing yourname#yourdomain.com - This is where the form will send a message to.
$email_subject = "Website Contact Form: $name";
$email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nMessage:\n$message";
$headers = "From: noreply#yourdomain.com\n"; // This is the email address the generated message will be from. We recommend using something like noreply#yourdomain.com.
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
return true;
?>
I am wondering If someone can teach me how to add alerts. For example If a error Is found It will show up a Red Box of Text and say Error. If the contact form is correct than It will show a Green Box of Text and say Contact Form Sent.

Php statement to show div

I'm having problem to get my different div from my php function
This is the code
error_reporting(E_ALL | E_NOTICE);
ini_set('display_errors', '1');
require_once("./include/membersite_config.php");
if (!$fgmembersite->CheckLogin()) {
$fgmembersite->RedirectToURL("index.php");
exit;
}
if (isset($_POST['submitted'])) {
if($fgmembersite->ChangePassword()){
echo '<div id="ajaxDivOk">';
sleep(3);
$fgmembersite->RedirectToURL("index.php");
}
else{
echo '<div id="ajaxDivErro">';
sleep(3);
}
}
?>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>EBSPMA PAAD</title>
<link href="css/styles.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/modernizr.js?cb=2.2.3.2085"></script>
<script type="text/javascript">
</script>
</head>
<body>
<header role="banner" class="main-header">
<!-- MAIN HEADER -->
<div class="main-header-body">
<div class="container-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">
<h2>
PAAD-GesDocente</h2>
</div>
<div class="col-xs-4 col-xs-offset-1 main-header-title">
<p class="sizeToggle" >Mudar Password</p>
</div>
</div>
</div>
</div>
</div>
</header><section class="content">
<div class="grid">
<div class="box">
<form name="changepwd" id="loginForm" action='<?php echo $fgmembersite->GetSelfScript(); ?>' method="POST">
<input type="hidden" name='submitted' id='submitted'/>
<input type="hidden" name="path" value="painelAdquirente.action"/>
<div>
<p><b><font color="red">A sua password deve ser alterada!</font></b></p></div>
<div class="icon-input">
<label for="password"></label>
<div class="input password">
<i class="fa fa-lock"></i>
<input type="password" name="oldpwd" id="oldpwd" placeholder="Senha antiga">
</div>
</div>
<br>
<div class="icon-input">
<label for="password"></label>
<div class="input password">
<i class="fa fa-lock"></i>
<input type="password" name="newpwd" id="newpwd" placeholder="Senha nova">
</div>
<input type="hidden" name="email" id="email" value="<?php echo $fgmembersite->UserEmail(); ?>">
</div>
<br>
<input type="submit" id="sbmtLogin" class="sa-btn1" value="Mudar">
</form>
</div>
<div class="form-group">
<div id="ajaxDivOk" name="ajaxDivOk" style="display:none" class="alert alert-success">Modificado com sucesso...Faça login novamente</div>
</div>
<div class="form-group">
<div id="ajaxDivErro" name="ajaxDivErro" style="display:none" class="alert alert-danger">Opss....Erro, tente mais tarde</div>
</div>
</div>
</section>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/plugins.js?cb=2.2.3.2085"></script>
</body>
</html>
The div is not show but in fiddler i get
<div id="ajaxDivOk">
So the php function is working properly since the password is changed and i should have the div
Any help please?
Thanks
You can set which notification you want to show up when you do your checks at the beginning, and then display the appropriate one in the following HTML. You can handle the redirect the same way.
if (isset($_POST['submitted'])) {
if ($fgmembersite->ChangePassword()) {
$redirect = '<meta http-equiv="refresh" content="3; url=index.php" />';
$notice = '<div id="ajaxDivOk" name="ajaxDivOk" class="alert alert-success">
Modificado com sucesso...Faça login novamente</div>';
} else {
$redirect = '';
$notice = '<div id="ajaxDivErro" name="ajaxDivErro" class="alert alert-danger">
Opss....Erro, tente mais tarde</div>';
}
}
Then in the <head> of your document...
<head>
<?php if isset($redirect) echo $redirect; ?>
...
And later where you are displaying the notifications:
<div class="form-group">
<?php if isset($notice) echo $notice; ?>
</div>

Categories