Dynamisches Hinzufügen von Eingabeelementen zur Form

Ich habe viele Blogs und Beiträge zum dynamischen Hinzufügen von Feldsätzen 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 (ich überprüfe die Validierung mit Javascript) in das inputFeld ein. Wenn Sie auf den Fill DetailsLink klicken , wird die entsprechende Anzahl von Eingabefeldern angezeigt, die er eingeben kann. Ich möchte dies mit Javascript erreichen.

Ich bin kein Profi in Javascript. Ich habe darüber nachgedacht, wie ich die vom Benutzer im inputFeld eingegebene Ganzzahl über den Link abrufen und die entsprechende Anzahl von Eingabefeldern anzeigen kann.

javascript html forms

— xan
quelle

Antworten:

144

Sie können einen onclickEreignishandler verwenden, um den Eingabewert für das Textfeld abzurufen. Stellen Sie sicher, dass Sie dem Feld ein eindeutiges idAttribut geben, damit Sie sicher auf Folgendes 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 a <div id="container">. Erstellen Sie neue Elemente mit document.createElement()und appendChild()hängen Sie sie an den Container an. Möglicherweise möchten Sie ein aussagekräftiges nameAttribut ausgeben (z. B. name="member"+ifür jedes der dynamisch generierten <input>s, wenn diese in einem Formular eingereicht werden sollen.

Beachten Sie, dass Sie auch <br/>Elemente mit erstellen können document.createElement('br'). Wenn Sie nur Text ausgeben möchten, können Sie document.createTextNode()stattdessen verwenden.

Auch, wenn Sie den Behälter jedes Mal , es im Begriff ist , werden bevölkert löschen möchten, können Sie verwenden , hasChildNodes()und removeChild()zusammen.

<html>
<head>
    <script type='text/javascript'>
        function addFields(){
            // Number of inputs to create
            var number = document.getElementById("member").value;
            // Container <div> where dynamic content will be placed
            var container = document.getElementById("container");
            // Clear previous contents of the container
            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 sich ein Arbeitsbeispiel in dieser JSFiddle an .

— Xavi López
quelle

Ich bin deinem Rat gefolgt. Aber wenn ich auf klicke, zeigt die Browserkonsole diesen Fehler:Uncaught TypeError: Cannot call method 'appendChild' of undefined

— Xan

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

— Pravinraj Venkatachalam

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

— Xavi López

Wenn ich das Formular abschicke, werden die neuen Felder, die dynamisch generiert werden, nicht wie die anderen Felder übermittelt, die Teil des ursprünglichen HTML-Codes waren. Sie werden visuell angezeigt und ich kann sie überprüfen, aber sie reichen nicht ein. Irgendwelche Ideen, warum das passieren würde?

— Kreis1

@ circle1 Stellen Sie sicher, dass die dynamisch generierten Elemente ein eindeutiges nameAttribut haben. Nur Formularelemente mit einem Namensattribut erhalten beim Senden eines Formulars ihre Werte übergeben.

— Xavi López

Versuchen Sie diesen JQuery-Code, um das Verhalten von Formularen, Feldern und 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>

Erweitern Sie das Snippet

Siehe Demo hier

— M. Lak
quelle