Develop Reference

How to refresh contact form on the same page HTML PHP JavaScript [closed]

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.

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.

Getting response from sending form in textbox

I'm trying to make a website that automatically uses this script to get amount of bitcoin in an wallet :
<?php
$address = $_GET["address"];
$satbalance = file_get_contents('https://blockchain.info/q/addressbalance/'.$address.'');
$btcbal = ($satbalance) / 100000000;
echo $btcbal;
?>
and I'm trying to make page that has my clients username and password in textarea box and when I enter the bitcoin wallet address from my user to check the balance from multiple input boxes and show the value in the box in front of address box.
Image of the page that needs this job done
How can I get the response from the form and display in another box or variable.
Thanks.

Wrap the fields in a form tag and submit to the same page.
Using your code example, this example show a simple form and handling the POST with PHP. This hasn't been tested but is an example of how to handle a post using the $_POST super global.
<?php
$btcbal = null;
// Check if there is POST data
if (!empty($_POST)) {
$address = $_POST['address'];
$satbalance = file_get_contents('https://blockchain.info/q/addressbalance/'.$address.'');
$btcbal = ($satbalance) / 100000000;
}
?>
<form method="post">
<input type="text" name="username">
<input type="password" name="password">
<input type="text" name="btc_address">
<button type="submit">Submit</button>
</form>
<p>Balance: <?php echo $btcbal ? $btcbal : 'N/A'; ?></p>

Form window alert, doesn't work

i got the problem with validation in my form. Validation actualy works in every explorer, but how is it possible to receiving an empty form in my mail box. I dont understand..thanks for any help!
<script>
function kontrolaDat(myForm){
if (window.RegExp)
{
znaky=new RegExp("^[^.]+(\.[^.]+)*#([^.]+[.])+[a-z]{2,3}$");
if (!znaky.test(myForm.email.value))
{
window.alert("Zadaný e-mail nie je platný!");
return false;
}
}
if(myForm.jmeno.value == "") {
alert("Zadajte prosím svoje meno");
return false;
}
if(myForm.telefon.value == "") {
alert("Zadajte prosím váš ​​telefón");
return false;
}
if(myForm.psc.value == "") {
alert("Zadajte prosím vaše PSČ");
return false;
}
else return true;
}
</script>
<div class="span4 text">
<h4>Najlepšiu hypotéku aj vám!</h4>
<p>Žiadne poplatky - Žiadne záväzky - Skvelý servis<br />Vyplňte formulár a my vás budeme kontaktovať.</p>
<form method="post" action="hypoteka-dakujeme.php" onsubmit="return kontrolaDat(this);">
<input type="text" name="email" placeholder="Emailová adresa" />
<input type="text" name="jmeno" placeholder="Vaše meno" />
<input type="text" name="telefon" placeholder="Kontaktný telefón" />
<input type="text" name="psc" placeholder="PSČ" />
<input type="submit" name="submit" value="Chcem najlepšiu hypotéku!" class="btn tlacitko" />
</form>
</div> <!-- End text -->

If you disable JavaScript no validation is done. Validate the form on the server side - in hypoteka-dakujeme.php before sending the email. You should never use client side validation only - it can be easily bypassed.

Please rephrase your question, you say in the title that the alerts in the form does not work, but then you say that the validation via JavaScript is working properly and the problem is that you get the email with no data.
So if the JavaScript works as expected .. focuses attention on the PHP that receives and processes the data sent.
I would start by adding the following code at the top of the file hypoteka-dakujeme.php
echo '<pre>';
print_r($_POST);
echo '</pre>';
die();
...then, you must debug the code to print on screen (for example) the information you expect to receive in the email.
If you get the information you expect, then send the email. If you still get an empty email... check the mail() function that you are using.
If need more help, please rephrase the question including relevant information.
Good luck any way.

jQuery If/else statement that adds text to DIV upon successful form submit

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.