Please bare with me as I am new to web programming and have spent a long time trying to figure this out on my own. I am using node.js with express and am attempting to send data from my client to the server in order to send an email from a “Contact Me” page.
My simple test html form is this:
<form action="email" method="POST" class="contact-form">
<input type="text" id="name" placeholder="Your Name" value="Test">
<input type="email" id="email" placeholder="Your Email" value="Bob@bob.com">
<input type="text" id="subject" placeholder="Subject" value="Subject of Email">
<textarea cols="30" rows="7" id="message" placeholder="Message" >I was here.</textarea>
<input type="submit" value="Send Message" class="submit">
</form>
This is the code for my server using XMLHttpRequest:
const contactForm = document.querySelector(".contact-form");
let name = document.getElementById("name");
let email = document.getElementById("email");
let subject = document.getElementById("subject");
let message = document.getElementById("message");
contactForm.addEventListener("submit", (e) => {
e.preventDefault();
let formData = {
name: name.value,
email: email.value,
subject: subject.value,
message: message.value
}
let xhr = new XMLHttpRequest();
xhr.open("POST", "/");
xhr.setRequestHeader("content-type", "application/json");
xhr.onload = function() {
console.log(xhr.responseText); //This never runs
if(xhr.responseText == "success") {
alert("Email sent"); //this never fires
name.value = "";
email.value = "";
subject.value = "";
message.value = "";
} else {
alert("Something went wrong!"); //nor does this
}
console.log(xhr.statusText); //nor does this
xhr.send(JSON.stringify(formData));
}
});
I also have the exact same thing using ajax here.
const contactForm = document.querySelector(".contact-form");
let name = document.getElementById("name");
let email = document.getElementById("email");
let subject = document.getElementById("subject");
let message = document.getElementById("message");
contactForm.addEventListener("submit", (e) => {
e.preventDefault();
let formData = {
name: name.value,
email: email.value,
subject: subject.value,
message: message.value
}
$.ajax({
type: 'POST',
url: "/",
contentType: "application/json; charset=utf-8",
datatype: 'json',
data: formData,
success: function (response) {
console.log(response);
},
error: function(error) {
console.log("error");
}
});
});
For both cases, my server side code is this:
const express = require("express");
const app = express();
const PORT = process.env.PORT || 3000;
//Middleware
app.use(express.static("public"));
app.get("/", function(req, res) {
//send html file. Do this so that other code can run.
res.sendFile(__dirname + "/contactform.html");
});
app.post("/", function(req, res) {
var data = JSON.parse(req.body)
console.log(data);
});
app.listen(PORT, function(req, res) {
console.log('Listening on port ${PORT}');
});
My XMLHttpRequest version does not run the onload code. The ajax version returns a 500 internal server error and the data sent is undefined.
Any help would be appreciated.
