My goal is to set up email functionality on my website. However, I am encountering an issue where the message returns as undefined when logged in the console. I am struggling to determine what information the server is receiving, as all attempts to log the data from the server also return as undefined. While I typically use XMLHttpRequest, I am now trying to implement $.ajax but unsure if I am doing it correctly. The front-end code looks like this:
$(function () {
$("#contactForm input,#contactForm textarea").jqBootstrapValidation({
preventSubmit: true,
submitError: function ($form, event, errors) {
// additional error messages or events
},
submitSuccess: function ($form, event) {
event.preventDefault();
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
var message = $("textarea#message").val();
var firstName = name;
if (firstName.indexOf(' ') >= 0) {
firstName = name.split(' ').slice(0, -1).join(' ');
}
$.ajax({
url: "mail",
type: "POST",
datatype: "json",
data: {
name: name,
phone: phone,
email: email,
message: message
},
cache: false,
success: function () {
$('#success').html("<div class='alert alert-success'>");
$('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#success > .alert-success')
.append("<strong>Your message has been sent. </strong>");
$('#success > .alert-success')
.append('</div>');
$('#contactForm').trigger("reset");
},
error: function () {
$('#success').html("<div class='alert alert-danger'>");
$('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");
$('#success > .alert-danger').append('</div>');
$('#contactForm').trigger("reset");
},
})
},
filter: function () {
return $(this).is(":visible");
},
});
$("a[data-toggle=\"tab\"]").click(function (e) {
e.preventDefault();
$(this).tab("show");
});
});
$('#name').focus(function () {
$('#success').html('');
});
The back-end code is as follows:
var express = require('express');
var mail = express.Router();
var bodyParser = require('body-parser');
var jsonParser = bodyParser.json();
var mandrill = require('mandrill-api/mandrill');
var config = require('../mailkey.js');
var mandrill_client = new mandrill.Mandrill(config.key);
mail.post('/mail', jsonParser, function (req, res) {
var message = {
"html": "<p>" + req.body.message + "</p>",
"subject": "*You have received a message from someone*",
"from_email": config.from,
"from_name": req.body.name,
"to": [{
"email": config.from,
"name": config.name,
"type": "to"
}],
"headers": {
"Reply-To": req.body.email
},
"metadata": {
"phone": req.body.phone
}
};
console.log(message);
var async = false;
var ip_pool = null;
var send_at = null;
mandrill_client.messages.send({ "message": message, "async": async, "ip_pool": ip_pool, "send_at": send_at }, function (result) {
res.sendStatus(200);
}, function (e) {
res.sendStatus(500);
console.log('An error occurred sending the mail: ' + e.name + ' - ' + e.message);
});
});
module.exports = mail;