Is that possible to send the value from a paragraph to server?

Question

My client-side should does a kind of validation, taking elements that user clicked when a form is submitted. My server-side should put those elements on Databases and change the class of the elements that is any of the respected field of the databases is filled.

How can I take one paragraph:

<p id="selectedNumbers"></p>

And receive this array inside my server for this validation of elements? I'm trying to get this information via post using hidden input but didn't went right.

 const express = require("express"); const bodyParser = require("body-parser"); const $ = require("jquery"); const app = express(); const customers = []; app.use(bodyParser.urlencoded({extended: true})); app.use(express.static("public")); app.get("/", function(req, res) { res.render("home"); }); app.get("/file", function(req, res) { res.render("file"); }); app.post("/file", function(req, res) { const customer = { Name: req.body.customerName, Numbers: req.body.selectedNumbers }; res.redirect("/file"); customers.push(customer); console.log(customer); }); app.listen(3000, function(){ console.log("Server on http://localhost:3000"); });

 .lista ul li { display: inline; }.lista ul li a { display: block; border: 2px solid #bfc0bf; border-radius: 50%; width: 100%; line-height: 40px; max-width: 75px; height: auto; font-weight: 700; text-decoration: none; display: inline; box-sizing: border-box; padding: 20px; font-family: sans-serif; font-size: 13px; color: #ffffff; background-color:rgb(85, 161, 108); border-color: #212529; margin-right: 50px; }.lista ul li a:hover { color: #212529; background-color: #ffffff; font:bolder; transition: all 600ms ease; }.lista ul li a.active { background-color: #f90; }

 <div class="lista"> <ul > <li> <a href="#007" id="007" class="btn_reservas" >007</a> </li> <li> <a href="#008" id="008" class="btn_reservas" >008</a> </li> <li> <a href="#009" id="009" class="btn_reservas" >009</a> </li> <li> <a href="#010" id="010" class="btn_reservas" >010</a> </li> </ul> <form name="" action="/file" method="post" class="form-container"> <p id="selectedNumbers"></p> <p id="price"></p> <div class="form-group"> <label for="">Name</label> <input class="form-control" type="text" name="customerName"> </div> <input type="hidden" name="selectedNumbers" value=""></input> <button class="btn btn-primary" type="submit" name="button">Publish</button> </form> <script> function calcSum(){ toggled = document.querySelectorAll(".btn_reservas.active"); selected =[]; total = 0; toggled.forEach(function(el){ selected.push(el.getAttribute("id")); total += parseInt(40); }); document.getElementById("selectedNumbers").innerHTML = 'Selected Numbers: <b>' + selected.join(", ") +'</b>'; document.getElementById("price").innerHTML = 'Total: R$: <b>' + total + ',00 </b>'; }; const addItem = function(event) { event.target.classList.toggle("active"); calcSum(); }; document.querySelectorAll(".btn_reservas").forEach(function() { this.addEventListener("click", addItem); }); </script>

Answer 1

you already have the following hidden input, update it

<input type="hidden" name="selectedNumbers" value=""></input>

with value same with <p id="selectedNumbers"></p>

function calcSum() {
  toggled = document.querySelectorAll(".btn_reservas.active");
  selected = [];
  total = 0;
  toggled.forEach(function (el) {
    selected.push(el.getAttribute("id"));
    total += parseInt(40);
  });

  // add the following line
  document.querySelector('[name="selectedNumbers"]').value = selected.join(","); 

  document.getElementById("selectedNumbers").innerHTML = 'Selected Numbers: <b>' + selected.join(", ") + '</b>';
  document.getElementById("price").innerHTML = 'Total: R$: <b>' + total + ',00 </b>';
};