[AJAX] effacement de ma page après validation

**zozoman** · 08/07/2013, 14h30

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 php :

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

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

Voici le code de 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
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 ?

**zozoman** · 08/07/2013, 14h39

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.

**NoSmoking** · 08/07/2013, 16h47

Bonjour,

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.

**zozoman** · 08/07/2013, 17h14

Voici mon code AJAX

Code AJAX :

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
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

**NoSmoking** · 08/07/2013, 19h05

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

**zozoman** · 09/07/2013, 09h45

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 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
<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>

**Bovino** · 09/07/2013, 09h53

Mais pourquoi as-tu deux formulaires dans ta page ???

**zozoman** · 09/07/2013, 10h17

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?