onchange dropdownbox in html and php?

Question

Does anyone knows how to code a form with a dropdown where after selecting the options in the dropdown the form will display a certain layout depending on the chosen dropdown options?

For example, if i choose 4 in the dropdown list, the form should display 4 empty textboxes, but if i choose 2, the form will only display 2.

Answer 1

Check my JSBin!

Given some example HTML:

<select id='select'>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<input id='a' class="input" hidden></input>
<input id='b' class="input" hidden></input>
<input id='c' class="input" hidden></input>
<input id='d' class="input" hidden></input>

Your solution could look something like this:

$('#select').change(function (evt) {
  var no_inputs = $(this).val();
  $('.input').each(function (i) {
    $(this).hide();
    if (i < no_inputs) {
      $(this).show();
    }
  });
});