根据文本框的值创建文本框

基本上，我试图做的是在页面上有一个单独的文本框。当用户输入一个数字时，它应该自动在其下面生成X个额外的文本框。根据文本框的值创建文本框

我已经能够基于下拉框使其工作，但下拉框不适用于此应用程序。

<html> 

<head> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 
<script> 

$(document).ready(function(){ 
$("#ppl").change(function(){ 

    // The easiest way is of course to delete all textboxes before adding new ones 
    //$("#holder").html(""); 

    var count = $("#holder input").size(); 
    var requested = parseInt($("#ppl").val(),10); 

    if (requested > count) { 
     for(i=count; i<requested; i++) { 
     var $ctrl = $('<input/>').attr({ type: 'text', name:'text', value:'text'});   
      $("#holder").append($ctrl); 
     } 
} 
    else if (requested < count) { 
     var x = requested - 1; 
     $("#holder input:gt(" + x + ")").remove(); 
    } 
}); 
}); 
</script> 

</head> 
<body> 
<SELECT id="ppl"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
      <option value="5">5</option> 
      <option value="6">6</option> 
      <option value="7">7</option> 
      <option value="8">8</option> 
      <option value="9">9</option> 
      <option value="10">10</option> 
</SELECT> 
<div id="holder"></div> 
</body> 
</html>

还有一种替代方法使用ajax而不是jQuery来做这种事吗？

演示：Fiddle

来源

2013-05-02 jimmy page

AJAX将如何相关？ – alex 2013-05-02 00:52:26

你是什么意思'使用AJAX而不是jQuery？ – 2013-05-02 00:52:30

我会创建一个文本框模板，在for循环中克隆我设置为您的第一个文本框的输入值 – 2013-05-02 00:53:47

我又更新了小提琴，作为你的提琴拥有一切坐在HTML部分。 jsFiddle。

要给予他们唯一的名称，所有你需要做的是串联指数（i）名称字段中这样结尾：

for (i = count; i < requested; i++) { 
    var $ctrl = $('<input/>').attr({ 
       type: 'text', 
       name: 'text' + i, 
       value: 'text' 
      }); 
    $("#holder").append($ctrl); 
}

这会给你一个独特的名字：（汇编“text1 “，”text2“等..）。我已经在更新的小提琴中为你改变了它。

对于您的AJAX问题，我同意@Barmar，除非您需要获取仅服务器可以提供的数据，否则没有必要执行额外的服务器请求。它只是在方程中增加了另一个因素，可能会减慢速度。如果JavaScript对你来说可以完全一样，但是在客户端而不是在服务器端，这绝对是一个更快的选择。

来源

2013-05-02 01:18:34

下面是类似的解决方案。如果你从Ajax获得所需的盒子数，那么你只需要调用'generateTextBoxes'函数。

<html> 
<head> 
    <script type="text/javascript" src="jquery-1.9.js"></script> 
    <script> 
     var generateTextBoxes = function(qty, container) { 
      if (container) { 
       for (var i = 1; i <= qty; i++) { 
        $('<label for="box-'+i+'">Box '+i+'</label>&nbsp;<input id="box-'+i+'" name="box-'+i+'" type="text" /><br>').appendTo(container); 
       } 
      } 
     } 
     var init = function() { 
      $('#btnGenBoxes').on('click', function() { 
       generateTextBoxes($('#box-0').val(), $('#putThemHere')); 
      }); 
     } 
     window.onload = init; 
    </script> 
</head> 
<body> 

    <label for="box-0" />How many?</label> &nbsp; 
    <input type="text" id="box-0" name="box-0" /> 
    <br> 
    <input type="button" id="btnGenBoxes" value="Generate text boxes" /> 
    <br><br> 
    <div id="putThemHere"></div> 

</body> 
</html>

来源

2013-05-02 01:30:04 BuzzWasHere

根据文本框的值创建文本框

回答

相关问题