Ich habe viele Blogs und Posts zum dynamischen Hinzufügen von Fieldsets gelesen, aber alle geben eine sehr komplizierte Antwort. Was ich brauche, ist nicht so kompliziert.
Mein HTML-Code:
<input type="text" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails">Fill Details</a>
Ein Benutzer gibt also einen ganzzahligen Wert ein (ich überprüfe die Validierung mit Javascript) in die input aufstellen. Und beim Anklicken der Fill Details Link, erscheinen ihm entsprechend viele Eingabefelder zur Eingabe. Ich möchte dies mit Javascript erreichen.
Ich bin kein Profi in Javascript. Ich habe darüber nachgedacht, wie ich die vom Benutzer ausgefüllte Ganzzahl abrufen kann input Feld über den Link und zeigt die entsprechende Anzahl von Eingabefeldern an.
Sie könnten eine verwenden onclick Event-Handler, um den Eingabewert für das Textfeld zu erhalten. Stellen Sie sicher, dass Sie dem Feld einen eindeutigen Namen geben id -Attribut, damit Sie sicher darauf verweisen können document.getElementById():
Wenn Sie Elemente dynamisch hinzufügen möchten, sollten Sie einen Container haben, in dem Sie sie platzieren können. Zum Beispiel ein <div id="container">. Erstellen Sie neue Elemente mit document.createElement()und verwenden appendChild() um sie jeweils an den Container anzuhängen. Sie könnten daran interessiert sein, eine aussagekräftige Ausgabe auszugeben name Attribut (zB name="member"+i für jeden der dynamisch generierten <input>s wenn sie in einem Formular eingereicht werden sollen.
Beachten Sie, dass Sie auch erstellen könnten <br/> Elemente mit document.createElement('br'). Wenn Sie nur Text ausgeben möchten, können Sie verwenden document.createTextNode() stattdessen.
Wenn Sie den Container auch jedes Mal löschen möchten, wenn er gefüllt werden soll, können Sie verwenden hasChildNodes() und removeChild() zusammen.
<html>
<head>
<script type="text/javascript">
function addFields(){
// Generate a dynamic number of inputs
var number = document.getElementById("member").value;
// Get the element where the inputs will be added to
var container = document.getElementById("container");
// Remove every children it had before
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
// Append a node with a random text
container.appendChild(document.createTextNode("Member " + (i+1)));
// Create an <input> element, set its type and name attributes
var input = document.createElement("input");
input.type = "text";
input.name = "member" + i;
container.appendChild(input);
// Append a line break
container.appendChild(document.createElement("br"));
}
}
</script>
</head>
<body>
<input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
<div id="container"/>
</body>
</html>
Sehen Sie hier ein funktionierendes Beispiel JSFiddle.
Probieren Sie diesen JQuery-Code aus, um Formulare, Felder und das Verhalten zum Löschen/Entfernen dynamisch einzuschließen:
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $(".add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
} else {
alert('You Reached the limits')
}
});
$(wrapper).on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
<button class="add_form_field">Add New Field
<span style="font-size:16px; font-weight:bold;">+ </span>
</button>
<div><input type="text" name="mytext[]"></div>
</div>
