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;
}
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
Really struggling with this one, didn't think a simple form would be this complicated. I'm a newbie when it comes to the back-end.
I have 3 fields; name, email, and message. On submit, I just want a simple "thank you" message inside the form box. I do not want to send to another page or refresh to the top of the current page. I want the form to refresh with the 'thank you' message, ideally with the message disappearing after a few seconds.
After trying a few different methods I am almost there with JS, using an event listener to show the "thank you" message after clicking submit.
However, now the contact form doesn't refresh on submit and the data that was inputted still shows on the form along with the thank you message. How do you get the form to refresh on submit?
I have always used WordPress, and contact forms seemed so simple. I have spent hours on this so far.
HTML
<div class="form-box">
<p id="thank-you-message">
Thank you for your message. We will be in touch with you very soon.
</p>
<form method="POST" action="contact-form.php" >
<div class="form-control">
<input class="text-box" id="name" name="name" type="text" placeholder="Your Name*" required>
<input class="text-box" id="email" name="email" type="email" placeholder="Your Email Adress*" required>
</div>
<div>
<textarea id="message" name="message" placeholder="Project Details" required></textarea>
<button class="send" name="submit" type="submit">SEND</button>
</div>
</form>
PHP
<?php
if(isset($_POST['email']) && $_POST['email'] !='') {
$name = $_POST['name'];
$visitor_email = $_POST ['email'];
$message = $_POST ['message'];
$email_from = 'website.com';
$email_subject = "New Form Submission";
$email_body = "User Name: $name.\n".
"User Email: $visitor_email.\n".
"User Message: $message.\n";
$to = "contact#email.com";
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
mail($to,$email_subject,$email_body,$headers);
header("Location: index.html");
}
?>
JS
const form = document.querySelector('form');
const thankYouMessage = document.querySelector('#thank-you-message');
form.addEventListener('submit', (e) => {
e.preventDefault();
thankYouMessage.classList.add('show');
setTimeout(() => form.submit(), 2000);
});
#James Bakker
HTML
<form method="POST" action="contact-form.php" >
<?php echo $successMessage ?>
<div class="form-control">
<input type="hidden" name="valid" value="false">
<input class="text-box" id="name" name="name" type="text" placeholder="Your Name*" required>
<input class="text-box" id="email" name="email" type="email" placeholder="Your Email Adress*" required>
</div>
<div>
<textarea id="message" name="message" placeholder="Project Details" required></textarea>
<button class="send" name="button" type="submit">SEND</button>
</div>
</form>
JS
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
e.preventDefault();
form.valid.value = 'true';
consultForm.submit();
});
PHP
<?php
$successMessage == '';
if($_POST['valid'] == 'true'){
$name = $_POST['name'];
$visitor_email = $_POST ['email'];
$message = $_POST ['message'];
$email_from = 'website.com';
$email_subject = "New Form Submission";
$email_body = "User Name: $name.\n".
"User Email: $visitor_email.\n".
"User Message: $message.\n";
$to = "contact#email.com";
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
$header("Location: index.html");
$success = mail($to,$email_subject,$email_body,$headers);
if ($success){
$successMessage = 'Your Message was sent!';
} else {
$successMessage = 'There was a problem, message was not sent';
}
}
?>
If you were to use fetch or regular XMLHttpRequest you can use the callback to manipulate the DOM after the data has been sent to the backend PHP script.
The PHP script that handles the request will no longer require the header('Location: index.html'); - instead you could echo/return a message to be used by the ajax callback.
The below is not tested as such
document.addEventListener('DOMContentLoaded',()=>{
let form=document.querySelector('form');
form.querySelector('button[type="submit"]').addEventListener('click',e=>{
e.preventDefault();
fetch( 'contact-form.php' , { method:'post', body:( new FormData( e.target.parentNode.parentNode ) ) } )
.then( r=>r.text() )
.then( data=>{
//show the message
document.querySelector('#thank-you-message').classList.add('show');
//iterate through form elements and set the value to empty string if it is not a button
for( i=0; i<form.elements.length; i++ ){
let el=form.elements[i]
if( el.type!='button' )el.value='';
}
// remove the button
e.target.parentNode.removeChild(e.target);
})
})
});
<div class="form-box">
<p id="thank-you-message">
Thank you for your message. We will be in touch with you very soon.
</p>
<form method="POST" action="contact-form.php" >
<div class="form-control">
<input class="text-box" id="name" name="name" type="text" placeholder="Your Name*" required>
<input class="text-box" id="email" name="email" type="email" placeholder="Your Email Adress*" required>
</div>
<div>
<textarea id="message" name="message" placeholder="Project Details" required></textarea>
<button class="send" name="submit" type="submit">SEND</button>
</div>
</form>
</div>
The short answer is: You need to change the name attribute of your submit button to something other than submit, then you will be able to call form.submit() using your JS.
Currently your page works as such:
User enters info and clicks submit
Your JS captures the event and
prevents default action
You display the thank you message and then
submit() the form.
The problems with this approach are:
The thank you message is displayed before the actual message is sent.
There is no form validation
The message is only displayed for 2 seconds, and only before the actual email is sent.
A better approach is:
User fills out form and clicks submit
JS captures the event, prevents default, validates all of the data, and if everything is valid if submits the form, POSTing the form values to the current page, this will reload the page and clear the form fields.
Your PHP script will take the POSTed variables, send the email, and display your thank you message on the page.
The advantages are:
You don't display a message until the email is actually sent
You are making sure the form has valid entries
Your message is displayed after refresh and wont disappear after 2 seconds
Heres how, (code isn't tested):
Make a hidden input in your form with the name 'valid':
<input type="hidden" name="valid" value="false">
Once the your JS has validated the inputs you would set this to true and submit() the form. This will post the variable to your PHP along with the rest of the form values.
form.valid.value = 'true';
consultForm.submit();
in your php you write an if statement:
$successMessage == '';
create empty variable success message than we will assign a message if a form submission is detected.
if($_POST['valid] == 'true'){ //keep in mind we are passing a string
not an actual boolean
//insert your php email script here
$success = mail($to,$email_subject,$email_body,$headers);
//assigning return value of mail() to variable named success
if($success){
$successMessage = 'Your Message was sent!'
} else {
$successMessage = 'There was a problem, message was not sent'
}
you can then echo $successMessage anywhere in your HTML.
<?php echo $successMessage ?>
when the page is initially loaded, before the form submit, $successMessage will be an empty string, so echo $successMessage will have no affect on the page.
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.
I have a login form where I used ajax to catch the login errors i.e. "incorrect password" from my login.php, and to display them onto the same login form rather than reloading a new page with the error message. That now works fine, but when the login IS successful it now loads the entire logged in page (home.php) onto the login form rather than loading it to a new page! You can see in the picture here, . Here is my code for the ajax I have used:
$("#login_button").click(function(){
$.post($("#login_form").attr("action"), $("#login_form :input").serializeArray(), function(info){$("#login_errors").html(info);});
// Prevent the default action from occurring.
return false;
});
$("login_form").submit(function(){
return false;
});
Here is the code for my login form that I have used:
<form id= "login_form" action="login.php" method="post">
<span id="login_errors" style="color:#F00;"></span>
<label>Email Address</label>
<input type="text" name="email" id="email" required="required"/>
<br />
<label>Password</label>
<input type="password" name="password" id="password" required="required"/>
<br />
<div class="checkbox">
<input id="remember" type="checkbox" name="keep" />
<label for="remember">Keep me signed in</label>
</div>
<div class="action_btns">
<div class="one_half last"><input type="submit" class="btn btn-blue" id="login_button" value="Login"></div>
<div class="one_half last">Sign up</div>
</div>
</form>
The function(info){$("#login_errors").html(info);} part of your $.post() - the success callback - is taking whatever output your login.php is generating (info), and inserting it into the element with id login_errors (presumably the bottom part of your login form).
If you want the user to be bounced on to a new page, you need to update your success callback to handle that. For example, on success your login.php could do something like:
if (... login-success test ... ) {
echo 'OK';
} else {
echo 'Login failed, pls try again';
}
Then your success callback can check that output and react accordingly, like:
if (info === 'OK') {
// login.php says login succeeded, bounce user to dashboard
window.location.href = 'http://successful/login/url';
} else {
// login.php says login failed, show the output it gave us
$("#login_errors").html(info)
}
I have a sign up dialog box, which has a login form in it.
I have done some basic form validation in the same file as the form, if errors exist then appropriate messages are echo'd out underneath the fields when the form is submit.
However when the form is submit, the page is refreshed and the dialog box closes, it has to be opened again for the user to see the errors. This is not very appropriate and I want to somehow keep the dialog box open on refresh, only IF errors exist in the form validation.
There must be a way around this but I don't quite know how to implement this.
Here is my code (index.php):
// PHP validation
$fornameErr = $surnameErr ="";
$forname = $surname="";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["forename"])) {
$fornameErr = "Missing";
}
else {
$forename= $_POST["forename"];
}
if (empty($_POST["surname"])) {
$surnameErr= "Missing";
}
else {
$surname= $_POST["surname"];
}
}
// Link which opens up the dialog box by calling the 'check_domain_input()' function
<div id="clickable" onclick="check_domain_input()">Or sign up</div>
// The form in the dialog box
<div id="dialog" title="Sign up" style="display:none">
<center>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div align="center">
<br/>
<input type="text" class="input" name="forename" size="20" maxlength="40" placeholder="Forename" value="<?php echo htmlspecialchars($forename);?>"/>
<span class="error"><?php echo $fornameErr ;?></span>
<br/>
<input type="text" class="input" name="surname" size="20" maxlength="40" placeholder="Surname" value="<?php echo htmlspecialchars($surname);?>"/>
<span class="error"><?php echo $surnameErr ;?></span>
<br/>
<input type="submit" value ="Sign up" class="submit"/>
<br/>
<br/>
</div>
</form>
</center>
</div>
<!-- Dialog box function -->
<script>
function check_domain_input()
{
$( "#dialog" ).dialog({modal: true});
var domain_val = document.getElementsByName('domain');
if (domain_val[0].value.length > 0)
{
return true;
}
$( "#dialog" ).dialog({modal: true});
return false;
}
</script>
You could call your check_domain_input method as the page loads if you've got an error to show, like this:
<script>
function check_domain_input()
{
...
}
<?php if (!empty($fornameErr) || !empty($surnameErr)) : ?>
$(function() {
check_domain_input();
});
<?php endif; ?>
</script>
You can use onsubmit="return validateFunction()" as shown at this link.
You can have PHP set a JavaScript variable that your jQuery onload function reads and reacts to.
You can use AJAX instead of form submissions. With AJAX, you can simply use the AJAX call's error function to react to bad validation.
I have a form built that works perfectly fine. However, when a message is successfully submitted, the user gets redirected to a new page with the 'success' message I have set up. Instead, I want the success message to be displayed in a div which is placed next to the form, and the form to reset in case the user would like to send another message. Likewise, I am also hoping to have my 'error' message show up in the same div upon failure. Was hoping someone can help with my if/else statement to make this possible.
Here's my HTML:
<div id="contact-area">
<form id="theform" name="theform" method="post" action="feedback.php">
<input type="hidden" name='sendflag' value="send">
<p>
<label for="Name">Name:</label>
<input type="text" name="name" id="name" value="" />
</p>
<p>
<label for="Email">Email:</label>
<input type="text" name="email" id="email" value="" />
</p>
<p>
<label for="Message">Message:</label><br />
<textarea name="message" rows="20" cols="20" id="message"></textarea>
</p>
<p>
<input type="submit" name="submit" value="Submit" class="submit-button" />
</p>
</form>
</div>
<div class="message">
<p class="submitMessage"></p>
</div>
Here's my PHP:
<?php
$mail_to_send_to = "myemail#gmail.com";
$your_feedbackmail = "noreply#domain.com";
$sendflag = $_REQUEST['sendflag'];
if ( $sendflag == "send" )
{
$name = $_REQUEST['name'] ;
$email = $_REQUEST['email'] ;
$message = $_REQUEST['message'] ;
$headers = "From: $name" . "\r\n" . "Reply-To: $email" . "\r\n" ;
$a = mail( $mail_to_send_to, "Feedback form", $message, $headers );
if ($a)
{
print("Message was sent, you can send another one");
} else {
print("Message wasn't sent, please check that you have changed emails in the bottom");
}
}
?>
If I understand your question correctly, you're looking to never leave a page but rather have a div appear or disappear based off of a successful form submission. If so, it looks like you're going to have to use AJAX. Luckily, jQuery has this built right in! I'd suggest something like the following:
$.post("url.php", { option1: value1, option2: value2 }, function(data) {
if(data != '')
$('#theDiv').html("Success!");
});
For more information, read up on the documentation here.
Read and follow examples here: jQuery AJAX
You'll basically do something like this.
$.ajax({
url: /url/to/your/php,
data: dataObjectPosting
success: function(data){
//the data object will have your PHP response;
$('#divid').text('success message');
},
error: function(){
alert('failure');
}
});
Remember, success simply means HTTP 200, not necessarily that your PHP code ran successfully as you would see it.