Send email without page refresh PHP AJAX. The email.php sends email action is in HTML

Question

I want to send it with AJAX. Where am I going wrong with this? The error I get is:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.send @ jquery.min.js:4

$(document).ready(function() {
  $("#submit-email").click(function(event) {
    var email = document.getElementById('mail').value;
    var message = document.getElementById('message').value;
    var dataString = {
      "mail": email,
      "message": message
    }

    $.ajax({
      type: "post",
      url: "controller/email.php",
      data: dataString,
      success: function(html) {
        alert('Success!');
      }
    });
    event.preventDefault();
  });
});

<form>
  <input type="email" name="mail" id="mail" required="required" class="form" placeholder="Email" />
  <input type="hidden" name="message" id="message" value="test value" />
  <button type="submit" id="submit-email" name="submit" class="submit-email">Send Message</button>
</form>

<?php

if(isset($_POST['submit']) ){ 

$youremail = 'hello@blahblah.net';   
$user_email = $_POST['mail'];
$message = $_POST['message'];

$and = 'blahblah.net';
$body = "You requested we email the following to you: $message. Regards, Team";

$headers = "From: $youremail"; 

mail($user_email, 'blahblah.net', $body, $headers ); 

}

$newURL = '../index-open.php';
header('Location: '.$newURL);


?>

Are you saying the page refreshes? Because it won't given the JS in your question (due to `event.preventDefault()`). Also, that error has nothing to do with the code shown as it's warning about a synchronous request, yet the code you're using is async - unless you've set `async: false` in a global AJAX setting, in which case just remove that property. — Rory McCrossan, Jan 29 '20 at 13:56
@Rory McCrossan I did not touch the ajax settings and I believe by default is true. Any idea how to check this? It does not refresh since editing it with Zeeshan's suggestion. — technicalDifficulties, Jan 29 '20 at 14:15

score 0 · Accepted Answer · answered Jan 29 '20 at 14:06

0

Try this:

It may help.

$(document).ready(function() {
  $("form").submit(function(e) {
    e.preventDefault();
    var email = document.getElementById('mail').value;
    var message = document.getElementById('message').value;
    var dataString = {
      "mail": email,
      "message": message
    }

    $.ajax({
      type: "post",
      url: "controller/email.php",
      data: dataString,
      success: function(html) {
        alert('Success!');
      }
    });

  });
});

answered Jan 29 '20 at 14:06

Zeeshan Eqbal

245
2
11

thanks, although it does not send the email, it does show the alert. – technicalDifficulties Jan 29 '20 at 14:16
1

In which case your JS is sending the request correctly and the issue is now in your `email.php` file. You need to debug that – Rory McCrossan Jan 29 '20 at 14:21
Oh so I'm just using the mail() in php `` – technicalDifficulties Jan 29 '20 at 14:34
@technicalDifficulties The`$_POST` variable is an associative array and you need to access its properties with a string, ie add quotes: `$_POST['mail']` and `$_POST['message']`. – Quangdao Nguyen Jan 29 '20 at 14:50
@Quangdao Nguyen thanks, I have changed and edits the post. Did not even notice because with the HTML form it send. For some reason its still not sending by Ajax though. – technicalDifficulties Jan 29 '20 at 14:59
Try this mail.php code: ------------------------ – Zeeshan Eqbal Jan 30 '20 at 14:11

Send email without page refresh PHP AJAX. The email.php sends email action is in HTML

1 Answers1

Try this: