Ajouter un bout de code HTML lors du clic sur un bouton.

Version imprimable

Bonjour à tous.

Je vais essayé d'être le plus clair possible.

J'ai codé un formulaire avec une ligne de plusieurs balises positionné dans un tableau "theab" "tbody".

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="card shadow mb-4">
 
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Encadrement et Animation</h6>
        </div>
 
        <div class="card-body">
 
            <div>
                <button onclick="javascript:void(0);" class="btn btn-primary add_button">Ajouter une personne</button>
            </div>
 
            <div class="table-responsive mt-2">
                <table class=" " id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr class="align-middle text-center">
                            <th>Intervenant / Encadrant</th>
                            <th>Début d'intervention</th>
                            <th>Fin d'intervention</th>
                            <th></th>
                        </tr>
                    </thead>
 
                    <tbody class="field_wrapper">
                        <tr>
                            <td><input type="text" class="form-control" id="nom_intervenant"></td>
                            <td><input type="datetime-local" class="form-control" id="dateheure_debut_intervention""></td>
                                    <td><input type="datetime-local" class="form-control"
                                    id="dateheure_fin_intervention"></td>
                            <td class="align-middle text-center"><a href="javascript:void(0);" class="remove_button"
                                    title="Supprimer l'intervenant">
                                    <img src=".\img\trash-solid.svg" width="20" />
                                </a></td>
 
                        </tr>

Je souhaiterais, lorsque l'utilisateur clic sur le bouton ajouter, insérer un bloc "html" ajoutant une nouvelle ligne.

Ne maîtrisant pas Js, j'ai cherché sur le net et suis tombé sur ce bout de code qui semble parfait pour ce que je souhaite faire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript">
    $(document).ready(function(){
        var maxField = 10; //Input fields increment limitation
        var addButton = $('.add_button'); //Add button selector
        var wrapper = $('.field_wrapper'); //Input field wrapper
        var fieldHTML = '<div><tr> <td><input type="text" class="form-control" id="nom_intervenant"></td> <td><input type="datetime-local" class="form-control" id="dateheure_debut_intervention""></td> <td><input type="datetime-local" class="form-control" id="dateheure_fin_intervention"></td> <td class="align-middle text-center"><a href="javascript:void(0);" class="remove_button" title="Supprimer l\'intervenant"> <img src="./img/trash-solid.svg" width="20" /> </a></td>  </tr></div>'; //New input field html 
        var x = 1; //Initial field counter is 1
 
        //Once add button is clicked
        $(addButton).click(function(){
            //Check maximum number of input fields
            if(x < maxField){ 
                x++; //Increment field counter
                $(wrapper).append(fieldHTML); //Add field html
            }
        });
 
        //Once remove button is clicked
        $(wrapper).on('click', '.remove_button', function(e){
            e.preventDefault();
            $(this).parent('div').remove(); //Remove field html
            x--; //Decrement field counter
        });
    });
    </script>

Cela fonctionne sauf que... Lorsque je clic sur le bouton, la ligne s'ajoute mais tous les champs se trouve sur la première colonne. (La fonction ajouter / supprimer fonctionne correctement.)

J'ai donc modifié le bloc à ajouter en supprimant la balise "div" pour ne laisser que la balise "tr". Cette fois ci, cela fonctionne et m'insère correctement les données sur ma page mais la fonction "supprimé" ne fonctionne plus.

J'ai modifié

Code:

$(this).parent('div').remove(); //Remove field html

Code:

$(this).parent('tr').remove(); //Remove field html

mais cela ne fonctionne pas.

Il doit probablement me manquer quelque-chose mais je ne trouve pas quoi.

Merci d'avance pour l'aide précieuse que vous pourrez m'apporter.

Je précise que je n'utilise peut-être pas la bonne méthode et suis prêt à changer complétement le script si besoin mais mes compétences en Js sont toutes récentes.

08/04/2022, 15h13
SpaceFrog

Le souci vient du fait que le code ajouté après le onload de la page ne se voit pas affecter les evenements attribués dans le onload.

Il faut dans le onlad (document ready) utiliser le on('click' ... avec trois paramètres afin d'attribuer l'évènement à partir du parent et ainsi faire en sorte que les éléments ajoutés dynamiquement après le onload se voient attribué l'event.
30/05/2022, 15h27
Trebor

Bonjour SpaceFrog,

Merci pour cet élément de réponse. Désolé pour le délai de réponse mais j'ai été pris par mes obligations professionnelles. Je me remet sur ce projet pour mon association.

Je suis débutant en Js. J'ai compris qu'il me manquait un paramètre au niveau du Onload mais je ne vois pas comment l'ajouter. J'ai pas mal cherché sur le net mais je n'ai rien trouvé qui correspondrait à ce que je souhaite faire.

Peut-être pourrais-tu m'orienter vers une piste, un lien, un tuto pour me permettre de comprendre ce que je dois faire / modifier pour parvenir à mes fins ?

Merci d'avance pour ton aide.

Bonjour,

C'est parfois plus facile d'expliquer un bout de code que d'expliquer comment l'écrire :D
Donc voici ce qu'a décrit @SpaceFrog :

Plutot que d'intercepter l'événement click après l'événement ready :

Code:

$(addButton).click(function(){

On va plutôt l'intercepter partout, et ce même sur le nouvel HTML en utilisant la méthode .on()
Il existe d'ailleurs déjà une fois son utilisation donc voici comment je l'écrirais :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function () {
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div><tr> <td><input type="text" class="form-control" id="nom_intervenant"></td> <td><input type="datetime-local" class="form-control" id="dateheure_debut_intervention""></td> <td><input type="datetime-local" class="form-control" id="dateheure_fin_intervention"></td> <td class="align-middle text-center"><a href="javascript:void(0);" class="remove_button" title="Supprimer l\'intervenant"> <img src="./img/trash-solid.svg" width="20" /> </a></td>  </tr></div>'; //New input field html 
    var x = 1; //Initial field counter is 1
    //
    $(wrapper)
            .on('click', '.add_button', function (e) {
                e.preventDefault();
                //Check maximum number of input fields
                if (x < maxField) {
                    x++; //Increment field counter
                    $(wrapper).append(fieldHTML); //Add field html
                }
            })
            //Once remove button is clicked
            .on('click', '.remove_button', function (e) {
                e.preventDefault();
                $(this).parent('div').remove(); //Remove field html
                x--; //Decrement field counter
            });
});

Le fait d'écrire les appels de méthodes à la chaine comme j'ai fait, c'est juste pcq c'est un chouilla moins rigoureux en mémoire que de les écrire un par un mais c'est l'équivalent à :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
    $(wrapper).on('click', '.add_button', function (e) {
        e.preventDefault();
        //Check maximum number of input fields
        if (x < maxField) {
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); //Add field html
        }
    });
    $(wrapper).on('click', '.remove_button', function (e) {
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });

NB : wrapper et addButton sont déjà des référence jQuery, il ne faudrait donc pas écrire : $(variable) mais directement variable.
D'ailleurs, souvent en jQuery, si une variable est un object jQuery, on l'écrira avec un dollar, soit var $wrapper = $('.field_wrapper'); et var $addButton = $('.add_button');

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function () {
    var maxField = 10; //Input fields increment limitation
    var $wrapper = $('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div><tr> <td><input type="text" class="form-control" id="nom_intervenant"></td> <td><input type="datetime-local" class="form-control" id="dateheure_debut_intervention""></td> <td><input type="datetime-local" class="form-control" id="dateheure_fin_intervention"></td> <td class="align-middle text-center"><a href="javascript:void(0);" class="remove_button" title="Supprimer l\'intervenant"> <img src="./img/trash-solid.svg" width="20" /> </a></td>  </tr></div>'; //New input field html 
    var x = 1; //Initial field counter is 1
    //
    $wrapper
            // Add button
            .on('click', '.add_button', function (e) {
                e.preventDefault();
                //Check maximum number of input fields
                if (x < maxField) {
                    x++; //Increment field counter
                    $wrapper.append(fieldHTML); //Add field html
                }
            })
            // Remove button
            .on('click', '.remove_button', function (e) {
                e.preventDefault();
                $(this).parent('div').remove(); //Remove field html
                x--; //Decrement field counter
            });
});

01/06/2022, 10h19
SpaceFrog

@DarkStar: Merci d'avoir pris le temps d'expliciter mes propos, je suis très souvent succint dans mes interventions par faute de temps à consacrer au forum, j'essaye juste alors de mettre sur des pistes...