我怎樣才能獲得兩個文本框動態？

我想有兩個文本框，每當我點擊addtextboxes按鈕，我使用此代碼來生成單個文本框，它工作正常。我怎樣才能獲得兩個文本框動態？

<script type="text/javascript"> 
$(document).ready(function() { 
    var counter = 1; 

    $("#addButton").click(function() { 

     var newTextBoxDiv = $(document.createElement('div')) 
      .attr("id", 'TextBoxDiv' + counter); 

     newTextBoxDiv.after().html('<label>answer_' + counter + ' : </label>' + '<input type="text" name="answer_' + counter + '" id="answer_' + counter + '" value="" >'); 
     newTextBoxDiv.appendTo("#TextBoxesGroup"); 
     counter++; 
    }); 

}); 
</script> 

<div id='TextBoxesGroup'> 
    <div id="TextBoxDiv1"> 
     <label>answer #1 : </label><input type='textbox' id='answer1' > 
    </div> 
</div>

這裏我想知道我怎樣纔能有兩個文本框，當我點擊addbutton？任何幫助，將不勝感激。

來源

2013-08-21 Suleman khan

對不起。我有點困惑。爲什麼不只是做兩次？ – musicnothing

在click裏寫一個for循環.. for（var i = 0; i <= counter; i ++）？ – Krishna

我試過兩次使用函數，但它不起作用。在這裏，我想要有兩個文本框，每當我點擊添加按鈕示例一個文本框的答案和另一個命令。我仍然是jQuery和JavaScript的初學者。 –

通過採取點擊事件的內部工作，並把它變成它自己的功能，你可以這樣做以下：

HTML

<button id="addButton">Add</button> 
<div id='TextBoxesGroup'></div>

的JavaScript

var counter = 1; 
var labelArray = ["answer", "order"]; 

$("#addButton").click(function() { 
    for(var i = 0; i < labelArray.length; i++){ 
     createNewInput(labelArray[i]); 
    } 
    counter++; 
}); 

function createNewInput(label){ 
    var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter); 
    newTextBoxDiv.after().html('<label>'+ label + " " + counter + ' : </label>' + '<input type="text" name="answer_' + counter + '" id="answer_' + counter + '" value="" >' ); 
    newTextBoxDiv.appendTo("#TextBoxesGroup");  
}

EXAMPLE

來源

2013-08-21 17:52:48 Chase

我想要另一個不同標籤的文本框，我該怎麼做？ –

@MSKhan - 我已經更新了我的答案，我想你在找什麼，但有點不清楚你想要什麼。如果這是不正確的，你有更好的解釋，請讓我知道，我會盡我所能幫助。謝謝=） – Chase

你的答案几乎我在找什麼，你改變標籤名稱的方式可以改變這個文本框的名稱和ID屬性。這裏我想要一個單獨的文本框來回答和訂購。 –

$(document).ready(function() { 
    var counter = 1; 

    $("#addButton").click(function() { 

     var newTextBoxDiv = $(document.createElement('div')) 
      .attr("id", 'TextBoxDiv' + counter); 

     var $html = '<label>answer_' + counter + ' : </label>' + '<input type="text" name="answer_' + counter + '" id="answer_' + counter + '" value="" >'; 
     counter++; 
     $html += '<label>answer_' + counter + ' : </label>' + '<input type="text" name="answer_' + counter + '" id="answer_' + counter + '" value="" >'; 
     counter++; 
     newTextBoxDiv.after().html($html); 
     newTextBoxDiv.appendTo("#TextBoxesGroup"); 

    }); 

});

來源

2013-08-21 17:46:15

使用for循環兩次並將代碼移到循環中。

for (var i=0 ;i<=counter ;i++){ 


var newTextBoxDiv = $(document.createElement('div')) 
         .attr("id", 'TextBoxDiv' + i); 

         newTextBoxDiv.after().html('<label>answer_'+ i+ ' : </label>' + '<input type="text" name="answer_' + counter + '" id="answer_' + i+ '" value="" >' ); 
         newTextBoxDiv.appendTo("#TextBoxesGroup"); 

        }); 



}

來源

2013-08-21 17:48:07

謝謝..我糾正了我的答案.. – Krishna

$("#addButton").click(function() { 

    var counter = 1; 
    for (var i=0;i <= counter;i++) 
    { 
     var newTextBoxDiv = $(document.createElement('div')) 
        .attr("id", 'TextBoxDiv' + i); 
     newTextBoxDiv.after().html('<label>answer_'+ i + ' : </label>' + '<input type="text" name="answer_' + i + '" id="answer_' + i + '" value="" >' ); 
     newTextBoxDiv.appendTo("#TextBoxesGroup"); 
    } 
});

如果您想了解更多textboxes。增加你countervalue。

來源

2013-08-21 17:48:17 Krishna

試試這個：

$(document).ready(function(){ 
    var counter = 1; 
     $("#addButton").click(function() { 
      var clone1 = $("#TextBoxDiv1").clone(); 
      clone1.children('input').attr('id',"answer_"+counter) ; 
      clone1.children('input').attr('name',"answer_"+counter); 
      $("#TextBoxesGroup").append(clone1); 
      counter++; 
      var clone2 = $("#TextBoxDiv1").clone(); 
      clone2.children('input').attr('id',"answer_"+counter) ; 
      clone2.children('input').attr('name',"answer_"+counter); 
      $("#TextBoxesGroup").append(clone2); 
    }); 
    });

來源

2013-08-21 17:55:18 Farhan

我怎樣才能獲得兩個文本框動態？

回答

相關問題