CODEWITHSUNDEEP
javascripthtmlforms
user1810449
user1810449

Reputation: 173

Adding input box dynamically with dropdown list

I playing around with dropdown lists, and I am wondering on how I would dynamically add input box based on a number selected from a dropdown list. e.g. if one is selected then add one input box, if two then add two input boxes etc... . Any tips or guidance would be appreciated Thanks

Upvotes: 0

Views: 2328

Answers (1)

Andrei R
Andrei R

Reputation: 111

I can show you a simple method using jquery:

html

<select id="dropdown">
  <option value="0">Select number of inputs</option>
  <option value="1">1 input</option>
  <option value="2">2 inputs</option>
  <option value="3">3 inputs</option>
  <option value="4">4 inputs</option>
</select>
<div id="input-holder"></div>​

jquery

$('#dropdown').change(function(){
    if ($(this).val() > 0) {
      $('#input-holder').empty();
      for (i = 1; i <= $(this).val(); i++) {
        $('#input-holder').append('<input type="text" name="input'+i+'" value="' + i +'" >');
      }
    }
});​

Of course this is just an example and it can be done in multiple other ways.

Upvotes: 2

Related Questions