New Input based on previous input field in HTML/CSS/JS

Question

I am creating a website on which user enters data and then it is submitted to a DB and simultaneously the user gets a mail.

<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>

So what I want to add an extra input (text input for comments) if any of the input is other than "Yes" for input-4, input-5, and input-7 to input-14. I am using CSS for UI (Which is why I am hesitant to change it to a Checkbox/Dropdown menu due to the design) and the site is deployed using IIS.

So is there anyway to do this? The Submit button submits the data to MS Access file.

From what I have searched it can be done(possibly) via JS but I don't have much experience with it so any guide/help would be appreciated.

Edit1: The Code https://codepen.io/shwetanshu/pen/XgBLwW My target is if there is any "yes" in first 4 input fields then a fifth one should come as comments. Otherwise not.

Well, the problem you have is a very good intro to JS if you want to learn it. You can start by learning jQuery basics IMHO. — Keloo
– Keloo, Commented Aug 7, 2017 at 15:49
Well I know I cannot avoid JS. So yeah this would be a good starting point. I will look into it. — Anti21
– Anti21, Commented Aug 7, 2017 at 15:54

SphynxTech · Accepted Answer · 2017-08-07 17:00:29Z

1

You can use 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"

Here you add an javascript object to your document after creating it with using document.createElement("INPUT"). You can consult the documentation of w3schools.

Your code may looks like this:

    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.
  }
}

Note you may add in the code the teste that you want. You, also, have to add an ID to your form and then put it in the code.

Tell me if you have more questions.

edited Aug 7, 2017 at 17:00

answered Aug 7, 2017 at 15:50

SphynxTech

1,8492 gold badges20 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Anti21 Over a year ago

OK So After I get all the inputs till input-14. I would like this to run. So I create a JS Function. It checks all the input I need to check. Then it if the condition is successful then I execute this to create a new form. Would this be the right way?

SphynxTech Over a year ago

I update my answer. You have just right. However, you do not create a new form but just add an element in it.

Anti21 Over a year ago

Wow, Thanks a lot. And my bad instead of calling it an element called it for.

Anti21 Over a year ago

codepen.io/shwetanshu/pen/XgBLwW This is my code now. So if there is a yes in any of the fields I want an extra comment added to it. I think due to CSS Transition it'll be extremely difficult (or impossible?)

Anti21 Over a year ago

It is forked not mine. Trying to implement it for intranet. (Due credit where due will given as per GPL). Do you have any idea how to implement the next transition in CSS?

Mind Inventive · Accepted Answer · 2017-08-07 17:00:39Z

0

You can try something like this using javascript: https://jsfiddle.net/yqf5nf6h/3/

To simply hide and show the element if the checkbox has been selected or not.

 // 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';
}});

Hope this helps

if you need more javascript info check https://www.w3schools.com/js/

answered Aug 7, 2017 at 17:00

Mind Inventive

275 bronze badges

1 Comment

Anti21 Over a year ago

I am using CSS for UI (Which is why I am hesitant to change it to a Checkbox/Dropdown menu due to the design) . Here is the code codepen.io/shwetanshu/pen/XgBLwW

Collectives™ on Stack Overflow

New Input based on previous input field in HTML/CSS/JS

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related