How to display fields according to selected input using plain javascript-CodePudding

I'm trying to develop a form where fields will be show according to already selected fields.

I'm facing problem to integrate JavaScript with html properly. I need your help to let me know how I can update the display of fields asynchronously.

Expected Behavior : By default there will 1 choice selected and 1 input field , if user selects 2 choices from select input then there should be 2 input fields

This is minimal example where I'm trying:

document.getElementById("app").innerHTML = `
<h1>Show fields According to Selected Choice</h1>
<div>
1 field if selected one choice 
2 fields if selected 2 choices
</div>
`;

body {
  font-family: sans-serif;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <fieldset>
      <div >
        <div>
          <label  for="id_type">Select Choices:</label>

          <select name="type" id="id_type">
            <option value="1" selected>1 Choice</option>

            <option value="2">2 Choices</option>
          </select>
        </div>
      </div>

      <div>
        <label for="id_choice_1">Choice 1:</label>

        <input
          type="text"
          name="choice_1"
          
          maxlength="100"
          id="id_choice_1"
        />
      </div>

      <div>
        <label for="id_choice_2">Choice 2:</label>

        <input
          type="text"
          name="choice_2"
          
          maxlength="100"
          id="id_choice_2"
        />
      </div>
    </fieldset>

    <script>
      function myFunction() {
        var x = document.getElementById("id_type").value || null;

        // Put logic here
      }
    </script>
    <script src="src/index.js"></script>
  </body>
</html>

I also added this into a sandbox if you want to run the code. https://codesandbox.io/s/fervent-worker-r6xszj?file=/src/index.js

CodePudding user response：

Using the onchange event of the select you can call a function that first clears all the fields and then adds N fields as selected:

<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <fieldset>
      <div >
        <div>
          <label  for="id_type">Select Choices:</label>

          <select name="type" id="id_type" onchange="genFields()">
            <option value="1" selected>1 Choice</option>

            <option value="2">2 Choices</option>
            <option value="3">3 Choices</option>
            <option value="4">4 Choices</option>
          </select>
        </div>
      </div>
      <div id="fields"></div>
    </fieldset>
  </body>
  <script>
    function genFields() {
      document.getElementById("fields").innerHTML = "";
      let numFields = document.getElementById("id_type").value;
      for (let i = 1; i <= numFields; i  ) {
        document.getElementById(
          "fields"
        ).innerHTML  = `<div><label for='id_choice_${i}'>Choice ${i}</label><input type='text' id='id_choice_${i}' name='choice_${i}' class='vTextField' maxLength=100></div>`;
      }
    }
  </script>
</html>

CodePudding user response：

You can follow this:

let selects = document.querySelector("#id_type");
console.log(selects);
selects.onchange = function (e) {
  let inputs = document.querySelector("#inputs");
  
  inputs.innerHTML = `
      <div>
        <label for="id_choice_1">Choice 1:</label>

        <input
          type="text"
          name="choice_1"
          
          maxlength="100"
          id="id_choice_1"
        />
      </div>
   `;
  
  if(e.target.value == "2") {
  
    inputs.innerHTML  =`
        <div>
          <label for="id_choice_1">Choice 2:</label>

          <input
            type="text"
            name="choice_2"
            
            maxlength="100"
            id="id_choice_2"
          />
        </div>
    `;
   }
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <fieldset>
      <div >
        <div>
          <label  for="id_type">Select Choices:</label>

          <select name="type" id="id_type">
            <option value="1" selected>1 Choice</option>

            <option value="2">2 Choices</option>
          </select>
        </div>
      </div>

      <div id="inputs">
      <div>
        <label for="id_choice_1">Choice 1:</label>

        <input
          type="text"
          name="choice_1"
          
          maxlength="100"
          id="id_choice_1"
        />
      </div>
      </div>
    </fieldset>
  </body>
</html>

CodePudding user response：

You just have to toggle the visibility of those elements with some logic to compare the selected option.

function myFunction(e) {
  switch (e.target.value) {
    case '1':
      document.getElementById('id_choice_1_container').style.display = "block";
      document.getElementById('id_choice_2_container').style.display = "none";
      break;
    case '2':
      document.getElementById('id_choice_1_container').style.display = "none";
      document.getElementById('id_choice_2_container').style.display = "block";
      break;
    default:
      break;
  }
}

<div id="app">
  <h1>Show fields According to Selected Choice</h1>
</div>
<fieldset>
  <div >
    <div>
      <label  for="id_type">Select Choices:</label>
      <select name="type" id="id_type" onchange="myFunction(event)">
        <option value="1" selected>1 Choice</option>
        <option value="2">2 Choices</option>
      </select>
    </div>
  </div>

  <div id="id_choice_1_container">
    <label for="id_choice_1">Choice 1:</label>
    <input type="text" name="choice_1"  maxlength="100" id="id_choice_1"  onchange="myFunction(event)"/>
  </div>

  <div id="id_choice_2_container" style="display: none">
    <label for="id_choice_2">Choice 2:</label>
    <input type="text" name="choice_2"  maxlength="100" id="id_choice_2"  onchange="myFunction(event)"/>
  </div>
</fieldset>