Adding input box dynamically with dropdown list

Question

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

Grab a tutorial on DOM manipulation.

toniedzwiedz
– toniedzwiedz

2012-11-12 14:50:36 +00:00
Commented Nov 12, 2012 at 14:50 — toniedzwiedz
– toniedzwiedz, Commented Nov 12, 2012 at 14:50

Andrei R · Accepted Answer · 2012-11-12 15:02:38Z

2

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.

answered Nov 12, 2012 at 15:02

Andrei R

1114 bronze badges

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

1 Comment

Andrei R Over a year ago

you can add it between <script> tags and don't forget to load a jquery library before using the code. For more info visit http://jquery.com/

Collectives™ on Stack Overflow

Adding input box dynamically with dropdown list

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related