javascript - 根据是否显示使 HTML 输入成为必需
问题描述
我在用户标记状态的表单上有一个部分,如果用户将状态标记为“已归档”,它将显示一个 div(使用 Javascript)并询问原因。如何使此框成为必需但仅在显示的情况下?例如,如果用户选择了另一个不是“已归档”的状态,则不需要该框。
选择状态
function admSelectCheck(nameSelect) {
console.log(nameSelect);
if (nameSelect) {
admOptionValue = document.getElementById("admOption").value;
if (admOptionValue == nameSelect.value) {
document.getElementById("admDivCheck").style.display = "block";
} else {
document.getElementById("admDivCheck").style.display = "none";
}
} else {
document.getElementById("admDivCheck").style.display = "none";
}
}
<div class="input-field col s12 m6">
<select name="fdstatus" onchange="admSelectCheck(this);">
<option value="<?= $cst['cst_status']; ?>" selected>
<?= $cst['cst_status']; ?>
</option>
<option value="Prospect">Prospect</option>
<option value="Appointment Booked">Appointment Booked</option>
<option value="Test Drive Booked">Test Drive Booked</option>
<option value="Proposal Offered">Proposal Offered</option>
<option id="admOption" value="Archived">Archived</option>
<option value="Deal Won">Deal Won</option>
<option value="Deal Lost">Deal Lost</option>
</select>
<label>Customer Status</label>
</div>
<!-- If 'Archive' show -->
<div id="admDivCheck" style="display:none;" class="row">
<div class="input-field col s12 m6">
<input name="fdstatusArchiveR" id="fdstatusArchiveR" type="text" class="validate">
<label for="fdstatusArchiveR">Reason for archive</label>
</div>
解决方案
我在 div 中添加了一个隐藏类,在 select 中添加了一个 ID,并按照建议删除了内联事件处理程序。
脚本遵循 DRY 原则(不要重复自己)
document.getElementById("fdstatus").addEventListener("change", function() {
const val = this.value; // select value
const admOptionValue = document.getElementById("admOption").value; // option value of ID
const show = val === admOptionValue; // boolean
document.getElementById("admDivCheck").classList.toggle("hide", !show);
document.getElementById("fdstatusArchiveR").required = show;
});
.hide {
display: none;
}
<form>
<div class="input-field col s12 m6">
<select name="fdstatus" id="fdstatus">
<option value="" selected>Please select</option>
<option value="Prospect">Prospect</option>
<option value="Appointment Booked">Appointment Booked</option>
<option value="Test Drive Booked">Test Drive Booked</option>
<option value="Proposal Offered">Proposal Offered</option>
<option id="admOption" value="Archived">Archived</option>
<option value="Deal Won">Deal Won</option>
<option value="Deal Lost">Deal Lost</option>
</select>
<label>Customer Status</label>
</div>
<!-- If 'Archive' show -->
<div id="admDivCheck" class="row hide">
<div class="input-field col s12 m6">
<input name="fdstatusArchiveR" id="fdstatusArchiveR" type="text" class="validate">
<label for="fdstatusArchiveR">Reason for archive</label>
</div>
</div>
<input type="submit" value="Test if required" />
</form>
推荐阅读
- typescript - 如何消除从模块内访问的所有全局类型
- docker - 每个分支的 Docker 映像效率低下
- python - 在部署在 heroku 上的 Django admin 中显示名称
- angular - 如何最好地将子组件的输出视为流
- javascript - 我们能否总是让来自浏览器/前端的 ajax 请求失败?
- javascript - Nodejs:Messenger广播消息不起作用
- c# - 不要在 Web 浏览器 c# 中运行 JS
- java - 在 Spring Boot 中的辅助数据库上创建表
- powershell - 使用 PowerShell 编辑 index.html 后出现此消息的原因是什么?
- javascript - 通过相同的属性合并两个数组,带有异常值,Javascript