0

I have a contact form on my website. And I sent its contents to me via email via php:

<?php
if(isset($_POST['submit'])){
    $to = "myemail@gmail.com";
    $from = $_POST['email'];
    $first_name = $_POST['firstname'];
    $subject = "Form submission";

    $message = $first_name . " wrote the following:" . "\n\n" . $_POST['message'];


    $headers = "From:" . $from;
    mail($to,$subject,$message,$headers);
    }
?>

This works. However, I don't want my page to be reloaded etc., so before I had the php code in there, I just coded the UI with javascript: It clears the fields, and it shows a notification saying Thanks for your message, etc. :

$("#contact_form").submit(function(e) {
    e.preventDefault();

    iziToast.success({
        title: 'Thank you',
        message: 'Thanks for your message',
    });

    this.reset(); //clear form input fields
  });

HOWEVER:

The two don't seem to work together. I am doing prevent.default because I want to avoid a page reload, and I am doing a this.reset in order to reset the form and empty everything out again.

How could I make these two work together? That is, i want to send the email via php, but I also want to javascript to display the notification, clear the input fields, and not reload the page.

PS: The php is in the same file as the HTML. The javascript file is referenced via a script tag. Just in case that's important.

George Welder
  • 3,787
  • 11
  • 39
  • 75
  • The default action of a submit event is to *submit the form*. Loading a new page is a *side effect* of that. Preventing the default action prevents *the form submission*! – Quentin Jul 03 '17 at 10:30
  • Thanks, that's exactly what I'm saying though. How could I solve this? – George Welder Jul 03 '17 at 10:36

0 Answers0