Ajout de ligne supplémentaire + ++

**sebcarrera** · 16/11/2018, 10h55

Bonjour à toutes et à tous,

j'ai créé un formulaire dynamique pour une page .php.
Je sens que je ne suis pas loin de terminer celui-ci mais je rencontre encore un soucis.

Mon formulaire ressemble à ça:
Nom : formulaire.png
Affichages : 209
Taille : 9,5 Ko

Nom : formulaire.png
Affichages : 209
Taille : 9,5 Ko

Je souhaite pour la case 3 masquer ou afficher le champ en fonction de la checkbox juste devant la case.
Le problème c'est que mon script fonctionne pour la première ligne mais pas les suivantes (quand je créé une nouvelle ligne cette propriété ne fonctionne plus).

Pouvez-vous m'aider ?

Merci

mon script:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<SCRIPT language="javascript">
 
    function addRow(tableID) {
 
        var table = document.getElementById(tableID);
 
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
 
        var colCount = table.rows[0].cells.length;
 
        for (var i = 0; i < colCount; i++) {
 
            var newcell = row.insertCell(i);
 
            newcell.innerHTML = table.rows[1].cells[i].innerHTML;
            //alert(newcell.childNodes);
            switch (newcell.childNodes[0].type) {
                case "text":
                    newcell.childNodes[0].value = "";
                    break;
                case "checkbox":
                    newcell.childNodes[0].checked = false;
                    break;
                case "select-one":
                    newcell.childNodes[0].selectedIndex = 0;
                    break;
            }
        }
    }
 
    function deleteRow(tableID) {
        try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
 
            for (var i = 0; i < rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if (null != chkbox && true == chkbox.checked) {
                    if (rowCount <= 1) {
                        alert("On ne peut pas supprimer toutes les lignes.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }
 
 
            }
        } catch (e) {
            alert(e);
        }
    }
    function changement()
    {
        if (document.getElementById('cb').checked)
            document.getElementById('coucou').disabled = true;
        else
            document.getElementById('coucou').disabled = false;
    }
</SCRIPT>

mon formulaire

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<div class = "content">
    <fieldset>
        <br />
        <legend>Mon formulaire</legend>
        <br />
 
 
        <form name="myform" id="myform" method="post" action="./index.php?action=verif">
 
            <div class="donnees">
                <TABLE id="dataTable"style="background-color: transparent">
 
                    <th> Choix&nbsp;</th>
                    <th size="40"> Liste 1: </th>
                    <th> Case 1: </th>
                    <th> Case 2:</th>
                    <th> Case 3:</th>
                    <th> Case 4:</th>
                    <th > Liste 2:</th>
 
                    <tr >
 
                        <td width="5%" ><INPUT type="checkbox" name="chk" /></Td>
                        <td width="25%" ><select name="choix1[]">
                                <option value=""> Veuillez choisir l'option </option>
                                <option value="1"> 1 </option>
                                <option value="2"> 2 </option>
                                <option value="3"> 3 </option>
                                <option value="4"> 4 </option>
 
 
                            </select>
                        </td>
                        <td width="20%" ><INPUT type="text" name="case1[]"  /></Td>
                        <td width="20%" ><INPUT type="text" name="case2[]"  /></Td>
                        <td width="20%" ><input type="checkbox" id="cb" onclick="changement()" />
                            <input type="text" id="coucou" name="case3[]"/>
                        </Td>
                        <td width="5%" ><INPUT type="text" name="case4[]" /> </Td>
                        <td width="5%" ><select name="choix2[]">
                                <option value="A"> A </option>
                                <option value="B"> B </option>
 
                            </select>
                        </Td>
 
 
 
 
                    </TR>
 
                </TABLE>
            </div>
            </br>
            <div class = "boutons">
                <INPUT type="button" style = "width: 170px;left: 448px;position:absolute" class = "greenButton" value="Ajouter une ligne" onclick="addRow('dataTable')" />
                <INPUT type="button" style = "width: 170px;left: 248px;position:absolute" class = "redButton" value="Supprimer une ligne" onclick="deleteRow('dataTable')" />
                <INPUT type="submit" style = "width: 170px;left: 648px;position:absolute" value="Valider"> <br>
            </div>
            </br>
        </form>
 
 
    </fieldset>
 
</div>

Invité · 16/11/2018, 11h29

Bonjour,

1- Pour commencer :

remplace <SCRIPT language="javascript"> par <script>. C'est suffisant.
écris les balises en minuscules

2-

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
                        <td width="20%" ><input type="checkbox" id="cb" onclick="changement()" />
                            <input type="text" id="coucou" name="case3[]"/>
                        </Td>

On ne peut pas utiliser d'attribut id ici : un id DOIT ETRE UNIQUE.
Or, là, tu les dupliques à chaque nouvelle ligne.
Il faut utiliser des classes.

**shroomsconect** · 16/11/2018, 11h30

Bonjour,

Alors, déjà, wouaoooooooooow!!! Pas de <br> en dehors de la balise <p> ou semblable, enfin, c'est un détail.

J'ai remarqué qu'il y avait des erreurs dans votre code.

Voici le code rectifiait

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
<div class = "content">
  <fieldset>
    <br>
    <legend>Mon formulaire</legend>
    <br>
 
    <form action="./index.php?action=verif" name="myform" id="myform" method="post">
      <div class="donnees">
        <table id="dataTable" style="background-color: transparent"> 
          <tr>
            <th> Choix&nbsp;</th>
            <th size="40"> Liste 1: </th>
            <th> Case 1: </th>
            <th> Case 2:</th>
            <th> Case 3:</th>
            <th> Case 4:</th>
            <th> Liste 2:</th>
          </tr>
          <tr>
            <td width="5%">
              <input type="checkbox" name="chk">
            </td>
            <td width="25%" >
              <select name="choix1[]">
                <option value="">Veuillez choisir l'option</option>
                <option value="1"> 1 </option>
                <option value="2"> 2 </option>
                <option value="3"> 3 </option>
                <option value="4"> 4 </option>
              </select>
            </td>
            <td width="20%" >
              <input type="text" name="case1[]">
            </td>
            <td width="20%" >
              <input type="text" name="case2[]">
            </td>
            <td width="20%" >
              <input type="checkbox" id="cb" onclick="changement()">
              <input type="text" id="coucou" name="case3[]">
            </td>
            <td width="5%" >
              <input type="text" name="case4[]">
            </td>
            <td width="5%" >
              <select name="choix2[]">
                <option value="A"> A </option>
                <option value="B"> B </option>
              </select>
            </td>
          </tr>
        </table>
      </div>
      <br>
 
      <div class = "boutons">
        <input type="button" style="width: 170px;left: 448px;position: absolute" class="greenButton" value="Ajouter une ligne" onclick="addRow('dataTable')">
        <input type="button" style = "width: 170px;left: 248px;position: absolute" class="redButton" value="Supprimer une ligne" onclick="deleteRow('dataTable')">
        <input type="submit" style="width: 170px;left: 648px;position: absolute" value="Valider">
        <br>
      </div>
      <br>
    </form> 
  </fieldset>
</div>

Essaie déjà avec ce code et après j’essaierais de voir ce qui ne va pas.

**sebcarrera** · 16/11/2018, 11h37

Effectivement y'avait des petites coquilles

Merci à vous deux pour les correctifs.

En effet jreaux62 j'ai capté pour les id et le pourquoi ça fonctionne pas dès la deuxième ligne.

Par contre comment modifier mon script pour utiliser une classe plutôt qu'un id?

**shroomsconect** · 16/11/2018, 11h45

Envoyé par sebcarrera

Par contre comment modifier mon script pour utiliser une classe plutôt qu'un id?

Il suffit d'utiliser querySelectorAll() lien en javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
let elem=document.querySelectorAll('.class');// La recherche se fait comme en CSS
 
for(let i=0;i<elem.length;i++){
 console.log('elem[i]');// Affiche l'élément dans la console, si tu ne sais pas ce que c'est, recherche "console log javascript sur ecosia ;)"
}

**SpaceFrog** · 16/11/2018, 11h47

tu peux rester sur les id en les incrémentant ...

tu peux par exemple avoir un documentfragment que tu clones et y modifier les id par incrément

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

id= id+"_"+i

tu peux également faire un pointage par selecteur de classe ou par selecteur relatif par rapport à l'élement portant l'event.

Tu peux également passer par les attributs data-

Invité · 16/11/2018, 11h54

Une solution, sans id ni classe ni data-xx :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
                        <td width="20%" ><input type="checkbox" onclick="change_case(this);" />
                            <input type="text" name="case3[]"/>
                        </td>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
	function change_case(ceci)
	{
		ceci.parentNode.childNodes[2].disabled = (ceci.checked)? true : false;
	}

Explication :

ceci : la checkbox
ceci.parentNode : cible le <tr> parent
ceci.parentNode.childNodes[2] cible le 2ème <input>

Remarque : le [2] ne veut pas dire "2ème input", mais "3ème noeud" (les index commencent à 0)
Ajouter dans la fonction pour voir :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

		console.log( ceci.parentNode.childNodes );

**SpaceFrog** · 16/11/2018, 11h57

@jreaux

tu peux également faire un pointage par selecteur de classe ou par selecteur relatif par rapport à l'élement portant l'event.

Invité · 16/11/2018, 12h08

@SpaceFrog
OK...
J'ai remplacé "Une autre méthode..." par "Une solution..." dans mon précédent message.

Par contre... je rejoins shroomsconect sur ce coup là :
ta phrase n'est pas évidente à appréhender, surtout pour un débutant, sans un exemple...

@shroomsconect

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

let elem=document.querySelectorAll('class');

1- il faut écrire .querySelectorAll('.class') (avec un point, comme en CSS effectivement).

2- ça ne va pas fonctionner ici, car les lignes sont créées dynamiquement (à part la 1ère).
Par conséquent, les éléments NE sont PAS dans le DOM.

Il faut alors "ruser", et utiliser la délégation :

Comprendre la délégation d'événement en JavaScript

**shroomsconect** · 16/11/2018, 13h16

Dans ce cas si j'ai bien compris, utilisons le document load.

Non, j'ai mal compris, heum...

On créer des objets node pour les rajouter au document, dans ce cas nous mettons l’événement à ce moment là.

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function fonctionBlabla(e){
 console.log(e);//On regarde l'élément cliqué, dans la console
}
 
let p=document.createElement("p");
let text=document.createTextNode("Je créer une balise avec le JS, c'est trop bien!");
 
p.appendChild(text);
p.addEventListener('click',fonctionBlabla);
 
document.body.appendChild(p);// Je rajoute l'élément P à la fin du corps du document
 
// Bon, je crois que je me suis un peu perdu dans ton histoire, mais cela devrait quand même t'aider.

**SpaceFrog** · 16/11/2018, 13h33

c'est une possibilité si tu ne passe pas pas la delegation

**sebcarrera** · 20/11/2018, 10h35

Je viens de mettre en place la solution de jreaux62 ça fonctionne parfaitement.

Merci beaucoup à vous tous puisque j'ai appris aussi pas mal de trucs avec vos réponses.

Par contre pour mes résultats à la fin j'ai un petit problème.
Comment je peux affecter dans mon $_post[choix3] une valeur quand la case est disabled car si par exemple
l'utilisateur ne fait pas le choix 3 sur la première ligne mais le fait sur la deuxième à ma ligne [0] du $_post de chaque colonne j'aurais une valeur (dont le choix 3 qui devrait normalement correspondre à la position [1]).

**SpaceFrog** · 20/11/2018, 11h51

JE en saurais trop te conseiller que de clore ce post (résolu)
et d'en ouvrir un nouvea avec ta nouvelle question sur un autre sujet

Ajout de ligne supplémentaire + ++

JavaScript

Discussions similaires

Partager

Partager