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

76

Ich möchte einen Text vom Typ Eingabe in meinem Webformular dynamisch erstellen. Insbesondere habe ich 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?

Mohammad Usman
quelle

Antworten:

154

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
Zach
quelle
Es tut mir leid, aber ich kann es nicht auf meinem Formular anzeigen? Ich habe eine Funktion gemacht, die ausgelöst wird, wenn auf die Schaltfläche Hinzufügen geklickt wird. Aber ich kann nicht herausfinden, wie man aus diesem Textfeld, in dem der Benutzer die Anzahl der zu erstellenden Textfelder eingibt, Wert erhält. . ? Und was wäre, wenn ich diesen dynamisch erstellten Textfeldern auch eine CSS-Klasse zuweisen wollte? . ?
Mohammad Usman
Ich habe dem Beispiel Code hinzugefügt, um zu zeigen, wie er an das DOM angehängt und dem dynamisch erstellten Element eine CSS-Klasse hinzugefügt wird.
Zach
25

Mit Javascript brauchen Sie nur document.createElementund setAttribute.

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

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

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

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

Eliasdx
quelle
3

So erstellen Sie die Anzahl der vom Benutzer angegebenen Eingabefelder


  1. Holen Sie sich die Anzahl der Textfelder vom Benutzer und weisen Sie sie einer Variablen zu.

    var no = document.getElementById("idname").value


  1. Verwenden Sie zum Erstellen von Eingabefeldern die createElementMethode und geben Sie den Elementnamen, dh "input", wie unten angegeben als Parameter an und weisen Sie ihn einer Variablen zu.

    var textfield = document.createElement("input");


  1. Weisen Sie dann der Variablen die erforderlichen Attribute zu.

    textfield.type = "text";

    textfield.value = "";


  1. Zuletzt wird die Variable mit der appendChildMethode an das Formularelement angehängt . Damit wird das Eingabeelement im Formularelement selbst erstellt.

    document.getElementById('form').appendChild(textfield);


  1. Durchlaufen Sie die Schritte 2,3 und 4, um die gewünschte Anzahl von Eingabeelementen zu erstellen, die der Benutzer im Formularelement angegeben hat.

    for(var i=0;i<no;i++) {           
        var textfield = document.createElement("input");
        textfield.type = "text"; textfield.value = "";
        document.getElementById('form').appendChild(textfield);
    }
    

Hier ist der vollständige Code

function fun() {
    /*Getting the number of text fields*/
    var no = document.getElementById("idname").value;
    /*Generating text fields dynamically in the same form itself*/
    for(var i=0;i<no;i++) {
        var textfield = document.createElement("input");
        textfield.type = "text";
        textfield.value = "";
        document.getElementById('form').appendChild(textfield);
    }
}
<form id="form">
    <input type="type" id="idname" oninput="fun()" value="">
</form>

Ajithraj
quelle
2

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 zuerst das gesamte HTML 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(''));

In diesem Beispiel wird jQuery zum Anhängen des HTML-Codes verwendet. Sie können es jedoch problemlos ändern, um auch innerHTML zu verwenden.

daniellmb
quelle
7
Es könnte gut sein zu erwähnen, dass dies von jQuery abhängt, da in der Frage jQuery nicht angegeben wurde.
Jeff
2

Sie können die createElement()Methode zum Erstellen dieses Textfelds verwenden

Sean
quelle
2

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/

user1477132
quelle
Der entfernte Teil dieses Codes ist ziemlich unvollkommen. Wenn Sie 2 Eingänge hinzufügen und den mittleren entfernen, erhalten Sie 2 Eingänge mit derselben ID. Entfernen Sie die Zeile besser mit i--;Außerdem müssen Sie das Original und die zusätzlichen Eingabefelder separat behandeln, wenn Sie es in ein von PHP verarbeitetes Formular einfügen.
Jaaq
2

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

Dynamisches Hinzufügen von Eingabeelementen zur Form

jaaq
quelle
1
Sehr schön. Ich verstehe nicht, warum die Leute ständig Beispiele mit Fragen geben. Vielen Dank.
Kdobrev
1

Sie können ES6-Back-Quits verwenden

  var inputs = [
        `<input type='checkbox' id='chbox0' onclick='checkboxChecked(this);'> <input  type='text' class='noteinputs0'id='note` + 0 + `' placeholder='task0'><button  id='notebtn0'                     >creat</button>`, `<input type='text' class='noteinputs' id='note` + 1 + `' placeholder='task1'><button  class='notebuttons' id='notebtn1' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 2 + `' placeholder='task2'><button  class='notebuttons' id='notebtn2' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 3 + `' placeholder='task3'><button  class='notebuttons' id='notebtn3' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 4 + `' placeholder='task4'><button  class='notebuttons' id='notebtn4' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 5 + `' placeholder='task5'><button  class='notebuttons' id='notebtn5' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 6 + `' placeholder='task6'><button  class='notebuttons' id='notebtn6' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 7 + `' placeholder='task7'><button  class='notebuttons' id='notebtn7' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 8 + `' placeholder='task8'><button  class='notebuttons' id='notebtn8' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 9 + `' placeholder='task9'><button  class='notebuttons' id='notebtn9' >creat</button>`
    ].sort().join(" ");
   document.querySelector('#hi').innerHTML += `<br>` +inputs;
<div id="hi"></div>

Omar bakhsh
quelle
0

Die Kernidee der Lösung lautet:

  • Erstellen Sie ein neues inputElement
  • Fügen Sie den Typ hinzu text
  • Hängen Sie das Element an das DOM an

Dies kann über dieses einfache Skript erfolgen:

var input = document.createElement('input');
input.setAttribute('type', 'text');
document.getElementById('parent').appendChild(input);

Die Frage ist nun, wie dieser Prozess dynamisch gestaltet werden kann. Wie in der Frage angegeben, gibt es eine andere Eingabe, bei der der Benutzer die Anzahl der zu generierenden Eingaben eingibt. Dies kann wie folgt erfolgen:

function renderInputs(el){
  var n = el.value && parseInt(el.value, 10);
  if(isNaN(n)){
    return;
  }
  
  var input;
  var parent = document.getElementById("parent");
  
  cleanDiv(parent);
  for(var i=0; i<n; i++){
    input = document.createElement('input');
    input.setAttribute('type', 'text');
    parent.appendChild(input);
  }
}

function cleanDiv(div){
  div.innerHTML = '';
}
Insert number of input to generate: </br>
<input type="text" onchange="renderInputs(this)"/>

<div id="parent">
Generated inputs:
</div>

Normalerweise ist das Hinzufügen nur einer Eingabe nicht wirklich nützlich. Es ist jedoch besser, der Eingabe einen Namen hinzuzufügen, damit sie problemlos als Formular gesendet werden kann. Dieses Snippet fügt auch einen Namen hinzu:

function renderInputs(el){
  var n = el.value;
  var input, label;
  var parent = document.getElementById("parent");
  cleanDiv(parent);
  
  el.value.split(',').forEach(function(name){
    input = document.createElement('input');
    input.setAttribute('type', 'text');
    input.setAttribute('name', name);
    label = document.createElement('label');
    label.setAttribute('for', name);
    label.innerText = name;
    parent.appendChild(label);
    parent.appendChild(input);
    parent.appendChild(document.createElement('br'));
  });
}

function cleanDiv(div){
  div.innerHTML = '';
}
Insert the names, separated by comma, of the inputs to generate: </br>
<input type="text" onchange="renderInputs(this)"/>
<br>
Generated inputs: </br>
<div id="parent">

</div>

Greedo
quelle
0
  • Fragen Sie das Container-DOM-Element ab und rufen Sie es ab

  • Neues Element erstellen

  • Fügen Sie ein neues Element in den Dokumentbaum ein

//Query some Dib region you Created
let container=document.querySelector("#CalculationInfo .row .t-Form-itemWrapper");
let input = document.createElement("input");

//create new Element  for apex
input.setAttribute("type","text");
input.setAttribute("size","30");
containter.appendChild(input); // put it into the DOM
mohmed atia
quelle
@murb können Sie auch beitragen
Bhargav Nanekalva
0
<button id="add" onclick="add()">Add Element</button>

<div id="hostI"></div>

<template id="templateInput">
    <input type="text">
</template>

<script>
    function add() {

        // Using Template, element is created
        var templateInput = document.querySelector('#templateInput');
        var clone = document.importNode(templateInput.content, true);

        // The Element is added to document
        var hostI = document.querySelector('#hostI');
        hostI.appendChild(clone);
    }

</script>

HTML-Vorlagen sind jetzt die empfohlenen Standards zum Generieren von dynamischem Inhalt.

Agnel Vishal
quelle