基于HTML/CSS/JS中以前的输入字段的新输入
基于HTML/CSS/JS中以前的输入字段的新输入
提问于 2017-08-07 23:41:42
我正在创建一个网站上，用户输入数据，然后它被提交到一个数据库，同时用户收到一封邮件。
<body>
<form method="post" action="">
<input id="input-3" name="change" type="text" placeholder="CHG000010333653" required autofocus style="text-transform:uppercase" pattern=^CHG[0-9]{12,12}$ title="The format should be in CHG000010333653 "/>
<label for="input-3">
<span class="label-text">Change Number</span>
<span class="nav-dot"></span>
<div class="signup-button-trigger">Begin</div>
</label>
<input id="input-4" name="waiver" type="checkbox" placeholder="Yes/No/NA" required pattern=([YESNOyesnoAa]){2,3} title="Input Should be Yes or No "/>
<label for="input-4">
<span class="label-text">Waiver ID Entered</span>
<span class="nav-dot"></span>
</label>
<input id="input-5" name="inc" type="text" placeholder="Yes/No" required pattern=([YESNOyesno]){2,3} title="Input Should be Yes or No " />
<label for="input-5">
<span class="label-text">INC/RITM Related</span>
<span class="nav-dot"></span>
</label>
<input id="input-6" name="environment" type="text" placeholder="Production/QA/Development" required pattern=([A-z]){2,11} title="Input Should be Production, QA or Development "/>
<label for="input-6">
<span class="label-text">Server Environment</span>
<span class="nav-dot"></span>
</label>
<input id="input-7" name="support" type="text" placeholder="Windows/Virtualisation/Storage" required pattern=([A-z]{4,11}+[lL0-9]{2,2}) title="Input Should as Windows L1 "/>
<label for="input-7">
<span class="label-text">Server Support Group</span>
<span class="nav-dot"></span>
</label>
<input id="input-8" name="attach" type="text" placeholder="Yes/No" required pattern=([YESNOyesno]){2,3} title="Input Should be Yes or No "/>
<label for="input-8">
<span class="label-text">Attachments Attached (Pre Implementation/Waiver/Required Mails)</span>
<span class="nav-dot"></span>
</label>
<input id="input-9" name="schedule" type="text" placeholder="Yes/No" required pattern=([YESNOyesno]){2,3} title="Input Should be Yes or No "/>
<label for="input-9">
<span class="label-text">Schedule is correct</span>
<span class="nav-dot"></span>
</label>
<input id="input-10" name="type" type="text" placeholder="Yes/No" required pattern=([YESNOyesno]){2,3} title="Input Should be Yes or No "/>
<label for="input-10">
<span class="label-text">Change Type Correct</span>
<span class="nav-dot"></span>
</label>
<input id="input-11" name="affect" type="text" placeholder="Yes/No" required pattern=([YESNOyesno]){2,3} title="Input Should be Yes or No "/>
<label for="input-11">
<span class="label-text">Affected CI's Entered</span>
<span class="nav-dot"></span>
</label>
<input id="input-12" name="risk" type="text" placeholder="Yes/No" required pattern=([YESNOyesno]){2,3} title="Input Should be Yes or No "/>
<label for="input-12">
<span class="label-text">Risk Assesment Correct</span>
<span class="nav-dot"></span>
</label>
<input id="input-13" name="ref" type="text" placeholder="Yes/No" required pattern=([YESNOyesno]){2,3} title="Input Should be Yes or No "/>
<label for="input-13">
<span class="label-text">Reference Change Correct</span>
<span class="nav-dot"></span>
</label>
<input id="input-14" name="priority" type="text" placeholder="Yes/No" required pattern=([YESNOyesno]){2,3} title="Input Should be Yes or No "/>
<label for="input-14">
<span class="label-text">Change Priority Correct</span>
<span class="nav-dot"></span>
</label>
<button type="submit">Submit Details</button>
<p class="tip">Press Tab</p>
<div class="signup-button">Begin</div>
</form>
<script>因此，如果input-4、input-5和input-14的input -4、input -5和input-7都不是"Yes“，那么我想要添加额外的输入(用于注释的文本输入)。我正在为UI使用CSS (这就是为什么由于设计的原因，我在将其更改为复选框/下拉菜单时犹豫不决)，该网站是使用IIS部署的。
那么有没有办法做到这一点呢？Submit按钮将数据提交到MS Access文件。
根据我的搜索，它可以(可能)通过JS完成，但我没有太多的经验，所以任何指南/帮助都将不胜感激。
Edit1:代码https://codepen.io/shwetanshu/pen/XgBLwW我的目标是，如果前4个输入域中有任何"yes“，那么第五个输入域应该是注释。否则就不会了。
回答 2
Stack Overflow用户
发布于 2017-08-07 23:50:03
您可以使用document.appendChild
var node = document.createElement("INPUT"); // Create a texte input node
var textnode = document.createTextNode("Water"); // Create a text node
node.appendChild(textnode); //Append the text to <li>
document.getElementById("myList").appendChild(node); // Append the text input to <ul> with id="myList"在这里，您可以在使用document.createElement("INPUT")创建文档之后向文档中添加一个javascript对象。您可以参考w3schools的文档。
您的代码可能如下所示：
function addTextField() {
var input_4 = document.getElementById("input-4");
var input_5 = document.getElementById("input-5");
var input_7 = document.getElementById("input-7");
var input_8 = document.getElementById("input-8");
var input_9 = document.getElementById("input-9");
var input_10 = document.getElementById("input-10");
var input_11 = document.getElementById("input-11");
var input_12 = document.getElementById("input-12");
var input_13 = document.getElementById("input-13");
var input_14 = document.getElementById("input-14");
if (/*YourCheck*/) {
var node = document.createElement("INPUT"); // Create a texte input node
var textnode = document.createTextNode("Water"); // Create a text node
node.appendChild(textnode); //Append the text to <li>
document.getElementById (/*A ID for your form*/).appendChild(node); // Append the text input to <ul> with a id for your form.
}
}注释您可以在代码中添加所需测试。您还必须向表单添加ID，然后将其放入代码中。
如果你有更多的问题请告诉我。
Stack Overflow用户
发布于 2017-08-08 01:00:39
您可以使用javascript来尝试这样的操作：https://jsfiddle.net/yqf5nf6h/3/
如果复选框已选中或未选中，则只需隐藏和显示元素。
// listen for click
input.addEventListener("click", function(e) {
// if comment is hidden we show otherwise we hide
if (comment.style.display === 'none') {
comment.style.display = 'inline';
}else{
comment.style.display = 'none';
}});希望这能有所帮助
如果您需要更多javascript信息，请查看https://www.w3schools.com/js/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45550840
复制相关文章
相似问题
腾讯云开发者
