基于 HTML/CSS/JS 中先前输入字段的新输入答案

【问题标题】：New Input based on previous input field in HTML/CSS/JS基于 HTML/CSS/JS 中先前输入字段的新输入
【发布时间】：2017-08-07 15: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>

如果输入 4、input-5 和 input-7 到 input-14 的任何输入不是“是”，我想添加一个额外的输入（cmets 的文本输入）。我正在为 UI 使用 CSS（这就是为什么由于设计原因我犹豫将其更改为复选框/下拉菜单的原因）并且该站点是使用 IIS 部署的。

那么有没有办法做到这一点？提交按钮将数据提交到 MS Access 文件。

根据我的搜索，它可以（可能）通过 JS 完成，但我没有太多经验，所以任何指南/帮助将不胜感激。

Edit1：代码https://codepen.io/shwetanshu/pen/XgBLwW 我的目标是，如果前 4 个输入字段中有任何“是”，那么第五个应该作为 cmets 出现。否则不行。

【问题讨论】：

好吧，如果你想学习它，你遇到的问题是一个非常好的 JS 入门。恕我直言，您可以从学习 jQuery 基础开始。
好吧，我知道我无法避免 JS。所以，是的，这将是一个很好的起点。我会调查的。

标签： javascript jquery html css forms

【解决方案1】：

你可以使用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，然后将其放入代码中。

如果您还有其他问题，请告诉我。

【讨论】：

OK 所以在我得到所有输入之后，直到 input-14。我希望它运行。所以我创建了一个 JS 函数。它检查我需要检查的所有输入。然后如果条件成功，那么我执行它来创建一个新表单。这是正确的方法吗？
我更新了我的答案。你刚刚好。但是，您不会创建新表单，而只是在其中添加一个元素。
哇，非常感谢。而我的不好，而不是称它为一个元素。
codepen.io/shwetanshu/pen/XgBLwW 这是我现在的代码。因此，如果在任何字段中有一个是，我想添加一个额外的评论。我认为由于 CSS 转换，这将非常困难（或不可能？）
它是分叉的，不是我的。试图为 Intranet 实现它。（到期信用将根据 GPL 给予）。你知道如何在 CSS 中实现下一个过渡吗？

【解决方案2】：

您可以使用 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/

【讨论】：

我正在为 UI 使用 CSS（这就是为什么我因为设计原因而犹豫将其更改为复选框/下拉菜单的原因）。这是代码codepen.io/shwetanshu/pen/XgBLwW