Create multiple fields on input

Question

I am trying to create multiple fields when I enter a number to tell it how many to create... I have utilised some code that I have written previously but now it's no longer working.

HTML:

<input type="text" name="rows">

jQuery:

$(document).ready(function() {
    $('#rows').change(function() {
    var rows = $(this).val();

    for(i=0;i<=rows;i++) {
            $('#form').append('<div><input type="text" name="N' + i + '"></div>');
        $('#form').append('<div><select name="S'+ i +'"><option value="Text">Text</option><option value="editor">Editor</option></select></div>');
        $('#form').append('<div><input type="text" name="V' + i + '"></div>');
    }
  }
}

Fiddle: https://jsfiddle.net/dc5665xk/1/

Rayon · Accepted Answer · 2017-07-16 03:24:10Z

3

ID attribute is missing for rows element.
There is no form element having form as ID
Syntax error as closing braces were missing.

Note: var keyword was missing in for-loop

$(document).ready(function() {
  $('#rows').change(function() {
    var rows = $(this).val();
    for (var i = 0; i <= rows; i++) {
      $('#form').append('<div><input type="text" name="N' + i + '"></div>');
      $('#form').append('<div><select name="S' + i + '"><option value="Text">Text</option><option value="editor">Editor</option></select></div>');
      $('#form').append('<div><input type="text" name="V' + i + '"></div>');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="form">
  <input type="text" name="rows" id="rows">
</form>

answered Jul 16, 2017 at 3:24

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

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

1 Comment

NoMansLand Over a year ago

Thank you so much @Rayon, I dont get why this doesnt run on JS Fiddle

Collectives™ on Stack Overflow

Create multiple fields on input

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