Question

我的客户端应该进行一种验证，获取用户在提交表单时单击的元素。我的服务器端应该将这些元素放在数据库上，并更改填充数据库中任何受尊重字段的元素的类。

我怎样才能取一段：

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

并在我的服务器中接收这个数组来验证元素？我正在尝试使用隐藏输入通过帖子获取此信息，但没有成功。

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

您已经有以下隐藏输入，请更新它

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

值与 <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>';
};

是否可以将值从段落发送到服务器？

1 个答案: