javascript - 仅当 div 未隐藏时才需要在表单中输入以发送电子邮件
问题描述
我目前有一个具有许多不同输入的表单。有两组单选按钮,当它们被选中时,会显示两个不同的 div 以及所需的输入。问题是,在提供所有必需的输入之前,我无法发送电子邮件,即使是未显示的输入也是如此。我已经修复了第一次出现的名称=(tick),但不知道如何在通过选择单选按钮(选项)显示 div 时仅显示(要求)所需的消息。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/[jquery version here]/jquery.min.js"
language="javascript" type="text/javascript"></script>
<title>Test</title>
<style type="text/css">
body {
padding: 80px;
}
#requirements {
width: 100%;
}
#results {
width: 100%;
}
</style>
<script type="text/javascript">
// DISPLAY HIDDEN TEXT
function hide() {
document.getElementById('hidden').style.display ='none';
}
function show() {
document.getElementById('hidden').style.display = 'block';
}
function hidetext() {
document.getElementById('hiddentwo').style.display = 'none';
}
function showtext() {
document.getElementById('hiddentwo').style.display = 'block';
}
function validateForm(e) {
let inp=[...document.getElementsByName("tick")];
if(!inp.some(i=>i.checked) && chk.checked) {
e.preventDefault();
alert('You must select why you are attending!');
}
}
</script>
</head>
<body>
<h1>Registration Request</h1>
<form id="form" method="post" name="form" enctype="multipart/form-data" action="#">
<p>This course is identified in my Work Plan and Learning Agreement</p>
<input type="radio" name="optionOne" value="yes" onclick="hide()" required> Yes<br>
<input type="radio" id="chk" name="optionOne" value="no" onclick="show()"> No<br>
<div id="optionOne_error" class="val_error"></div>
<p>
<div id="hidden" style="display: none">
<p>I am attending this session because (tick all that apply) </p>
<input type="checkbox" name="tick" value="It will help me develop the skills and knowledge required for my current role" > It will help me develop the skills and knowledge required for my current role<br>
<input type="checkbox" name="tick" value="It will help me develop the skills and knowledge for a possible future role/body of work" > It will help me develop the skills and knowledge for a possible future role/body of work <br>
<input type="checkbox" name="tick" value="t was identified as a need during my performance management discussions"> It was identified as a need during my performance management discussions<br>
<input type="checkbox" name="tick" value="My manager recommended that I attend"> My manager recommended that I attend<br>
<input type="checkbox" name="tick" value="I am interested in the content"> I am interested in the content<br>
<p>
<div id="tick_error" class="val_error"></div>
<p>What would you like to achieve as a result of your attendance? For example, "I would like to learn to write better emails to improve my communication skills." </p>
<input type="text" id="results" name="results">
</div>
<p>Do you require adjustments or additions to the session delivery to support your participation? For example, hearing loop or wheelchair access.</p>
<input type="radio" name="option" value="yes" onclick="showtext()" required> Yes<br>
<input type="radio" name="option" value="no" onclick="hidetext()"> No<br>
<div id="option_error" class="val_error"></div>
<div id="hiddentwo" style="display: none;">
<p>Please provide details of your requirments.</p>
<input type="text" id="requirements" name="requirements" required >
</div>
<p>Please upload any supporting documentation to support your registration request </p>
<div class="browse-button">
<input type="file" name="attachments[]" multiple="multiple"></input>
</div>
<div class="submit-button">
<button type="submit" name="submit" onclick="validateForm(event)" onclick="validateFormTxt(event)" value="submit">Submit</button>
</div>
</form>
<img src="Logo.png" alt="Persuit Technology Logo" width="110" style="margin-top: 20px">
</body>
</html>
解决方案
也许您可以创建一个“非活动”选项,该选项在选择选择B时在选择A上填充。例如:
<input style="display: none;" type="checkbox" name="tick" value="inactive">
然后(伪代码):
when ( input A :selected ) { activate( input B "inactive" ) }
反之亦然。这应该允许您过滤掉不活动的表单字段,并允许用户在需要所有可见和不可见字段的情况下提交表单——而他们无法选择空选项。
推荐阅读
- jsp - 哪个 jstl 版本与 servlet 3.1 兼容?
- swiftui - SwiftUI 3.0 XCode13 B3 执行LocationButton会导致Error Domain=kCLErrorDomain Code=1 "(null)
- selenium - 如何让chrome驱动下载多个文件-selenium
- java - 如何尽快在锁列表中获取锁?
- python - 抓取网站时访问变量
- java - 尽管节点似乎同意,Split Brain Condition 不会在 4.2.1 的 kubernetes 环境中合并
- sql - 计算行之间的百分比差异/方差 - SQL
- java - 在android studio中删除一个带有按钮的listview项目
- javascript - 向 youtube 添加元素
- python - 用于 Pandas UDF 的 PySpark 加载包