Formulaire ajout de ligne dynamique récupération valeur

**sebcarrera** · 20/11/2018, 12h18

Bonjour tout le monde,

j'ai crée un formulaire PHP sous cette forme:

Nom : formulaire.png
Affichages : 885
Taille : 9,2 Ko

Avec l'aide de ce site j'ai réussi à ajouter une ligne / supprimer une ligne et insérer un champ masqué si la checkbox est cochée (case 3).

mon problème est que mon script php traite le $_post par indice => je récupère les résultats de la première ligne en consultant les $_post[xyz] au rang [0]
Le problème ce'st pour ma case 3, comment je peux affecter dans mon $_post[case3] une valeur quand la case est disabled?

Parce que si l'utilisateur désactive la case 3 sur la première ligne je n'aurais pas de $_post[case3][0]
par contre si sur la deuxième ligne il l'active et entre une valeur j'aurais (et c'est logique) un $_post[case3][0] alors que je suis sur mon rang [1].

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 change_case(ceci)
        {
            ceci.parentNode.childNodes[2].disabled = (ceci.checked) ? false : true;
 
        }
 
 
    </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
 <div class = "content">
        <fieldset>
            <br />
            <legend>Informations sur le(s) flux à ouvrir</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="choixACL[]">
                                    <option value=""> Veuillez choisir l'ACL </option>
                                    <option value="choix 1"> choix 1 </option>
                                    <option value="choix 2"> choix 2 </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" checked="checked" onclick="change_case(this);" />
 
                                <INPUT  type="text" name="case3[]">
                            </Td>
                            <td width="5%" ><INPUT type="text" name="case4[]" /> </Td>
                            <td width="5%" ><select name="liste2[]">
                                    <option value="TCP"> a </option>
                                    <option value="UDP"> 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>

Si vous aviez une idée

Invité · 20/11/2018, 14h21

Bonjour,

1- Je t'avais donné des CORRECTIONS A FAIRE (HTML).
Je constate que tu n'as RIEN fait...

Si tu n'écris pas le code de façon plus RIGOUREUSE, il ne faudra pas t'étonner.

2- pas la peine de mettre ton code JavaScript, qui n'intervient pas ici.

3-

Code :

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

1
2
                            <td width="20%" ><INPUT type="text" name="case1[]"  /></Td>
                            <td width="20%" ><INPUT type="text" name="case2[]"  /></Td>

La notation des name avec [] va créer les index automatiquement pour chaque ligne.

N.B. Tu n'as pas mis de name à ta checkbox !
Moi, j'ai mis "checkbox3".

Tu vas récupérer toutes les lignes avec :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$case1_array = $_POST['case1']; // array
foreach( $case1_array as $idx => $val )
{
   $case1 = $val;
   $case2 = $_POST['case1'][$idx]; // même ligne = même index
   // ATTENTION checkbox : SEULE les cases COCHEES sont renvoyées
   if( !empty($_POST['checkbox3'][$idx]) )
   {
      $case3 = $_POST['case3'][$idx]; // uniquement si la case est cochée
   } else {
      $case3 = '';
   }
...
}

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

Ah oui pardon pour les corrections j'ai repris le canevas de mon premier post.

J'ai nommé ma checkbox mais ça ne change pas grand chose en effet et du coup vu que j'utilise des checkbox j'ai compris qu'il était impossible de récupérer des valeurs quand celles-ci ne sont pas cochées:

$_post['choix1][0] = une valeur
$_post['case1][0] = une valeur
$_post['case2][0] = une valeur
$_post['case1][0] = je choisis de ne pas mettre de valeur => checkbox non cochée => $_post['case3'][0] n'existe pas
$_post['case4][0] = une valeur

en deuxième ligne

$_post['choix1][1] = une valeur
$_post['case1][1] = une valeur
$_post['case2][1] = une valeur
$_post['case1][1] = je choisis de mettre une valeur => checkbox cochée => $_post['case3'][0] existe et du coup mon script php pense que c'est affecté à la première ligne

$_post['case4][1] = une valeur

Je sèche du coup ce sera moins fengshui mais du coup je peux faire plutôt ça alors: une valeur " " par défaut dans ce champ et si cette valeur " " alors champ transparent => l'utilisateur clique dessus rentre une valeur et le champ redevient blanc

Invité · 20/11/2018, 16h41

Je t'ai écrit le code.
Je ne peux pas faire plus.

Le minimum serait que tu montres le tien.

**sebcarrera** · 20/11/2018, 16h54

Je comprends le code que tu as mis mais une fois le formulaire posté je ne vois pas comment je pourrais l'appliquer.
Il faut que j'exécute ce code ligne par ligne pour que ça fonctionne mais je ne valide le formulaire qu'une seule fois.

Oui effectivement je vais mettre mon code, j'utilise donc un moteur de template (donc j'ai ce code dans un fichier tpl.php) pour afficher ce formulaire : (ps: j'ai corrigé ce que tu m'avais conseillé ^^)

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>
 
        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 change_case(ceci)
        {
            ceci.parentNode.childNodes[2].disabled = (ceci.checked) ? false : true;
 
        }
 
 
    </script>

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
<div class = "content">
        <fieldset>
            <br />
            <legend>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="choix2[]">
                                    <option value=""> Veuillez choisir </option>
                                    <option value="choix 1"> choix 1 </option>
                                    <option value="choix 2"> choix 2 </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" name="checkbox[]"  checked="checked" onclick="change_case(this);" />
 
                                <INPUT  type="text" name="case3[]">
                            </td>
                            <td width="5%" ><input type="text" name="case4[]" /> </td>
                            <td width="5%" ><select name="liste2[]">
                                    <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>

une fois le formulaire validé la page verif.php contient ce code:

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
<?php
 
session_start();
 
 
echo "<p>*** Valeurs récupérées par méthode POST :***</p>\n";
echo "<pre>";
print_r($_POST);
echo"</pre>";
echo"<br>";
 
echo "<p>*** Valeurs récupérées par méthode GET :***</p>\n";
echo "<pre>";
print_r($_GET);
echo"</pre>";
 
echo"<br>";
echo "<p>*** Valeurs récupérées dans la variable SESSION :***</p>\n";
echo"<br>";
echo"<pre>";
print_r($_SESSION);
echo"</pre>";

**sebcarrera** · 20/11/2018, 17h02

et voici ce que je récupère avec cet exemple:

Nom : formulaire2.png
Affichages : 812
Taille : 9,2 Ko

Nom : formulaire3.png
Affichages : 806
Taille : 9,8 Ko

Invité · 20/11/2018, 17h09

1- Tu n'as même pas tenté de copier-coller mon code pour voir ce que ça donne ?

2- Argh... J'entrevois le problème... certainement lié au fait d'appliquer "disabled".

On voit à la fin de ce que tu montres :

Code :

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

1
2
[case3]
   [0] => b

Or, ça devrait être (au vu de l'image du tableau) :

Code :

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

1
2
[case3]
   [1] => b

En conséquence, je te propose un changement dans le script JS :

au lieu de mettre l'input en "disabled", mets-le en "readonly" (en lecture seule).

Code :

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

1
2
3
4
5
6
7
8
9
10
        function change_case(ceci)
        {
            if (ceci.checked)
            {
                ceci.parentNode.childNodes[2].readOnly = true; // readOnly : en lecture seule
                ceci.parentNode.childNodes[2].value= ''; // on vide
             } else {
                ceci.parentNode.childNodes[2].readOnly = false : true;
             }
        }

Ainsi, on devrait récupérer le bon indice.

N.B. Si tu pouvais mettre autre chose que "a" et "b" dans tous les champs... ce serait plus clair, non ?

**sebcarrera** · 20/11/2018, 17h24

Aie en fait j'ai parlé trop vite ton code à tester plus haut fonctionne mais me mets des valeurs même quand mon champ est grisé.

La solution avec le nouveau script de la fonction function change_case(ceci) fait sauter la fonction addRow (tableID) et ne me permets plus l'ajout d'une nouvelle ligne.

Pour faire simple j'ai fait un code plus parlant que a et b:

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
<div class = "content">
        <fieldset>
            <br />
            <legend>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"> Fille ou garçon </th>
                        <th> nom </th>
                        <th> prénom</th>
                        <th> deuxième prénom</th>
                        <th> age</th>
                        <th > Absent/présent</th>
 
                        <tr >
 
                            <td width="5%" ><input type="checkbox" name="chk" /></Td>
                            <td width="25%" ><select name="choix2[]">
                                    <option value=""> Veuillez choisir </option>
                                    <option value="choix 1"> Fille </option>
                                    <option value="choix 2"> Garçon </option>
 
 
                                </select>
                            </td>
                            <td width="20%" ><input type="text" name="nom[]"  /></td>
                            <td width="20%" ><input type="text" name="prenom[]"  /></td>
                            <td width="20%" ><input type="checkbox" name="checkbox[]"  checked="checked" onclick="change_case(this);" />
 
                                <INPUT  type="text" name="deuxiemePrenom[]">
                            </td>
                            <td width="5%" ><input type="text" name="age[]" /> </td>
                            <td width="5%" ><select name="presence[]">
                                    <option value="absent"> absent </option>
                                    <option value="present"> present </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>

Voici l'exemple:

Nom : formulaire2.png
Affichages : 818
Taille : 10,7 Ko

Nom : formulaire3.png
Affichages : 790
Taille : 11,0 Ko

**sebcarrera** · 20/11/2018, 18h12

Du coup avec un exemple plus parlant effectivement on peut voir que j'ai Zidane qui aurait comme deuxième prénom Simone ^^

Invité · 20/11/2018, 18h20

Forcément... j'ai fait une erreur (de copier-coller) : (tu devrais REGARDER DANS LA CONSOLE : tu y verrais les erreurs !)

Et si j'ai bien compris, c'est quand la case est cochée qu'on peut remplir le champ (c'est donc le contraire de ce que j'avais écrit) :

Code :

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

1
2
3
4
5
6
7
8
9
10
        function change_case(ceci)
        {
            if (ceci.checked) // checkbox COCHEE : on peut remplir
            {
                ceci.parentNode.childNodes[2].readOnly = false;
             } else { // checkbox PAS cochee
                ceci.parentNode.childNodes[2].readOnly = true; // readOnly : en lecture seule
                ceci.parentNode.childNodes[2].value= ''; // on vide
             }
        }

Par contre (après tests), le readonly ne change rien au problème.
Les index des checkbox commencent toujours à 0 (sans tenir compte de l'index de la ligne)
Mais bon... vu qu'on vide le champ... ça va.

**sebcarrera** · 20/11/2018, 18h27

C'est parfait!!!!!!!!!!!
Merci beaucoup à toi, il me reste beaucoup de chose encore à apprendre avec ce Javascript.

Très bonne soirée à tous

Formulaire ajout de ligne dynamique récupération valeur

Langage PHP

Discussions similaires

Partager

Partager