it-swarm.com.de

So erstellen Sie <input type = “text” /> dynamisch

Ich möchte dynamisch einen Eingabetyptext in meinem Webformular erstellen. Genauer gesagt, ich habe ein Textfeld, in das der Benutzer die Anzahl der gewünschten Textfelder eingibt. Ich möchte, dass die Textfelder dynamisch in derselben Form generiert werden.

Wie mache ich das?

67
Mohammad Usman

Mit 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

Mit Javascript brauchen Sie nur document.createElement und setAttribute.

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

Anschließend können Sie mit appendChild das erstellte Element an das gewünschte übergeordnete Element anhängen.

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

Vielleicht ist die Methode document.createElement(); genau das, wonach Sie suchen.

3
Eliasdx

Sie können so etwas in einer Schleife basierend auf der Anzahl der eingegebenen Textfelder tun.

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

Aber für eine bessere Leistung würde ich das gesamte HTML zuerst erstellen und es nur einmal in das DOM einfügen.

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

Bearbeiten In diesem Beispiel wird jQuery verwendet, um den HTML-Code anzuhängen. Sie können ihn jedoch leicht ändern, um auch innerHTML zu verwenden.

2
daniellmb

Ich denke, der folgende Link wird Ihnen helfen. Wenn Sie Felder dynamisch generieren und gleichzeitig entfernen möchten, erhalten Sie hier die Hilfe. Ich hatte die gleiche Frage, also bekam ich die Antwort

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

In dieser Antwort finden Sie eine Nicht-JQuery-Lösung. Hat mir nur geholfen!

Eingabeelemente dynamisch zum Formular hinzufügen

2
jaaq

Sie können die Methode createElement() verwenden, um dieses Textfeld zu erstellen

2
Sean

Hier ist meine Lösung

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