Dynamisches Erstellen einer bestimmten Anzahl von Eingabeformularelementen

Lesezeit: 5 Minuten

Benutzeravatar von xan
Xan

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.

Benutzeravatar von Xavi López
Xavi Lopez

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.

  • Ich habe deinen Rat befolgt. Aber wenn ich auf klicke, zeigt die Browserkonsole diesen Fehler: Uncaught TypeError: Cannot call method 'appendChild' of undefined

    – Xan

    13. Februar 2013 um 12:55 Uhr

  • Die Antwort so sehr hilfreich. Und wie kann ich dem Feld eine CSS-Klasse hinzufügen

    – Pravinraj Venkatachalam

    13. Juli 2017 um 7:14 Uhr

  • @Pravin Ich bin froh, dass es geholfen hat, siehe Wie füge ich einem bestimmten Element eine Klasse hinzu? Grundsätzlich verwenden input.className += ' someCSSClass';

    – Xavi Lopez

    13. Juli 2017 um 8:10 Uhr


  • Wenn ich das Formular absende, werden die dynamisch generierten neuen Felder nicht wie die anderen Felder abgeschickt, die Teil des ursprünglichen HTML-Codes waren. Sie erscheinen visuell und ich kann sie inspizieren, aber sie reichen nicht ein. Irgendwelche Ideen, warum das passieren würde?

    – Kreis1

    27. Juli 2018 um 15:45 Uhr


  • @circle1 Stellen Sie sicher, dass die dynamisch generierten Elemente eindeutig sind name Attribut. Beim Senden eines Formulars werden nur die Werte von Formularelementen mit einem Namensattribut übergeben.

    – Xavi Lopez

    27. Juli 2018 um 19:06 Uhr

Benutzeravatar von M. Lak
M.Lak

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 &nbsp; 
      <span style="font-size:16px; font-weight:bold;">+ </span>
    </button>
    <div><input type="text" name="mytext[]"></div>
</div>

  • Vielleicht mache ich etwas falsch, aber in meinem Fall führt jedes Drücken der Eingabetaste in einem Textfeld in diesem Formular dazu, dass die Funktion der Schaltfläche “Neues Feld hinzufügen” ausgelöst wird, was wahrscheinlich ein unerwünschtes Verhalten ist …

    – Maximus

    8. September 2020 um 21:10 Uhr

  • <button type="button" ...> und das Problem ist gelöst.

    – Maximus

    8. September 2020 um 21:18 Uhr


  • Hallo! Wenn ich die Daten der dynamischen Eingänge speichern möchte, wie kann ich sie alle wiederherstellen?

    – Hector Echeverri

    18. Februar 2021 um 15:43 Uhr

  • Gute Antwort. plus+. ABER … Vanille-Javascript ?? Manche Leute mögen es nicht, Bibliotheken hinzuzufügen.

    – James Walker

    5. Juni um 19:35 Uhr

  • @M. Nehmen wir an, wir erhöhen das Eingabeelement um 1 auf jeder click Veranstaltung und diese fields Werte werden mit übermittelt form wie können wir jeden abrufen input aufstellen values können Sie bitte die Antwort so aktualisieren, dass jeder input Feld wird dynamisch (eindeutig) id oder name attr

    – Azhar Uddin Scheich

    19. August um 12:42 Uhr

1433740cookie-checkDynamisches Erstellen einer bestimmten Anzahl von Eingabeformularelementen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy