Как получить данные из формы html

Question

Как и все, что я испытал в программировании, я уверен, что это простое решение и просто проблема с синтаксисом где-то, но я слишком долго пытался заставить это работать.

У меня есть создал контактную форму на странице контактов. html. Я нашел много примеров того, как сохранять данные из формы в файл (формат JSON), но где-то в моем коде что-то не так. Это мой первый опыт работы с чем-либо, кроме Python, и я тоже не очень хорош в этом.

Я пробовал использовать:

<form id="contactForm" method="POST" action="contact">

и в моем индексе. js file У меня есть много вариантов этого, но самый последний из них:

app.post('/contact.html', (req, res) => {
return res.send(req.body);
console.log('Data: ', req.body,first);
});

В настоящее время у меня есть сценарий addData. js, который сохраняет данные формы в localStorage. Я вижу это, когда смотрю в браузере на Инструменты разработчика> Приложение> Локальное хранилище.

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;
}

Я создал другой сценарий в своей папке «сценарии» и могу вызывать данные из приведенного выше сценария, используя:

  var returnEmail=onSubmit();
  console.log(returnEmail);

Я пытаюсь получить к нему доступ из моего индекса. js который находится в моей root папке, чтобы использовать NodeMailer. Дело в том, чтобы получить имя и адрес электронной почты человека, который заполняет форму, чтобы отправить электронное письмо с благодарностью после отправки формы.

Пожалуйста, будьте спокойны. Это мой первый вопрос, и я уверен, что сделал что-то не так при публикации. Я попытался сам найти ответ, но не нашел ничего, что соответствовало бы тому, что я делаю, или могло бы связать это с тем, что я пытаюсь сделать.

Вот копия моего индекса. js файл:

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);
});

Answer 1

Ваше действие должно быть:

<form id="contactForm" method="POST" action="/contact">

Поскольку кажется, что вы используете urlencoded в качестве enctype (это значение по умолчанию), убедитесь, что вы также используете что-то для его анализа (на стороне сервера).

Вы можете добавить это (выше app.post) (npm install body-parser)

const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: true }))

Ваш пост на вашем nodejs сервере должен соответствовать вашему действию:

app.post('/contact', (req, res) => {
    console.log('Data: ', req.query.first);
    return res.send(req.query);
});