Discussion :

[sebcarrera]

Bonjour tout le monde je reviens encore avec mon formulaire qui prend forme petit à petit et avec lequel j'en apprends tous les jours ^^

Cette fois ci je me posais la question de la balise <select> qui affiche une liste déroulante à l'écran.
Je souhaiterais que celle ci soit dynamique dans le sens où en fonction d'une variable array() chaque ligne d'option prenne la valeur d'une ligne de mon tableau.

Par exemple, un formulaire d'inscription d'enfant au collège ou au lycée.

1) on clique sur l'onglet collège ou l'onglet lycée
2) le formulaire s'affiche et ma liste classe affiche les classes en fonction de ce choix.

J'ai essayé une boucle php à l'intérieur de mon formulaire mais ça fonctionne pas j'ai du me planter dans la syntaxe

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
64
65
66
67
68
<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)
        {
            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
            }
        }
 
 
    </script>

exemple de 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
67
68
69
70
71
72
<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"> Classe </th>
                        <th> nom </th>
                        <th> prénom</th>
                        <th> deuxième prénom</th>
                        <th> age</th>
                        <th > Fille/Garçon</th>
 
                        <tr >
 
                            <td width="5%" ><input type="checkbox" name="chk" /></Td>
                            <td width="25%" >
                                <select name="classe[]">
                                    <option value=""> Classe </option>
                                  // c'est ici où je bloque 
<?php
$college =  array("sixième", "cinquième", "quatrième", "troisième");
 
for($i = 0; $i < count($college);$i++)
{
  echo "<option> $college[$i] </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="sexe[]">
                                    <option value="choix 1"> Fille </option>
                                    <option value="choix 2"> Garçon </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>

[Manequin]

Bonsoir, oriente ta recherche vers les listes liées en php ou ajax.

Cordialement.

[badaze]

Un des principes de l'informatique est ne jamais stocker des valeurs "difficiles" à interpréter.

Code html :

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

1
2
3
4
5
 
<select name="sexe[]">
    <option value="choix 1"> Fille </option>
    <option value="choix 2"> Garçon </option>
</select>

On n'enregistrera pas choix 1 ou choix 2. Mais 1 ou 2.

Code html :

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

1
2
3
4
5
 
<select name="sexe[]">
    <option value="1"> Fille </option>
    <option value="2"> Garçon </option>
</select>

Même problème avec "sixième", "cinquième", etc...

De plus tu utilises un checkbox. Or les checkboxes ne sont valorisés (c'est-à-dire transmis par method="post") que si et seulement si ils sont cochés. De ce fait et bien que tu aies mis de [] il y aura un décalage. Par exemple si tu coches la seconde ligne, la coche sera mise dans le premier poste du tableau et donc ce sera comme si tu avais coché la première. Pour pallier ce problème, il faut mettre un indice sur chaque ligne => name="nom[1]" ... name="nom[2]" etc...

[sebcarrera]

Merci manequin et badaze pour les conseils, j'ai écrit vite fait cet exemple qui ne sera pas mon formulaire définitif, je veillerais à y faire attention en effet.
Pour la checkbox (celle de gauche) elle me sert uniquement à la fonction javascript de suppression de ligne.
L'autre checkbox me sert à interdir de saisir des infos dans les cases à sa droite quand celle ci est décochée (j'aurais aimé griser le champ mais quand je lance la fonction ajouter une ligne les propriétés ne sont pas reproduites).

Là je cherchais à créer des options de mon select à partir d'un tableau de données. 1 ligne - 1 option

J'utilise le moteur de template smarty et c'est pour ça que ma boucle ne fonctionnera pas je pense.

[sebcarrera]

Je viens de trouver ce que je cherchais et effectivement le moteur Smarty me permet de réaliser une liste de'option dynamique avec la fonction
{html_options value=$... options=$....}

Je pense qu'il faudrait pour le coup déplacer mon post dans la section Smarty