时间戳

首页 > 解决方案 > 使用选定的 HTML 选项重新呈现表单

javascript - 使用选定的 HTML 选项重新呈现表单

问题描述

如果有任何错误，我有一个重新渲染的表单，并且它会使用任何有效的输入重新渲染。我还想用 <select> 元素中的选定选项重新呈现表单，但我很挣扎

// controller.js

(req, res, next) => {
   const errors = validationResult(req);

   if (!errors.isEmpty()) {
     
     res.render("quotes", {
       form: req.body,
       errors: errors.array(),
       yes: 'selected' 
     });
     return; 


// quotes.ejs

  <label for="propertyType">Type of Property</label> <br />
       <select name="propertyType">
         <option value="Building Lot">Building Lot</option>
         <option value="Condo - Appartment">Condo - Appartment</option>
         <option value="Co-op">Co-op (Owned)</option>
         <option value="Duplex">Duplex</option>
         // my poor solutions below
         <option selected value="<%= locals.form? form.propertyType : '' %>"><%= locals.form? form.propertyType : '' %></option>
         <option value="Single Family Home" <% if (locals.errors) { %>  selected="<%-  yes %>" <% } %>>Single Family Home</option>
       </select>

我最接近的解决方案在最后 2 个 < option > 标签中（我知道它们可能是糟糕的解决方案，这就是我在这里的原因）

任何帮助将不胜感激！谢谢 ：）

标签： javascripthtmlexpressejs

解决方案

最好的解决方案是通过 AJAX 请求发布您的 from。这样您就不会重新渲染页面，并且可以保留输入数据。

由于您选择了重新渲染选项，我能想到的最优雅的方式是通过客户端 javascript。
首先，在您的控制器函数中，返回选定的输入值

if (!errors.isEmpty()) {
     res.render("quotes", {
         selected: req.body.propertyType,       
         errors: errors.array()
     });
     ....

在quotes.ejs中，你只需添加一个小脚本

// html code
<label for="propertyType">Type of Property</label> <br />
<select name="propertyType">
    <option value="Building Lot">Building Lot</option>
    <option value="Condo - Appartment">Condo - Appartment</option>
    <option value="Co-op">Co-op (Owned)</option>
    <option value="Duplex">Duplex</option>
</select>
// html code

<% if (locals.errors) { %>
// the following will run only if errors exist
<script>
    var selectedInput = "<%= selected %>";
    var options = document.querySelector('[name="propertyType"]');
    for (var i = 0; i < options.length; i++) {
        if (selectedInput === options[i].value) {
            options[i].selected = 'selected';
            break;
        }
    }
</script>
<% } %>

如果出现任何呈现的错误，脚本将运行。它循环选择输入的选项，并检查选项值是否等于提交的值。如果为真，则选择该选项。

推荐阅读