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({
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>
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.