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

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

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

Answer 3

J'ai suivi vos conseils. Mais lorsque je clique sur, la console du navigateur affiche cette erreur:Uncaught TypeError: Cannot call method 'appendChild' of undefined

xan

Answer 4

La réponse est tellement utile. Et comment puis-je ajouter une classe CSS au champ

Pravinraj Venkatachalam

Answer 5

3

@Pravin Heureux que cela ait aidé, voir Comment ajouter une classe à un élément donné? . Basiquement utiliserinput.className += ' someCSSClass';

Xavi López

Answer 6

1

Lorsque je soumets le formulaire, les nouveaux champs générés dynamiquement ne sont pas soumis comme les autres champs qui faisaient partie du HTML d'origine. Ils apparaissent visuellement et je peux les inspecter mais ils ne se soumettent pas. Des idées pourquoi cela arriverait-il?

circle1

Answer 7

@ circle1 Assurez-vous que les éléments générés dynamiquement ont un nameattribut unique . Seuls les éléments de formulaire avec un attribut de nom verront leurs valeurs transmises lors de la soumission d'un formulaire.

Xavi López

Answer 8

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

Answer 9

Peut-être que je fais quelque chose de mal, mais dans mon cas, toute pression sur Entrée dans un champ de texte de ce formulaire entraînera le déclenchement de la fonction du bouton `` Ajouter un nouveau champ '', ce qui est probablement un comportement indésirable ...

Maxi Mus

Answer 10

1

<button type="button" ...>et le problème est résolu.

Maxi Mus

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

Réponses: