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

我正在创建一个网站，用户在该网站上输入数据，然后将其提交给数据库，同时用户收到邮件。基于HTML/CSS/JS中先前输入字段的新输入

<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，输入5，和输入7输入-14 。我正在使用用于UI的CSS（这是为什么我由于设计而将其更改为复选框/下拉菜单的原因），并且使用IIS部署了该网站。

那么无论如何要做到这一点？提交按钮将数据提交给MS Access文件。

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

编辑1：代码https://codepen.io/shwetanshu/pen/XgBLwW 我的目标是，如果前4个输入字段中有任何“是”，那么第五个应该是注释。否则不是。使用document.createElement("INPUT")创建后

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"

在这里你添加一个JavaScript对象到您的文档：

来源

2017-08-07 Anti21

好了，你有问题，是一个非常好的介绍给JS，如果你想了解它。你可以开始学习jQuery基础恕我直言。 – Keloo

我知道我无法避免JS。所以这是一个很好的起点。我会仔细看看的。 – Anti21

您可以使用document.appendChild。您可以查阅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到你的表单，然后把它放在代码中。

如果您有更多问题，请告诉我。

来源

2017-08-07 15:50:03

OK所以我得到所有的输入，直到输入-14。我希望这个运行。所以我创建了一个JS函数。它检查我需要检查的所有输入。然后，如果条件成功，那么我执行这个来创建一个新的表单。这是正确的方法吗？ – Anti21

我更新我的答案。你是对的。但是，您不需要创建新表单，只需添加一个元素即可。 –

哇，非常感谢。而我的糟糕而不是称它为一个叫它的元素。 – Anti21

你可以尝试这样使用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/

来源

2017-08-07 17:00:39

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

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

回答

相关问题