基於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中先前輸入字段的新輸入

回答

相關問題