Введите число и отобразите поля ввода в соответствии с введенным числом

Question

Я хочу отобразить номер поля ввода в соответствии с числом, введенным во сколько.

Мой код не работает

<input id="howmany" />
<div id="boxquantity"></div>

Jquery / JavaScript

$(function() {
    $('#howmany').change(function(){
        for(i=0; i < $("#howmany").value; i++)
        {
            $('#boxquantity').append('<input name="boxid[]" type="file" id="boxid[]" size="50"/>'); 
        }
    });
});

Answer 1

Рабочий код, без jQuery.

Встроенный HTML-код в переменную, а затем добавление в DOM за один раз.

var boxes = "";

document.getElementById("howmany").onchange = function() {
  boxes = "";
  var howmany = document.getElementById("howmany").value;
  for(i=0;i<howmany;i++) {
    boxes += '<b>File ' + i + '</b>: <input type="file" id="box' + i + ' name="box' + i + ' /><br/>';
  }
  console.log(boxes);
  document.getElementById("boxquantity").innerHTML = boxes;
}

Вот ссылка JSBin .

Answer 2

Заменить value на val.Вы можете заменить $("#howmany").value на $(this).val().Также каждый вход должен иметь уникальный id

$(function() {
  $('#howmany').change(function() {
    for (let i = 0; i < $(this).val(); i++) {
      $('#boxquantity').append('<input name="boxid[]" type="file" id="boxid[]_' + i + '" size="50"/>');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="howmany" />
<div id="boxquantity"></div>

Answer 3

1-й: используйте type="number" для ввода

2-й: для использования в реальном времени on('input',) вместо .change событие .change работает как .on('blur' ,)

3-й: используйте .val() вместо .value

4-й: вам нужно сбросить #boxquantity div при изменении числа .. для меня будет лучше сохранить html входных данных в переменную, затем использовать .html() вместо .append() .. ИЛИ вы можете использовать $('#boxquantity').html(''); до цикла for

$(document).ready(function() {
  $('#howmany').on('input',function() {
    var Inputs = '';
    for (var i = 0; i < $("#howmany").val(); i++) {
      Inputs += '<input name="boxid[]" type="file" size="50"/>';
    }
    $('#boxquantity').html(Inputs);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="howmany" />
<div id="boxquantity"></div>

Answer 4

Я думаю, что проблема с кодом в том, что он использует .value для объекта jquery.Я заменил $ ("# howmany"). Значение на $ ("# howmany"). Val ()

Я также добавил функцию удаления, чтобы очистить количество отображаемых входов.

Запустите фрагмент, спасибо

$(document).ready(function() {
  $('#howmany').change(function() {
    $("#boxquantity input").remove();
    
    for (i = 0; i < $("#howmany").val(); i++) {
      $('#boxquantity').append('<input name="boxid['+i+']" type="file" id="boxid['+i+']" size="50"/>');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="howmany" />
<div id="boxquantity"></div>