根據文本框的值創建文本框

基本上，我試圖做的是在頁面上有一個單獨的文本框。當用戶輸入一個數字時，它應該自動在其下面生成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

根據文本框的值創建文本框

回答

相關問題