Generate input box based on dropdown selection

Question

I want to be able to make a selection from the dropdown list then have it generate a input box dynamically with an appropriate label above it. Example:

if i select school from dropdown:

<label>Enter School name:</label>
<input name="name">

if i select individual from dropdown:

<label>Enter Individual name:</label>
<input name="firstName">
<input name="lastName">

$('#elementreg').change(function() {

  $('#input-holder').empty();
  if ($(this).val() == "individual") {
    $('#input-holder').append('<input type="text" name="input" value="test" >');
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-holder"></div>
<select class="medium" id="elementreg" name="youare">
  <option value="" selected="selected"></option>
  <option value="individual">For Yourself</option>
  <option value="school">School</option>
  <option value="group">Group</option>
  <option value="studio">Studio</option>

</select>

mplungjan · Accepted Answer · 2017-01-26 07:37:30Z

2

Your code works, but why not show/hide? It is much faster than manipulating the DOM each time

$("#elementreg").on("change", function() {
  var val = $(this).val();
  $(".types").hide().find('input:text').val(''); // hide and empty
  if (val) $("#" + val).show();
});

.types {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="medium" id="elementreg" name="youare">
  <option value="" selected="selected"></option>
  <option value="individual">For Yourself</option>
  <option value="school">School</option>
  <option value="group">Group</option>
  <option value="studio">Studio</option>

</select>

<div class="types" id="individual">
  <label>Enter Individual name:</label>
  <input name="firstName">
  <input name="lastName">
</div>
<div class="types" id="school">
  <input .... />
</div>

Your version:

$("#elementreg").on("change", function() {
  var val = $(this).val(), $div = $("#input-holder"),fields="&nbsp;";
  switch (val) {
      case "individual":
        fields='<label>Your name: </label><input type="text" /><input type="text"/>';
        break;
      case "school":
        fields='<label>School: </label><input type="text" />';
        break;
  }
  $div.html(fields);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-holder">&nbsp;</div>
<select class="medium" id="elementreg" name="youare">
  <option value="" selected="selected"></option>
  <option value="individual">For Yourself</option>
  <option value="school">School</option>
  <option value="group">Group</option>
  <option value="studio">Studio</option>
</select>

edited Jan 26, 2017 at 7:37

answered Jan 26, 2017 at 6:39

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

5 Comments

Tripplex PC-Tech Over a year ago

ok i had it that way but i wasn't getting the desired output i wanted

mplungjan Over a year ago

In what way? What would be desired that could be better using JS creation instead?

Tripplex PC-Tech Over a year ago

the input fields are still there after i change the selection from the drop down menu. i.e its still keeping the previous selected input fields its not hiding them when i change selection.

mplungjan Over a year ago

Not if you empty the div each time. I have fixed my code to empty the div's fields so it does not send name of individual if he fills that in first and then chooses school

mplungjan Over a year ago

Added another example

Collectives™ on Stack Overflow

Generate input box based on dropdown selection

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related