How to customize form field by choosing dropdown list?

If I select "Chrome" then only two form fields should appear. If I select Firefox then 3 form fields should appear & likewise. How can i do so?

<!DOCTYPE html>
<html>
<head>
	<title>helo</title>
</head>
<body>
<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" placeholder="Select" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>
<br><br>
<label>Title </label> &nbsp;<input type="text" name="title"> <br><br>
<label>Sub title </label> &nbsp;<input type="text" name="subtitle"> <br><br>
<label>Developed by </label> &nbsp;<input type="text" name="developer"> <br><br>
<label>Organization </label> &nbsp;<input type="text" name="organization"> <br><br>
<label>Description </label> &nbsp;<input type="textarea" name="description"> <br><br>

</body>
</html>

3 answers

  • answered 2018-11-08 06:33 Gerard

    I made an example for the chrome selection. You can expand further for the other browsers. Documentation in the source.

    const selected = document.getElementsByTagName('input')[0];
    selected.addEventListener("change", () => {
      const browser = selected.value;
      
      /* Create an array with all elements having class = input */
      const allFields = [...document.getElementsByClassName("input")];
      /* Hide all fields */
      allFields.map(field => field.style.display = "none");
      
      /* Show the fields depending on browser selection */
      switch (browser.toLowerCase()) {
        case "chrome":
          /* Title, Organization & Description */
          document.getElementById("title").style.display = "block";
          document.getElementById("organization").style.display = "block";
          document.getElementById("description").style.display = "block";
          break;
        case "firefox":
          break;
        default:
          /* Any code that should run if no browser matches */
      }
    });
    .input {
      margin: 0 0 1rem 0; /* White space at bottom */
    }
    <label>Choose a browser from this list:
    <input list="browsers" name="myBrowser" placeholder="Select" /></label>
    <datalist id="browsers">
      <option value="Chrome">
      <option value="Firefox">
      <option value="Internet Explorer">
      <option value="Opera">
      <option value="Safari">
      <option value="Microsoft Edge">
    </datalist>
    <br><br>
    <div id="title" class="input">
      <label>Title </label><input type="text" name="title">
    </div>
    <div id="subtitle" class="input">
      <label>Sub title </label><input type="text" name="subtitle">
    </div>
    <div id="developed" class="input">
      <label>Developed by </label><input type="text" name="developer">
    </div>
    <div id="organization" class="input">
      <label>Organization </label><input type="text" name="organization">
    </div>
    <div id="description" class="input">
      <label>Description </label><input type="textarea" name="description">
    </div>

  • answered 2018-11-08 06:38 Rikard

    Here is an example using jQuery. All fields are displayed at first and then fields are filtered depending on the "data-filter" attribute values. Filter happens on "change", so you must press enter or leave the input.

    $(document).ready(function(){
      $('input[name="myBrowser"').on('change', filterInputFields);
      
      function filterInputFields() {
        var value = $(this).val();
        
        $('.inputFields li').each(function() {
       
          var filterValue = $(this).data('filter');
          
          if (filterValue.indexOf(value) === -1) {
            $(this).hide();
          } else {
            $(this).show();
          }
        });
      }
    });
    <!DOCTYPE html>
    <html>
    <head>
    	<title>helo</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
    <label>Choose a browser from this list:
    <input list="browsers" name="myBrowser" placeholder="Select" /></label>
    <datalist id="browsers">
      <option value="Chrome">
      <option value="Firefox">
      <option value="Internet Explorer">
      <option value="Opera">
      <option value="Safari">
      <option value="Microsoft Edge">
    </datalist>
    <br><br>
    <ul class="inputFields">
      <li data-filter="Chrome,Firefox"><label>Title </label> &nbsp;<input type="text" name="title"> </li>
      <li data-filter="Chrome,Firefox"><label>Sub title </label> &nbsp;<input type="text" name="subtitle"> </li>
      <li data-filter="Opera,Firefox"><label>Developed by </label> &nbsp;<input type="text" name="developer"> </li>
      <li data-filter="Internet Explorer"><label>Organization </label> &nbsp;<input type="text" name="organization"> </li>
      <li data-filter="Internet Explorer"><label>Description </label> &nbsp;<input type="textarea" name="description"></li>
    </ul>
    
    </body>
    </html>

  • answered 2018-11-08 06:49 ringunger

    Here is another approach using jQuery and classes:

    <!DOCTYPE html>
    <html>
    <head>
        <title>helo</title>
    </head>
    <body>
    <label>Choose a browser from this list:
    <input list="browsers" name="myBrowser" placeholder="Select" /></label>
    <datalist id="browsers">
      <option value="Chrome">
      <option value="Firefox">
      <option value="Internet Explorer">
      <option value="Opera">
      <option value="Safari">
      <option value="Microsoft Edge">
    </datalist>
    <br><br>
    <div class="input chrome firefox">
        <label>Title </label> &nbsp;<input type="text" name="title"> <br><br>
    </div>
    <div class="input  firefox opera internet_explorer">
        <label>Sub title </label> &nbsp;<input type="text" name="subtitle"> <br><br>
    </div>
    <div class="input  firefox opera safari internet_explorer">
        <label>Developed by </label> &nbsp;<input type="text" name="developer"> <br><br>
    </div>
    <div class="input chrome opera safari internet_explorer">
        <label>Organization </label> &nbsp;<input type="text" name="organization"> <br><br>
    </div>
    <div class="input chrome firefox opera safari internet_explorer">
        <label>Description </label> &nbsp;<input type="textarea" name="description"> <br><br>
    </div>
    
    </body>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $("input[name=myBrowser]").on("change", function() {
                var class_name = $(this).val().replace(" ", "_").toLowerCase();
                $(".input").hide();
                $("." + class_name).show();
    
            });
        });
    </script>
    </html>