it-swarm.com.de

Eingabeelemente dynamisch zum Formular hinzufügen

Ich habe viele Blogs und Beiträge zum dynamischen Hinzufügen von Feldern 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 Feld input ein. Und beim Klicken auf das Fill Details link erscheint die entsprechende Anzahl von Eingabefeldern, die er eingeben muss. Ich möchte dies mit Javascript erreichen.

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

67
xan

Sie können einen onclick -Ereignishandler verwenden, um den Eingabewert für das Textfeld abzurufen. Stellen Sie sicher, dass Sie dem Feld ein eindeutiges id Attribut geben, damit Sie sicher über document.getElementById() darauf verweisen können:

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 hängen Sie sie mit appendChild() an den Container an. Sie könnten daran interessiert sein, ein aussagekräftiges name -Attribut (z. B. name="member"+i Für jeden der dynamisch generierten <input> Auszugeben, wenn sie in einem Formular eingereicht werden sollen.

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

Wenn Sie den Container bei jedem Auffüllen löschen möchten, können Sie hasChildNodes() und removeChild() zusammen verwenden.

<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 ein funktionierendes Beispiel in diesem JSFiddle .

127
Xavi López

Probieren Sie diesen JQuery-Code aus, um das Verhalten "Formular", "Feld" 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>

Siehe Demo hier

17
M. Lak