Как я могу получить два текстовых поля динамически?

Я хотел бы иметь два текстовых поля всякий раз, когда я нажимаю кнопку 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

написать цикл for внутри click .. 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

ваш ответ почти то, что я ищу, как вы меняете имя метки, мы можем изменить атрибут name и 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

Как я могу получить два текстовых поля динамически?

ответ

Смежные вопросы