web-dev-qa-db-fra.com

Ajout dynamique d'éléments de saisie à la forme

J'ai lu de nombreux blogs et publications sur l'ajout dynamique 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>

Donc, un utilisateur va entrer une valeur entière (je vérifie la validation en utilisant javascript) dans le champ input. Et en cliquant sur le lien Fill Details, le nombre correspondant de champs de saisie apparaîtra pour lui. Je veux y parvenir en utilisant javascript.

Je ne suis pas un pro en javascript. Je me demandais comment récupérer le nombre entier renseigné par l'utilisateur dans le champ input via le lien et en affichant le nombre correspondant de champs de saisie.

javascripthtmlforms
67
xan

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

Si vous souhaitez ajouter dynamiquement des éléments, vous devez avoir un conteneur où les placer. Par exemple, un <div id="container">. Créez de nouveaux éléments à l'aide de document.createElement() et utilisez appendChild() pour les ajouter chacun au conteneur. Vous voudrez peut-être générer un attribut significatif name (par exemple, name="member"+i pour 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 éléments <br/> avec document.createElement('br'). Si vous voulez simplement sortir du texte, vous pouvez utiliser document.createTextNode() à la 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 .

127
Xavi López

Essayez ce code JQuery pour inclure de manière dynamique le comportement de formulaire, de champ et 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>

Reportez-vous Demo Here

17
M. Lak