[AJAX] effacement de ma page après validation

Version imprimable

Bonjour à tous,

j'ai un select en début de page, après avoir fait ma sélection, un autre select apparait. Après avoir fait mon choix sur celui ci, un formulaire apparait.

J'entre mes données et je clique sur valider. Là, mon tableau disparait et je me retrouve au début, c'est à dire mon 1er select.

J'ai utilisé Ajax pour mes select

Voici ce que j'ai tenté mais php me dit qu'il ne connait pas la variable nomMetal

Code:

1
2
 
isset($_POST['nomMetal']) ? $_POST['nomMetal'] : ''

Voici le code de mon formulaire

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
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
 
<form action="" method="POST">
                       <table class="formSimple">
                           <tbody><tr>
                               <td>Métal</td>
                               <td>
                                   <select name="nomMetal" id="nomMetal" onchange="return change20();">
                                       <option value="" selected="selected"></option>
                                       <option value="Ag">Ag</option>
                                       <option value="Au">Au</option>
                                       <option value="Ni">Ni</option>
                                       <option value="Pd/Ni">Pd/Ni</option>
                                       <option value="Sn">Sn</option>
                                       <option value="Sn/Pb">Sn/Pb</option>
                                       <option value="Stripper">Stripper</option>
                                   </select>
                               </td>
                           </tr>
                       </tbody></table>
                   </form>
 
 
                <div id="divRetour20"><form action="" method="POST">
   <table class="formSimple">
       <tbody><tr>
           <td>Sélectionnez le nom d'un modèle : </td>
           <td>
               <select name="nomJourFAJ" id="nomJourFAJ" onchange="return change21();">
                   <option value="" selected="selected"></option>
                   <option value="Mardi Au">Mardi Au</option>
                   <option value="Mercredi Au">Mercredi Au</option>
               </select>
           </td>
       </tr>
   </tbody></table>
   <input id="nomMetal" value="Au" type="hidden">
</form>
 
</div>
 
                <div id="divRetour21"><form id="modifierMetauxPrecieux" action="" method="POST">
   <table class="faj1">
       <caption>Stock de sels de métaux précieux</caption>
       <thead bgcolor="#DAA520">
           <tr>
               <th rowspan="2" class="sel">Sel</th>
               <th colspan="4" class="colGrp4">Pré-coffre (kg)</th>
               <th colspan="4" class="colGrp4">Consignation (kg)</th>
               <th colspan="4" class="colGrp4">Coffre (kg)</th>
           </tr>
           <tr>
               <th>J-1</th>
               <th>Entrées</th>
               <th>Sorties</th>
               <th>Total</th>
               <th>J-1</th>
               <th>Entrées</th>
               <th>Sorties</th>
               <th>Total</th>
               <th>J-1</th>
               <th>Entrées</th>
               <th>Sorties</th>
               <th>Total</th>
           </tr>
       </thead>
       <tbody bgcolor="#DAA520">
           <tr>
               <td>Cyanure Au (Au)</td>
               <td><input size="5" name="valeurMP[0]" id="valeurMP[0]" type="text"></td>
               <td><input size="5" name="valeurMP[1]" id="valeurMP[1]" type="text"></td>
               <td><input size="5" name="valeurMP[2]" id="valeurMP[2]" type="text"></td>
               <td><input size="5" name="valeurMP[3]" id="valeurMP[3]" type="text"></td>
               <td><input size="5" name="valeurMP[4]" id="valeurMP[4]" type="text"></td>
               <td><input size="5" name="valeurMP[5]" id="valeurMP[5]" type="text"></td>
               <td><input size="5" name="valeurMP[6]" id="valeurMP[6]" type="text"></td>
               <td><input size="5" name="valeurMP[7]" id="valeurMP[7]" type="text"></td>
               <td><input size="5" name="valeurMP[8]" id="valeurMP[8]" type="text"></td>
               <td><input size="5" name="valeurMP[9]" id="valeurMP[9]" type="text"></td>
               <td><input size="5" name="valeurMP[10]" id="valeurMP[10]" type="text"></td>
               <td><input size="5" name="valeurMP[11]" id="valeurMP[11]" type="text"></td>
           </tr>
           <tr>
               <td>Chlorure Pd (Pd/Ni)</td>
               <td><input size="5" name="valeurMP[0]" id="valeurMP[0]" type="text"></td>
               <td><input size="5" name="valeurMP[1]" id="valeurMP[1]" type="text"></td>
               <td><input size="5" name="valeurMP[2]" id="valeurMP[2]" type="text"></td>
               <td><input size="5" name="valeurMP[3]" id="valeurMP[3]" type="text"></td>
               <td><input size="5" name="valeurMP[4]" id="valeurMP[4]" type="text"></td>
               <td><input size="5" name="valeurMP[5]" id="valeurMP[5]" type="text"></td>
               <td><input size="5" name="valeurMP[6]" id="valeurMP[6]" type="text"></td>
               <td><input size="5" name="valeurMP[7]" id="valeurMP[7]" type="text"></td>
               <td><input size="5" name="valeurMP[8]" id="valeurMP[8]" type="text"></td>
               <td><input size="5" name="valeurMP[9]" id="valeurMP[9]" type="text"></td>
               <td><input size="5" name="valeurMP[10]" id="valeurMP[10]" type="text"></td>
               <td><input size="5" name="valeurMP[11]" id="valeurMP[11]" type="text"></td>
           </tr>
           <tr>
               <td>Sulfate Pd (Pd/Ni)</td>
               <td><input size="5" name="valeurMP[0]" id="valeurMP[0]" type="text"></td>
               <td><input size="5" name="valeurMP[1]" id="valeurMP[1]" type="text"></td>
               <td><input size="5" name="valeurMP[2]" id="valeurMP[2]" type="text"></td>
               <td><input size="5" name="valeurMP[3]" id="valeurMP[3]" type="text"></td>
               <td><input size="5" name="valeurMP[4]" id="valeurMP[4]" type="text"></td>
               <td><input size="5" name="valeurMP[5]" id="valeurMP[5]" type="text"></td>
               <td><input size="5" name="valeurMP[6]" id="valeurMP[6]" type="text"></td>
               <td><input size="5" name="valeurMP[7]" id="valeurMP[7]" type="text"></td>
               <td><input size="5" name="valeurMP[8]" id="valeurMP[8]" type="text"></td>
               <td><input size="5" name="valeurMP[9]" id="valeurMP[9]" type="text"></td>
               <td><input size="5" name="valeurMP[10]" id="valeurMP[10]" type="text"></td>
               <td><input size="5" name="valeurMP[11]" id="valeurMP[11]" type="text"></td>
           </tr>
       </tbody>
   </table>
   <table class="formSimple">
   <caption>Observations</caption>
       <tbody><tr>
           <td>
               <textarea name="remTbl1" id="remTbl1" rows="3" cols="125"></textarea>
           </td>
       </tr>
   </tbody></table>
   <table class="formSimple">
       <tbody><tr>
           <td>
               <input name="validerMP" value="Valider" type="submit">
           </td>
       </tr>
   </tbody></table>
</form

Pourriez vous m'aider ?

08/07/2013, 14h39
zozoman

Pour être clair, je voudrais que l'utilisateur voie les données qu'il a rentré donc que le tableau et les valeurs entrées soient visibles.
08/07/2013, 16h47
NoSmoking

Bonjour,

Citation:

J'ai utilisé Ajax pour mes select

je ne vois pas une once d'Ajax dans ce que tu nous livres mais uniquement le comportement normale lorsqu'une FORM est envoyée par appui sur un bouton submit.

Voici mon code AJAX

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
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
function creerXHR()
{
    var xhr = null;
        if(window.XMLHttpRequest)
        { 
           // Firefox et autres
           xhr = new XMLHttpRequest(); 
 
        }
        else if(window.ActiveXObject)
        { 
           // Internet Explorer 
           try 
           {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
           } 
           catch (e) 
           {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
           }
        }
        else 
        { 
           // XMLHttpRequest non supporté par le navigateur 
           alert("Votre navigateur ne supporte pas les objets XMLHttpRequest..."); 
           xhr = false; 
        } 
    return xhr;
}
 
 
// Méthode qui sera appelée après choix sur le select
function change20()
{
 
    var xhr = creerXHR();
 
    // On défini ce qu'on va faire quand on aura la réponse
    xhr.onreadystatechange = function()
    {
        // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
        if(xhr.readyState === 4 && xhr.status === 200)
        {
            var resultat = document.getElementById("divRetour20"); // div Modifié
            resultat.innerHTML = xhr.responseText;
        }
    };
 
 
    // Ici on va voir comment faire du post
    xhr.open("POST","blocPage/selectFAJ.php",true);
 
    // ne pas oublier cela pour le post
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 
    // ne pas oublier de poster les arguments : ici, le nom du métal
    var nomMetalSelectionne = document.getElementById("nomMetal").options[document.getElementById("nomMetal").selectedIndex].value;
    xhr.send("nomMetal="+nomMetalSelectionne);
}
 
function change21()
{
 
    var xhr = creerXHR();
 
    // On défini ce qu'on va faire quand on aura la réponse
    xhr.onreadystatechange = function()
    {
        // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
        if(xhr.readyState === 4 && xhr.status === 200)
        {
            var resultat = document.getElementById("divRetour21"); // div Modifié
            resultat.innerHTML = xhr.responseText;
        }
    };
 
    // Ici on va voir comment faire du post
    xhr.open("POST","blocPage/utiliserFAJ.php",true);
 
    // ne pas oublier cela pour le post
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 
    // ne pas oublier de poster les arguments : ici, le nom de la FAJ
    var nomFAJSelectionne = document.getElementById("nomJourFAJ").options[document.getElementById("nomJourFAJ").selectedIndex].value;
    var nomMetal = document.getElementById('nomMetal').value;
    //alert(id_utilisateur);
    xhr.send("nomJourFAJ="+nomFAJSelectionne+"&nomMetal="+nomMetal);  
 
}

Le problème est que lors du submit, la page coince sur le code AJAX alors que je voudrais que les valeurs sélectionnées la première fois soient automatiquement préselectionnées

08/07/2013, 19h05
NoSmoking

Tu n'as aucune obligation à utiliser des FORM si tu utilises l'Ajax.

Je ne comprends pas, lorsque je valide mon formulaire, pourquoi mes valeurs nomMetal et nomJourFAJ ne sont pas connue et comment faire pour y remédier :

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
<form action="" method="POST">
    <table class="formSimple">
        <tbody><tr>
            <td>Métal</td>
            <td>
                <select name="nomMetal" id="nomMetal" onchange="return change20();">
                    <option value="" selected="selected"></option>  // là, j'insère ma valeur de nomMetal : isset($_POST['nomMetal']) ? $_POST['nomMetal'] : ''
                    <option value="Ag">Ag</option>
                    <option value="Au">Au</option>
                    <option value="Ni">Ni</option>
                    <option value="Pd/Ni">Pd/Ni</option>
                    <option value="Sn">Sn</option>
                    <option value="Sn/Pb">Sn/Pb</option>
                    <option value="Stripper">Stripper</option>
                </select>
            </td>
        </tr>
    </tbody></table>
</form>
<div id="divRetour20"><form action="" method="POST">
   <table class="formSimple">
       <tbody><tr>
           <td>Sélectionnez le nom d'un modèle : </td>
           <td>
               <select name="nomJourFAJ" id="nomJourFAJ" onchange="return change21();">
                   <option value="" selected="selected"></option> // là, j'insère ma valeur de nomJourFAJ : isset($_POST['nomJourFAJ']) ? $_POST['nomJourFAJ'] : ''
                   <option value="Mardi Au">Mardi Au</option>
                   <option value="Mercredi Au">Mercredi Au</option>
                   <option value="Jeudi Au">Jeudi Au</option>
               </select>

09/07/2013, 09h53
Bovino

Mais pourquoi as-tu deux formulaires dans ta page ??? :koi:
09/07/2013, 10h17
zozoman

J'ai effectivement 2 formulaires parce que j'ai 2 tableaux qui n'ont rien à voir et dont les données ne sont pas rentrées au même moment : ça pose un problème?
09/07/2013, 10h20
Bovino

Ben... si tu valides le premier formulaire, oui, ça va poser un problème pour récupérer les valeurs renseignées dans l'autre ! :aie:
09/07/2013, 10h25
zozoman

Merci pour ta remarque, je n'y avais pas pensé mais ça n'a rien à voir avec mon problème d'affichage, si ?
09/07/2013, 11h23
zozoman

Je n'ai plus qu'un formulaire dans toute ma page mais j'ai toujours mon index nomMetal non défini ainsi que nomJourFAJ