Ajout dynamique d'éléments d'entrée au formulaire

Question 1

J'ai lu de nombreux blogs et articles sur l'ajout dynamique d'ensembles de champs, mais ils donnent tous une réponse très compliquée. Ce dont j'ai besoin n'est pas si compliqué.

Mon code HTML:

<input type="text" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails">Fill Details</a>

Ainsi, un utilisateur entrera une valeur entière (je vérifie la validation en utilisant javascript) dans le inputchamp. Et en cliquant sur le Fill Detailslien, le nombre correspondant de champs de saisie apparaîtra pour qu'il puisse entrer. Je veux y parvenir en utilisant javascript.

Je ne suis pas un pro du javascript. Je pensais comment puis-je récupérer l'entier rempli par l'utilisateur dans le inputchamp via le lien et afficher le nombre correspondant de champs de saisie.

Question 2

Vous pouvez utiliser un onclickgestionnaire d'événements pour obtenir la valeur d'entrée du champ de texte. Assurez-vous de donner au champ un idattribut unique afin de pouvoir y faire référence en toute sécurité via document.getElementById():

Si vous souhaitez ajouter dynamiquement des éléments, vous devriez avoir un conteneur où les placer. Par exemple, a <div id="container">. Créez de nouveaux éléments à l'aide de document.createElement()et utilisez appendChild()pour ajouter chacun d'eux au conteneur. Vous pourriez être intéressé par la sortie d'un nameattribut significatif (par exemple name="member"+ipour chacun des <input>s générés dynamiquement s'ils doivent être soumis dans un formulaire.

Notez que vous pouvez également créer des <br/>éléments avec document.createElement('br'). Si vous souhaitez simplement afficher du texte, vous pouvez utiliser à la document.createTextNode()place.

De plus, si vous souhaitez effacer le conteneur à chaque fois qu'il est sur le point d'être rempli, vous pouvez utiliser hasChildNodes()et removeChild()ensemble.

<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>

Voir un exemple de travail dans ce JSFiddle .

Question 3

Essayez ce code JQuery pour inclure dynamiquement le formulaire, le champ et le comportement de suppression / suppression:

$(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>

Développer l'extrait

Référez la démo ici