Develop Reference

How can I prevent page from reloading after PHP form submssion?

I have this basic PHP form and I'd like to prevent the page from refreshing after pressing the submit button. Or more like, I would like to have a confirmation paragraph created after the form is sent.
I'm very close, but the paragraph is not getting displayed I think because the page is getting refreshed.
if($_POST["submit"]) {
$recipient="contact#d.com";
$subject="Form to email message";
$sender=$_POST["sender"];
$senderEmail=$_POST["senderEmail"];
$message=$_POST["message"];
$mailBody="Name: $sender\nEmail: $senderEmail\n\n$message";
mail($recipient, $subject, $mailBody, "From: $sender <$senderEmail>");
$thankYou="<div class='thanksDiv'><p>Thank you! Your message has been sent. I'll get back to you ASAP. <i class='as fa-smile-beam'></i></p><a style='cursor:pointer' class='thanksExit'><i class='fas fa-times fa-2x'></i></a></div>";
}
<form id="myForm" name="myemailform" method="post" action="index.php">
<div class="inline">
<label>Name</label>
<input id="firstName" required placeholder="e.g: Emma" type="text" size="32" name="sender" value="">
</div>
<div class="inline">
<label>Email</label>
<input autocomplete="off" required id="email" type="email" placeholder="e.g: EmmaSmith#example.com" name="senderEmail">
</div>
<div class="inline">
<label>How can I help?</label>
<textarea id="textarea" required placeholder="Type a message here..." name="message"></textarea>
</div>
<input type="submit" name="submit" value="Submit">
<?=$thankYou ?>
</form>
Note: I've tried the preventDefault function and Ajax and they didn't work.
Thank you!

They are different ways and approaches to resolve that issue.
How I do it:
I have a processing php that will receive the post and send the email then I redirect the user to a thanks page.
header("location: thanks.php);
exit();
You can also use ajax, and disable the button once it is pressed. It depends on the developer, framework and programming preferences.

You will first need to send some data back to your AJAX from PHP.
session_start();
if(isset($_POST["submit"])) {
$recipient="contact#d.com";
$subject="Form to email message";
$sender=$_POST["sender"];
$senderEmail=$_POST["senderEmail"];
$message=$_POST["message"];
$mailBody="Name: $sender\nEmail: $senderEmail\n\n$message";
mail($recipient, $subject, $mailBody, "From: $sender <$senderEmail>");
$thankYou="<div class='thanksDiv'><p>Thank you! Your message has been sent. I'll get back to you ASAP. <i class='as fa-smile-beam'></i></p><a style='cursor:pointer' class='thanksExit'><i class='fas fa-times fa-2x'></i></a></div>";
echo $thankYou;
}
Now your PHP will send the HTML back to the AJAX Call.
$(function() {
$("#myForm").submit(function(e) {
e.preventDefault();
$.post($(this).attr("action"), $(this).serialize(), function(result) {
$(this).append(result);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm" name="myemailform" method="post" action="index.php">
<div class="inline">
<label>Name</label>
<input id="firstName" required placeholder="e.g: Emma" type="text" size="32" name="sender" value="">
</div>
<div class="inline">
<label>Email</label>
<input autocomplete="off" required id="email" type="email" placeholder="e.g: EmmaSmith#example.com" name="senderEmail">
</div>
<div class="inline">
<label>How can I help?</label>
<textarea id="textarea" required placeholder="Type a message here..." name="message"></textarea>
</div>
<input type="submit" name="submit" value="Submit">
</form>
In this JavaScript, you will notice, I make use of the Event object for the Submit Callback. This allows me to use .preventDefault() properly.
Trying to put the message into your Session is fine, yet it requires loading another page to call up a session. PHP is only executed before the web server sends the HTML to the Web Browser. With AJAX, the Post request is being performed "in the background", so data can be sent back in HTML, Text, JSON, or XML without the need to reload or redirect. The JavaScript can then work with that data on the same page, no "flicker".
In this case, we append the HTML to the Form, so once the message has been sent via PHP mail(), the User will see the Thank You message.
Update
Consider the following PHP alternate code.
<?php
if(isset($_POST["submit"])) {
$recipient = "contact#d.com";
$subject = "Form to email message";
$sender = $_POST["sender"];
$senderEmail = $_POST["senderEmail"];
$message = wordwrap($_POST["message"], 70, "\r\n");
$headers = "From: $sender <$senderEmail>\r\n";
$headers .= "Reply-To: $senderEmail\r\n";
$headers .= "X-Mailer: PHP/" . phpversion() . "\r\n";
$headers .= "X-Originating-IP: " . $_SERVER['REMOTE_ADDR']
$mailBody="Name: $sender\r\nEmail: $senderEmail\r\n\r\n$message";
var $res = mail($recipient, $subject, $mailBody, $headers);
if($res){
echo "<div class='thanksDiv'><p>Thank you! Your message has been sent. I'll get back to you ASAP. <i class='as fa-smile-beam'></i></p><a style='cursor:pointer' class='thanksExit'><i class='fas fa-times fa-2x'></i></a></div>";
} else {
echo "<div class='mailError'><p>Sorry, there was an error sending your message. Please check the details and try submitting it again.</p></div>";
}
}

Some solutions:
If the user does not need to stay on the same page then as Vidal posted, redirect to a success/thank you page.
If the user needs to stay on the same page then you have a few options:
Method A:
Set session with a form identifier (anything) if nothing is posted (i.e. initial page load). e.g. if(!isset($_POST['field'])){ $_SESSION['....
When form is submitted, check that session exists with the form identifier and process then destroy session.
Now if it's refreshed, the session won't exist, you can inform user that it's already submitted
Problem with this is that if session has timed out and the refresh is done, it will go through.
Method B:
Disable refresh: https://stackoverflow.com/a/7997282/1384889
Method C:
Check database for repeat entry
Method D: (I don't like this but it's used plenty)
Reload same page with '&t='.time() appended to URL by php header() or javascript depending on where your script is executed.

How redirect php Window.location.href or Window.open () methods in php and JavaScript

I follow up a tutorial to learn more about php, in it's source code there is something which seems works at that time but not anymore. here is the code , please let me know what should i change in the code in order to make login process work (currently after entering a valid user name and pass and clicking login it freezes and show first page and not go to home.php
here is template/header.php:
<div class="container">
<!--Head wrap starts-->
<div id="head_wrap">
<!--Header starts-->
<div id="header">
<img src="images/logo.png" style="float:left;"/>
<form method="post" action="" id="form1">
<strong>Email:</strong>
<input type="email" id="email" name="email" placeholder="Email" required="required" />
<strong>Password:</strong>
<input type="password" id="pass" name="pass" placeholder="****" required="required"/>
<button type="submit" id="login">Login</button>
</form>
</div>
<!--Header ends-->
</div>
here is login.php
<?php
session_start();
include("includes/connection.php");
if(isset($_POST['login'])){
$email = mysqli_real_escape_string($con,$_POST['email']);
$pass = mysqli_real_escape_string($con,$_POST['pass']);
$get_user = "select * from users where user_email='$email' AND user_pass='$pass'";
$run_user = mysqli_query($con,$get_user);
$check = mysqli_num_rows($run_user);
if($check==1){
$email = mysqli_real_escape_string($con,$_POST['email']);
$_SESSION['user_email']=$email;
echo "<script>window.open('home.php','_self')</script>";
}
else {
echo "<script>alert('Passowrd or email is not correct!')</script>";
}
}
?>
please note i have tried
echo "<script> window.location.href = 'home.php';</script>";
instead of
echo "<script>window.open('home.php','_self')</script>";
and still doesn't work, since it's tutorial and i have search through stackoverflow can't find any answer i appreciate your help.

This is your HTML code but with a submit button. You say all files are located in the same folder so this should work. I did not make any changes to login.php but it should run when the page is submitted.
<div class="container">
<!--Head wrap starts-->
<div id="head_wrap">
<!--Header starts-->
<div id="header">
<img src="images/logo.png" style="float:left;"/>
<form method="post" action="login.php" id="form1">
<strong>Email:</strong>
<input type="email" id="email" name="email" placeholder="Email" required="required" />
<strong>Password:</strong>
<input type="password" id="pass" name="pass" placeholder="****" required="required"/>
<input type="submit" id="login" name="login" value="Login">
</form>
</div>
<!--Header ends-->
</div>
</div>
Edit: I can't debug your entire project but after looking over some things I see you are not using the 'name' attribute. When a page is submitted a name/value pair is sent in the $_POST array. If you have no 'name' attribute nothing is sent. Start by adding the 'name' attribute. I have modified the above HTML code to show you how.

You have to use header(...) function but don't forget that your page keep to run at the end. Don't forget to use with die to stop your script. ;)
die(header("Location: home.php"))
or after 5 seconds :
header("refresh: 5; url=home.php");

if($check==1){
$email = mysqli_real_escape_string($con,$_POST['email']);
$_SESSION['user_email']=$email;
return 1;
}
else {
return 0;
}
and javascript check status 1 and 0 then window.location.href and window.open use

Check in your file..
1) header() must be called before any actual output is sent, either by
normal HTML tags, blank lines in a file, or from PHP
2) Combine all your PHP codes and make sure you don't have any spaces
at the beginning of the file.
3) after header('location: home.php'); add exit();
4) after sesssion_start() add ob_start();

Getting Empty emails using html5 form and php

I have some html5 form fields on a website that I manage that push the data inputted by users to a php file that sends an email to a dedicated yahoo email for the site.
Here is the html:
<form role="form" method="post" action="php/contact-us.php" lang="es" id="contactForm">
<div class="row">
<div class="form-group col-lg-4 required">
<label for="name">Name</label>
<input type="text" class="form-control" name="name" required placeholder="Enter Name" />
</div>
<div class="form-group col-lg-4 required">
<label for="email">Email</label>
<input type="email" class="form-control" name="email" required placeholder="Enter valid email" />
</div>
<div class="form-group col-lg-4">
<label for="phone">Phone Number</label>
<input type="tel" class="form-control" name="phone" placeholder="e.g. (000) 000 - 0000">
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12 required">
<label for="message">Mensaje</label>
<textarea class="form-control" rows="6" name="message" required placeholder="Write your message here"></textarea>
</div>
<div class="form-group col-lg-12">
<input type="hidden" name="save" value="contact">
<button type="submit" class="btn btn-default">Enviar</button>
</div>
</div>
</form>
Before, I did not have any validation on the fields, but I was getting empty emails with no user content so I thought people are just pushing the button without entering anything which I could also test myself. So I added the following validation JS, also eused webshim for unsupported browsers (and the required tags in the form elements above):
<script>
$('#contactForm input[type=text], select, textarea').on('change invalid', function() {
var field = $(this).get(0);
field.setCustomValidity('');
if (!field.validity.valid) {
field.setCustomValidity('Please fill required fields');
}
});
$('#contactForm input[type=email]').on('change invalid', function() {
var field = $(this).get(0);
field.setCustomValidity('');
if (!field.validity.valid) {
field.setCustomValidity('Enter a valid email');
}
});
</script>
Previously I was getting the inputted email form the user and setting it as the senders email but I was having issues with certain email addresses, etc. So I defaulted it to a random email that would always work and just included the users inputted email in the message. Here is my php file (contact-us.php):
<?php
// Set your email below
$to = "<dedicatedemail>#yahoo.com";
// Receive and sanitize input
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$subject = "Request from website";
$headers = "From: no-reply#gmail.com";
// set up email
$msg = "Sender Information \nName: " . $name . "\nEmail: " . $email . "\nPhone: " . $phone . "\n\n" . $message;
$msg = wordwrap($msg,70);
// mail
mail($to,$subject,$msg,$headers);
header('Location: ../contact-thank-you.html');
?>
So first let me say that everything is working. When I test the functionality here everything works. I am able to send an email from my ios device and my laptop and I have had a couple friends send from their android devices. The validation works for me so it does not let me send an email without at least filling the required fields out. I was getting empty emails before I added validation and setting the sender email to a default one. However I still get empty emails even after all the changes. When I test I cannot test across all platforms and browsers but I cannot force an empty email after I added checks. Is my validation failing somewhere? I feel like people are filling in the fields but somehow the email is coming in empty. When I say empty I mean the stuff that I programmatically add to the message comes through but the actual info that the user is suppose to input does not? How is this happening?

Always perform server side validation and confirm there is a POST incoming. Otherwise even something as simple as a webcrawler will tigger empty emails.
<?php
if (empty($_POST['email']) || empty($_POST['name'])) {
// Respond with a proper error message
...
} else {
// Send email
$to = "<dedicatedemail>#yahoo.com";
$name = $_POST['name'];
$email = $_POST['email'];
...
}

Clear form field after submit

I have read other answers for the same question but I am having problems and would be grateful for some advice.
I have javaScript in my html file, and an Onclick() statement on the submit button to clear the form but now the email confirmation message does not come up and the message is no longer sent. If I put the onClick(); in the body of the form, every field is cleared just by clicking on a form field. I really want to be able to submit a message, then have the form cleared on successful send.
<script type ="text/javascript">
function clearform () {
document.getElementById("name").value="";
document.getElementById("email").value="";
document.getElementById("subject").value="";
document.getElementById("message").value="";
}
</script>
<div class="row">
<div class="col-sm-6">
<h2>Send us a message</h2>
<!-- action="replace it with active link."-->
<form action="contact.php" method="post" name="contact-form" id="contact-form" >
<label for="name">Your Name <span>*</span></label>
<input type="text" name="name" id="name" value="" required />
<label for="email">Your E-Mail <span>*</span></label>
<input type="text" name="email" id="email" value="" required />
<label for="subject">Subject</label>
<input type="text" name="subject" id="subject" value="" />
<label for="message">Your Message</label>
<textarea name="message" id="message"></textarea>
<div class="row">
<div class="col-sm-6">
<input type="submit" name="sendmessage" id="sendmessage" value="Submit" onclick="clearform();" />
</div>
<div class="col-sm-6 dynamic"></div>
</div>
</form>
I then have the following in the PHP file:
private function sendEmail(){
$mail = mail($this->email_admin, $this->subject, $this->message,
"From: ".$this->name." <".$this->email.">\r\n"
."Reply-To: ".$this->email."\r\n"
."X-Mailer: PHP/" . phpversion());
if($mail)
{
$this->response_status = 1;
//$this->response_html = '<p>Thank You!</p>';
}
}
function sendRequest(){
$this->validateFields();
if($this->response_status)
{
$this->sendEmail();
}
$response = array();
$response['status'] = $this->response_status;
$response['html'] = $this->response_html;
echo "<span class=\"alert alert-success\" >Your message has been received. Thanks!</span>";
header("Location: contact.php");// redirect back to your contact form
exit;
}
}
$contact_form = new Contact_Form($_POST, $admin_email, $message_min_length);
$contact_form->sendRequest();
?>

No ajax form post
If you are not using ajax to submit the form (you don't seem to be using it), there is no need for javascript to clear the form, the form will be reloaded on submit and it will be empty.
However, you have a problem with your location redirect: You are outputting html before that so the redirect will probably fail.
You should not output anything before you redirect and you could add a query variable to the url so that you can show your success message when the form loads:
if($this->response_status)
{
$this->sendEmail();
}
header("Location: contact.php");// redirect back to your contact form
exit;
Using ajax to post the form
If you are using ajax (the setting of your response variables seems to indicate that you want to do that), you should put the clearform () call in the success function of your ajax call and remove the header() redirect in php. Instead you probably want to return / output the results:
if($this->response_status)
{
$this->sendEmail();
}
$response = array();
$response['status'] = $this->response_status;
$response['html'] = $this->response_html;
echo json_encode($response);
exit;

You've got to make sure the event continues to propagate and the form is submitted:
function clearform () {
document.getElementById("name").value="";
document.getElementById("email").value="";
document.getElementById("subject").value="";
document.getElementById("message").value="";
return true;
}

Modal Notification Appear On Form Send, Foundation/Abide.js

I'm doing something very similar to this site here. When you send the form that is in in the footer, a modal window appears upon successful sending that thanks the user for submitting a form. I've built a site in Foundation and am validating the fields using Abide.js.
Everything was working this morning until I tried using different AJAX/jQuery methods to have a message appear on the same page where the form is instead of the modal. Now that I'm trying to do the modal, my form isn't working at all.
Here's my form's HTML:
<form id="form-contact" name="form-contact" action="include/contact-form-send.php" method="post" data-abide>
<div class="row">
<div class="large-12 columns">
<input id="contact-name" name="name" type="text" placeholder="Full Name" pattern="alpha" required />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input id="contact-email" name="email" type="text" placeholder="Email Address" pattern="email" required />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input id="contact-phone" name="phone" type="text" placeholder="Phone Number" pattern="number" required />
</div>
</div>
<div class="row">
<div class="large-6 medium-6 small-12 columns" id="form-left">
<input id="contact-security" name="security" type="text" placeholder="10 - 3 =" pattern="[7]" required />
</div>
<div class="large-6 medium-6 small-12 columns" id="form-right">
<input type="submit" value="submit" class="button green-button" id="form-send" />
</div>
</div>
PHP:
$name = $_POST["name"];
$email = $_POST["email"];
$phone = $_POST["phone"];
$to = "example#email.com";
$subj = "The Rivers Quick Contact Request";
$mess = "The following person has filled out the quick contact form on The Rivers website:
Name: $name
Email: $email
Phone: $phone
";
$headers = "From: info#therivers.com" . "\r\n" .
"CC:example#email.com";
$mailsend = mail($to,$subj,$mess,$headers);
And ideally the line of JS that would help the modal appear when the form is sent, using a function as defined by Foundation here.
$(document).ready(function() {
$('#form-contact').on('valid.fndtn.abide', function() {
$('.modal').css({'opacity':'1'});
});
});
It's my understanding that the Abide.js should be taking care of all the validation, and then the PHP file will send the form to the specified email. I'm having a hard time figuring out where to go from here now that I've broken it.

I think we're missing too much code to be of much help :/
When I go to the provided link, your php error is at line 19, but there aren't 19 lines of php provided.
Have you syntax checked your php? If not, here's a php syntax checker.
Concerning calling the modal, have you tried foundation's reveal modal plugin? Check it out if you haven't.
Great looking site btw!