Sending JS variables to PHP mailer

Question

I have a JS script that validates data from a contact form. I need, once the entered values have been validated, to send the data to the PHP file that will send the email. The PHP works correctly (verified without the JS pre-submission validation process)

The JS:

// GET DATA
const nameInput = document.querySelector("#name");
const email = document.querySelector("#email");
const phone = document.querySelector("#phone");
const message = document.querySelector("#message");

//......

function sendEmail(){
    $.ajax({
       type: 'POST',
       url: 'sendmail.php',
       data: {
         'nameInput': nameInput,
          'email': email,
          'phone' : phone,
          'message' : message
       },
    });                   
}

The PHP:

<?php
    $toEmail = "mail@mail.com";
    $subject = "Message from Whatever"
    $mailHeaders = "From: " . $_POST["nameInput"] . "<". $_POST["email"] .">\r\n";

    
    if(mail($toEmail, $_POST["subject"], $_POST["message"], $mailHeaders)) {
    print "<p class='success'>Message Sent</p>";
    } else {
    print "<p class='Error'>Error! try again</p>";
    }
?>

The console says:

Uncaught ReferenceError: ajax is not defined at sendEmail (script.js:57:5)

57 $.ajax({

Maybe this will answer your question. https://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php — Kriss, Mar 21 '22 at 09:35
What is your question? Are you getting an error? If yes then post it. — emrdev, Mar 21 '22 at 09:51

score 0 · Answer 1 · answered Mar 21 '22 at 09:32

0

Why not use the default form submit functionality:

<form method="POST" action="path/to/sendmail.php">
  <label for="nameInput">Name:</label>
  <input type="text" id="nameInput" name="nameInput">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
 
  ...

  <input type="submit" value="Submit">
</form>

answered Mar 21 '22 at 09:32

Kriss

96
6

I am modifying with JS the style of the form when not entering data or when entering a badly formatted email. Also with JS I clean the form after submitting the data to the PHP file. It's a landing page. – Sergio Mar 21 '22 at 09:39

Selim Acar · Answer 2 · 2022-03-21T13:21:49.790

It seems, the jQuery library missing on that page. Make sure, that you load jQuery, before your javascript function sendEmail() is called. If you are sure, that jQuery is loaded. Then try one of these:

Your original code, cleaned up a little bit. I believe, there was an invisible character in your code, which disturbed the interpretation of your code. Maybe it was the space char between the apostrophe char after phone and the colon.

    function sendEmail(){
        $.ajax({
            type: 'POST',
            url: 'sendmail.php',
            data: {
                nameInput: nameInput,
                email: email,
                phone: phone,
                message: message
        });
    };

If it does not work, please put your function definition inside documentReady block:

$(document).ready(function(){
    function sendEmail(){
        $.ajax({
            type: 'POST',
            url: 'sendmail.php',
            data: {
                nameInput: nameInput,
                email: email,
                phone: phone,
                message: message
        });
    };
});

You can also try the shortcut version of your ajax call:

    function sendEmail(){
      $.post('sendmail.php',
        {
         nameInput: nameInput,
         email: email,
         phone: phone,
         message: message
       }
      );
    };

HINT: If you do not have any space or special char in your JSON object keys, you can omit the apostrophe around the keys.

Hello Selim. Iquery 3.2.1 is being loaded. I guess the problem is behind the keyboard. I need to sleep. — Sergio, Mar 21 '22 at 11:14
@Sergio :) If you are tired, it is always very helpful to make a break. I updated my answer. Please try it again and let me know if it work — Selim Acar, Mar 21 '22 at 13:42
It didn't work. I have had to use an older solution. Many thanks for your help. You are very kind, indeed. — Sergio, Mar 29 '22 at 05:43

Sending JS variables to PHP mailer

2 Answers2