代码之家 › 专栏 › 技术社区 › EasyWay

输入数字并根据输入的数字显示输入字段

html-form dynamic html jquery javascript

0

EasyWay · 技术社区 · 6 年前

我想显示的数字输入框根据数字输入多少。

我的代码不起作用

<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"/>'); 
        }
    });
});

4 回复 | 直到 6 年前

1

0

Pandurang Nayak 6 年前

工作代码,没有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 link

2

1

Jerdine Sabio 6 年前

我认为代码的问题在于它在jquery对象上使用了.value。我替换了$(“#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>

3

0

brk 6 年前

替换 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>

4

0

Mohamed-Yousef 6 年前

type="number" 用于输入

第二:实时使用 on('input',) .change 事件 工作方式 .on('blur' ,)

第三:使用 .val() 而不是 .value

#boxquantity 数字更改时的div。。对我来说,最好将输入保存为html变量,然后使用 .html() .append() .. 或者你可以用 $('#boxquantity').html('');

$(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>