Want to echo "Email sent!" in a specific div after form is submitted

Question

I'm implementing a contact-form to my website. When I click the "submit" button it sends me the email then redirects user to domain.com/mail.php and echoes "Email sent!" in a blank white page. Instead I want to have the user stay in index.html and have the "Email sent!" echoed inside <div class="alert-msg"></div>. Any help is appreciated!

contact.php:

<?php
if(isset( $_POST['fname']))
$name = $_POST['fname'];
if(isset( $_POST['email']))
$email = $_POST['email'];
if(isset( $_POST['subject']))
$subject = $_POST['subject'];
if(isset( $_POST['message']))
$message = $_POST['message'];

$content="Name: $name \n Email: $email \n Subject: $subject \n Message: $message";
$recipient = "myemail@domain.com";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $content, $mailheader) or die("Error!");
echo "Email sent!";
?>

index.html

<div class="contactcontainer">
  <form action="contact.php" method="POST" id="contact-form">

    <label for="fname">Full Name</label>
    <input type="text" id="fname" name="fname" placeholder="Your name" required>

    <label for="email">E-mail</label>
    <input type="text" id="email" name="email" placeholder="E-mail" required>

    <label for="email">Subject</label>
    <input type="text" id="subject" name="subject" placeholder="Subject" required>

    <label for="subject">Message</label>
    <textarea id="message" name="message" placeholder="Your message" style="height:200px" required></textarea>


    <button class="btn btn-outline-light text-uppercase" onclick="document.getElementById('contact-form').submit();" type="submit" name="submit" id="submit">submit</button>
    <div class="alert-msg"></div>

  </form>
</div>

Page After clicking submit: Email sent! in blank page with URL

Why would anything echo next to your button? The behavior you describe happening is exactly what I'd expect since you're not using AJAX or anything that would prevent the page from changing. — j08691, Sep 21 '20 at 14:43
What is the content of `contact.php`? Btw, there is mucho securito problemo in your snippet. No validation, much injection. — Daniel W., Sep 21 '20 at 14:45
I'm kind of a PHP newbie so sorry if it's already a bit silly. My goal here is to keep user on the same index.html page and echo "Email sent!" somewhere next to the submit button or within my contact form container. I've tried another working example and it seemed to work fine without any extra effort. I'd be happy if you can walk me through. — denozk, Sep 21 '20 at 14:45
Seems to be working as expected. When you submit a form, the browse gets redirected to the `action` page to run the script. Seems like you just need a redirect at the end. — GrumpyCrouton, Sep 21 '20 at 14:45
So do I redirect user back to index.html after script is executed and echo "Email sent!" there? How can I specify so it echoes inside my alert-msg div? — denozk, Sep 21 '20 at 14:47
Put the PHP script above on the same page as the HTML form. See below for answer. — SJacks, Sep 21 '20 at 15:56
First things first; the `mail` function is awkward. You really should use the excellent [PHPMailer](https://github.com/PHPMailer/PHPMailer) object instead. It will save you so much tedious error tracking.... — Martin, Sep 21 '20 at 16:11
to answer your question; You need AJAX. Please view the dupe below: — Martin, Sep 21 '20 at 16:13
Does this answer your question? [Sending email in PHP using AJAX](https://stackoverflow.com/questions/50086547/sending-email-in-php-using-ajax) — Martin, Sep 21 '20 at 16:13
Thanks for the input @Martin I don't have much experience with PHP nor AJAX so I'd need a bit more practice and reading to do on that. Thanks for the thread, I'll have a look at it! — denozk, Sep 21 '20 at 17:04

SJacks · Accepted Answer · 2020-09-21T16:18:29.273

-2

For the alert-msg to work the PHP needs to be above the html.

There's a lot wrong with this as you have no sanitization of post data leaving you wide open to attack.

Here are some suggestions for the PHP;

 <?php
 // You should santize input, examples below;
 // $data = strip_tags($data); - this removes tags like <a>
 // $data = trim($data); - this removes whitespace

 // New code
 $status = ""; // First set the alert-msg to a null/empty value so it's not shown before the form is submitted.

 // Listen for when the submit button is clicked
 if (isset($_POST['submit'])) {
 $name = $_POST['fname'];
 $email = $_POST['email'];
 $subject = $_POST['subject'];
 $message = $_POST['message'];

 // Now we have the post data and it has been sanitized we can check to make sure it isn't null/empty
 if ($name == "" || $email == "" || $subject == "" || $message == "") {

 // If any of these values are empty send the alert that email hasn't been sent
 $status = "Email not sent!";
 
 // If all values have some data, continue...
 } else {
 $content = "Name: $name \n Email: $email \n Subject: $subject \n Message: $message";
 $recipient = "myemail@domain.com";
 $mailheader = "From: $email \r\n";
 mail($recipient, $subject, $content, $mailheader) or die("Error!");

 // Set alert-msg value for success
 $status = "Email sent!";

 }
 }
 ?>

Change the HTML form by removing the action and include your PHP script above the HTML on the same page. With the submit button, remove the onclick part as you are using PHP to send the form directly and add a php value to the alert-msg div;

New HTML

 <form method="POST" id="contact-form">
 <button class="btn btn-outline-light text-uppercase" type="submit" name="submit" id="submit">submit</button>
 </form>
 <div class="alert-msg"><?php echo $status; ?></div>

I omitted the rest of the HTML you posted as it's okay.

edited Sep 21 '20 at 16:18

answered Sep 21 '20 at 15:45

SJacks

408
3
19

1

The original code does not use SQL, so why have you added out of date and unsafe SQL functions to this code? `preg_replace` is a far more relaible (if complex) alternative. – Martin Sep 21 '20 at 16:10
Hello and thank you for the answer. I'm getting the following error_log with the code `PHP Notice: Undefined variable: con in /home/e31pb61nfazj/public_html/deniz.world/index.php on line 13 PHP Warning: mysqli_real_escape_string() expects parameter 1 to be mysqli, null given in /home/e31pb61nfazj/public_html/deniz.world/index.php on line 13` applies for line 13, 14, 15, 16 – denozk Sep 21 '20 at 16:11
@denozk this is because you have copied and pasted the code. If you are using PHP you should have access to a MySQL database. $con is way you access that database. I'll edit the answer. – SJacks Sep 21 '20 at 16:17
@Martin the php functions I added are not unsafe at all. Without any sanitization it is unsafe. As for telling people to ignore answers, not cool. It is up to the OP whether they take advice or not. – SJacks Sep 21 '20 at 16:20
@denozk I have edited the code, it should work now with your setup but please santize your data! – SJacks Sep 21 '20 at 16:28
1

@SJacks thanks for the answer and tips. I have close to zero experience with PHP so I need to learn a bit more about it for sure. Code works perfectly fine, just one single question would be is there any way I can have the user stay at the footer of the page (where the form is located) after submit is pressed? I'm assuming that would be using header location to #footer section? – denozk Sep 21 '20 at 16:34
1

@SJacks, sorry but because you didn't know something is unsafe, doesn't make it safe by proxy. [Read here](https://stackoverflow.com/questions/5741187/sql-injection-that-gets-around-mysql-real-escape-string). Also, `strip_tags` is also an extremely unwise replacement function as that also is [fraught with errors](https://security.stackexchange.com/questions/10011/is-strip-tags-horribly-unsafe). You also do not need to remove HTML tags from a non-HTML email. AKA, use `preg_replace` to remove and to qualify quote marks – Martin Sep 21 '20 at 16:35
@denozk you could specify a div id and reload the page to that div after submitting the form but the div id has to have some content inside it for the screen to move to that location, however this will clear your email message alert text as the page reloads. If you have a footer on the page you could use the id of the footer. Try including this in your php after the success status before the last 2 curly braces: echo ""; #footer is just an example, change it to whatever you have on your page. – SJacks Sep 21 '20 at 16:59

Want to echo "Email sent!" in a specific div after form is submitted

1 Answers1