HTML/CSS/JSの以前の入力フィールドに基づく新しい入力

ユーザーがデータを入力してDBに送信すると同時に、ユーザーがメールを受け取るWebサイトを作成しています。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>

ので、入力のいずれかが入力-14への入力-4、入力-5、および入力-7のために「はい」以外の場合、私は、余分な入力（コメントのテキスト入力）を追加したいのか。私はUIのためにCSSを使用しています（これは、デザインのためにCheckbox/Dropdownメニューに変更することを躊躇しています）、サイトはIISを使用して展開されています。

これはどうしてですか？送信ボタンはデータをMS Accessファイルに送信します。

私はそれをJSを介して（おそらく）行うことができますが、私はそれについて多くの経験を持っていないので、任意のガイド/助けをいただければ幸いです。

Edit1：The Code https://codepen.io/shwetanshu/pen/XgBLwW 最初の4つの入力フィールドに「はい」があり、5番目のコメントフィールドがコメントである必要があります。そうでなければ。

出典

2017-08-07 Anti21

まあをチェックする必要がある場合は、あなたがそれを知りたい場合、あなたは持っている問題はJSに非常に良いイントロです。 jQueryの基礎を学ぶことから始めることができます。 – Keloo

私はJSを避けることができないことを知っています。そう、これは良い出発点になるでしょう。私はそれを徹底的に調べます。 – Anti21

あなたは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を追加してコードに挿入する必要があります。

質問がある場合は教えてください。

出典

2017-08-07 15:50:03

OKだから、すべての入力をinput-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の以前の入力フィールドに基づく新しい入力

答えて

関連する問題