As with everything I have experienced in programming, I am sure this is an easy fix and just an issue with syntax somewhere but I have been trying to get this to work for way too long.
I have created a contact form in a contact.html page. I have found many examples of how to save data from a form into a file (JSON format) but something is off in my code somewhere. This is my first experience with anything outside of Python and I'm not great with it either.
I have tried to use:
<form id="contactForm" method="POST" action="contact">
and in my index.js file I have many variations of this but the most recent being:
app.post('/contact.html', (req, res) => {
return res.send(req.body);
console.log('Data: ', req.body,first);
});
I currently have a script, addData.js, which saves the form data in localStorage. I can see it when I look in a browser at Developer Tools > Application > Local Storage.
function onSubmit() {
var contactData = [];
var fName = document.getElementById("first").value;
var lName = document.getElementById("last").value;
var adDre = document.getElementById("address").value;
var pho = document.getElementById("phone").value;
var eMail = document.getElementById("email").value;
var webSite = document.getElementById("website").value;
var comm = document.getElementById("comments").value;
var stuObj = {first:fName, last:lName, address:adDre, phone:pho, email:eMail, website:webSite, comments:comm};
localStorage.contactRecord = JSON.stringify(stuObj);
// console.log(localStorage.contactRecord);
var jsonString = localStorage.getItem("contactRecord");
var retrieveObject = JSON.parse(jsonString);
// console.log(retrieveObject.email);
return retrieveObject.email;
}
I made a different script in my "scripts" folder and can call the data from the above script using:
var returnEmail=onSubmit();
console.log(returnEmail);
I am trying to access it from my index.js which is in my root folder to use NodeMailer. The point is to get the name and e-mail address of someone who fills the form to send a "Thank you" e-mail after they submit the form.
Please be easy on me. This is my first question and I am sure I did something wrong when posting this. I have made an effort to find the answer myself but haven't found anything which matched what I am doing or could relate it to what I am trying to do.
Here is a copy of my index.js file:
const express = require('express');
const http = require('http');
const fs = require('fs');
const url = require('url');
const nodemailer = require('nodemailer');
const path = require('path');
const bodyParser = require('body-parser');
const app = express();
app.use(express.static(__dirname));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));
app.use('/static', express.static(path.join(__dirname, 'public')));
app.use(express.static('pages'));
app.use('/static', express.static(path.join(__dirname, 'pages')));
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/index.htm'));
// res.sendFile(path.join(__dirname + '/pages/contact.html'));
});
const port = process.env.PORT || 3000;
app.listen(port, () => {
// console.log("Hello World");
});
var jsonParser = bodyParser.json();
var urlencodedParser = bodyParser.urlencoded({extended: false});
app.post('/contact', (req, res) => {
return res.send(req.body);
console.log('Data: ', req.body.first);
});
Your action should be:
<form id="contactForm" method="POST" action="/contact">
Since it appears that you are using urlencoded as your enctype (thats the default) make sure you are using something to parse it as well (server side).
You can add this (above app.post) (npm install body-parser)
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: true }))
Your post on your nodejs server needs to match your action:
app.post('/contact', (req, res) => {
console.log('Data: ', req.query.first);
return res.send(req.query);
});