Node Js + JS input = document.getElementById

Question

There is a node JS script (app.js) for sending a letter to the mailbox:

const { response } = require("express");
const express = require("express");
const nodemailer = require("nodemailer");
const app = express();
const port = 5000;

//
function sendEmail(tel) {
  return new Promise((resolve, reject) => {
    var tranporter = nodemailer.createTransport({
      service: "gmail",
      auth: {
        user: ,
        pass: ,
      },
    });
    const mail_configs = {
      from: "myEmail",
      to: "artemdvd@mail.ru",
      subject: "Testing Koding 101 Email",
      text: "tel",
    };
    tranporter.sendMail(mail_configs, function (error, info) {
      if (error) {
        console.log(error);
        return reject({ message: "An error has occured" });
      }
      return resolve({ message: "Email sent succesfuly" });
    });
  });
}

app.get("/", (req, res) => {
  sendEmail()
    .then((response) => res.send(response.message))
    .catch((error) => res.status(500).send(error.message));
});

app.listen(port, () => {
  console.log(`nodemailerProject is listening at http://localhost:${port}`);
});

I have a button in other js file which runs this js script and sends an email when I press the button:

let input = document.getElementById("phonenumber");

head.addEventListener("click", function () {
  fetch("http://localhost:5000/")
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.error(error));
});

The html file has an input field for a text message

<input id="phonenumber" class="text-order" type="text"
        placeholder="___________"'/>

How can I email this input value when a button is pressed?

Answer 1

Fetch API Accepts the second parameter, an options object. This is where you pass input. In your case you need to capture the value of the input. So if you have:

let input = document.getElementById("Phone Number");

Then you should be able to access the value using input.value. If you send it in the body property of the options object, it should appear in the request body on the server.

Things like this:

fetch("http://localhost:5000/", {
  body: JSON.stringify(input.value)
})

I noticed that you are also listening for clicks on another element (head). If this is the case, then you may want to use an onChange handler on the input that stores the value somewhere locally. Then when the user clicks on another element you can pass that into the get options.

Here is a syntax example for sending options (borrowed from the documentation I shared above), demonstrating the different options it will accept:

// Example POST method implementation:
async function postData(url = '', data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data) // body data type must match "Content-Type" header
  });
  return response.json(); // parses JSON response into native JavaScript objects
}

postData('https://example.com/answer', { answer: 42 })
  .then((data) => {
    console.log(data); // JSON data parsed by `data.json()` call
  });