如何解决使用选定的HTML选项重新渲染表单
我有一个表单,如果有任何错误,它将重新呈现,并以任何有效的输入重新呈现。我还想用
// 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>
我最近的解决方案位于最后两个
任何帮助将不胜感激!谢谢:)
解决方法
最好的解决方案是通过AJAX请求发布您的信息。这样,您就不会重新呈现页面,并且可以保留输入数据。
由于您选择了re-render选项,因此我能想到的最优雅的方法是通过客户端javascript。
Fisrt,在您的控制器功能内,返回选定的输入值
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>
<% } %>
该脚本将在出现任何错误的情况下运行。它循环选择输入的选项,并检查选项值是否等于提交的值。如果为true,则会选择该选项。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。