web-dev-qa-db-ja.com

<input type =“ text” />を動的に作成する方法

Webフォームに入力タイプのテキストを動的に作成したい。具体的には、ユーザーが必要なテキストフィールドの数を入力するテキストフィールドがあります。同じフォームでテキストフィールドを動的に生成する必要があります。

それ、どうやったら出来るの？

javascripthtmlformswebforms
67
Mohammad Usman

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
140
Zach

Javascriptを使用する場合、必要なのはdocument.createElementとsetAttributeだけです。

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

次に、appendChildを使用して、作成した要素を目的の親要素に追加できます。

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

たぶん、メソッドdocument.createElement();があなたが探しているものです。

3
Eliasdx

入力するテキストフィールドの数に基づいて、ループでこのようなことを行うことができます。

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

しかし、パフォーマンスを向上させるには、最初にすべてのhtmlを作成し、DOMに1回だけ挿入します。

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

編集この例ではjQueryを使用してhtmlを追加していますが、innerHTMLを使用するように簡単に変更することもできます。

2
daniellmb

次のリンクが役立つと思います。フィールドを動的に生成し、同時にそれらを削除する場合は、ここからヘルプを取得できます。私は同じ質問を持っていたので、答えを得た

$(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/

2
user1477132

JQuery以外のソリューションについては、この回答を参照してください。助けてくれただけです！

入力要素をフォームに動的に追加する

2
jaaq

createElement()メソッドを使用して、そのテキストボックスを作成できます

2
Sean

これが私の解決策です

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>
0
zero