Как создать <input type = "text" /"> динамически

Я хочу создать текст типа ввода в моей веб-форме динамически. Более конкретно, у меня есть текстовое поле, в котором пользователь вводит количество желаемых текстовых полей; Я хочу, чтобы текстовые поля генерировались динамически в одной и той же форме.

Как это сделать?

Ответы

Ответ 1

С JavaScript:

var input = document.createElement("input");
input.type = "text";
input.className = "css-class-name"; // set the CSS class
container.appendChild(input); // put it into the DOM

Ответ 2

Используя Javascript, все, что вам нужно, это document.createElement и setAttribute.

var input = document.createElement("input");
input.setAttribute('type', 'text');

Затем вы можете использовать appendChild для добавления созданного элемента к нужному родительскому элементу.

var parent = document.getElementById("parentDiv");
parent.appendChild(input);

Ответ 3

Возможно, метод document.createElement(); - это то, что вы ищете.

Ответ 4

Вы можете сделать что-то подобное в цикле, основанном на количестве вводимых текстовых полей.

$('<input/>').attr({type:'text',name:'text'+i}).appendTo('#myform');

Но для лучшей производительности я бы сначала создал весь html и ввел его в DOM только один раз.

var count = 20;
var html = [];
while(count--) {
  html.push("<input type='text' name='name", count, "'>");
}
$('#myform').append(html.join(''));

В этом примере используется jQuery для добавления html, но вы можете легко изменить его и использовать innerHTML.

Ответ 5

Вы можете использовать метод createElement() для создания этого текстового поля

Ответ 6

Я думаю, что следующая ссылка вам поможет. Если вы хотите генерировать поля динамически, а также хотите удалить их в одно и то же время, вы можете получить помощь отсюда. У меня был тот же вопрос, поэтому я получил ответ

$(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;

        $('#addScnt').live('click', function() {
                $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
                i++;
                return false;
        });

        $('#remScnt').live('click', function() { 
                if( i > 2  ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });
});

http://jsfiddle.net/jaredwilli/tZPg4/4/

Ответ 8

Вот мое решение

function fun() {
/*getting the number of text field*/
var no = document.getElementById("idname").value;
/*text fields to be generated dynamically in the same form*/
  for(var i=0;i<no;i++) 
   {
    var textfield = document.createElement("input");
    textfield.type = "text";
    textfield.id = "idname4textfeild"; 
    textfield.setAttribute("value","");
    document.getElementById('form').appendChild(textfield);
  }
}
<form id="form">
    <input type="type" id="idname" oninput="fun()" value="">
</form>