[AJAX] XMLHttpRequest et intégration de la reponse dans un formulaire

**gussoner** · 19/07/2008, 17h07

Bonjour à tous,

voila je me retrouve face un problème. J'ai une page PHP avec une liste déroulante. Sur un onchange, j'exécute une XMLHttpRequest qui me renvoie deux <input>, avec la valeur voulue. jusque la tout va bien. Seulement, lorsque je valide mon formulaire, mes input créés avec XMLHttpRequest ne passent pas et du coup je n'arrive pas à traiter mes données. Je ne sais pas du tout comment faire pour arriver à les récupérer.

Merci pour voter aide.

Invité · 20/07/2008, 13h17

Bonjour,

Comment traites-tu, ou inserts-tu le retour dans ton html?
Un p'tit bout de code, svp.
Voir si dans le DOM, les inputs sont au bon endroit....
....

A+

**gussoner** · 20/07/2008, 22h18

Salut,

merci pour ta réponse. Alors voila le bout de code de ma page paiement.php avec le formulaire qui appelle la fonction.

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
 
<form method="post" name="ajout_paiement" action="">
<?php   
 
echo"<tr><td><b>Sautant</b><br>". $_SESSION['session_paiement_affichage']."</td><td>";
 
 
echo"<select name='payeur' onchange='appelle_requete(this.value);'>";
echo"<option value=''>Selectionnez un sautant..</option>";
while($tableau=mysql_fetch_array($requete)){
echo"<option  value='".$tableau['ID_usr']."'>".strtoupper(stripslashes($tableau['nom']))." ".stripslashes($tableau['prenom'])."</option>";}
echo"</select>";
?>
	</td>
</tr>
 
<tr><td colspan=2 ><span id='bloc_cc' >
</span></td></tr>

Ma fonction JS appelle_requete appelle ma fonction qui crée l'objet XMLHttpRequest et j'actualise ma page paiement.php comme ceci:

Code :

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

1
2
3
4
 
var result_cc = requete.responseText;
 var blocListe = document.getElementById('bloc_cc');
blocListe.innerHTML = result_cc;

Et voici ce que je mets dans mon span id='bloc_cc'

Code :

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

1
2
3
4
<tr ><td style='font-weight: bold;'>carte centre</tD><td>
<input name=\"X_carte_centre\" type=\"radio\" value='paye' checked>payée</input></td>
 
<td><input name=\"X_carte_centre\" type=\"radio\" value='pas_paye'>pas payée</input></td></tr>";

vous pouvez voir l'exécution du script sur cette page

Merci

**Bovino** · 21/07/2008, 18h48

Désolé, mais vu tes explications et le code que tu donnes, il est difficile de cerner ton problème, surtout que le lien que tu mets indique une erreur sql, donc pas de rapport direct avec Ajax...

**gussoner** · 21/07/2008, 19h03

Salut,

j'avais épuré volontairement le code pour garder que ce qu'il me semblait nécessaire. Voici donc mon code JS complet qui créer ma requête

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
69
70
71
72
73
74
75
76
77
function creerRequete()
{
    try
    {
 
        requete = new XMLHttpRequest();
    }
    catch (microsoft)
    {
 
        try
        {
            requete = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch(autremicrosoft)
        {
 
            try
            {
                requete = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch(echec)
            {
 
                requete = null;
            }
        }
    }
    if(requete == null)
    {
        alert('Impossible de créer l\'objet requête,\nVotre navigateur ne semble pas supporter les object XMLHttpRequest.');
    }
}
 
function actualisercc()
{
    var result_cc = requete.responseText;
    var blocListe = document.getElementById('bloc_cc');
    blocListe.innerHTML = result_cc;
}
 
 
function appelle_requete(id_user)
{
 
    if(id_user == '')
    {
        document.getElementById('bloc_cc').innerHTML = '';
    }
    else
    {
 
        var blocListe = document.getElementById('bloc_cc');
        blocListe.innerHTML = "Recherche les informations...";
 
        creerRequete();
 
        var url = 'verif_xhtml.php?id_usr='+ id_user;
 
        requete.open('GET', url, true);
 
        requete.onreadystatechange = function()
        {
 
            if(requete.readyState == 4)
            {
 
                if(requete.status == 200)
                {
 
                    actualisercc();
                }
            }
        };
        requete.send(null);
    }
}

Voici le code de ma page verif_xhtml.php

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
 
<?php
header('Content-type: text/html; charset=iso-8859-1'); 
 
require_once('config.php');
 
if(isset($_GET['id_usr'])){
 
$id_sur=@$_GET['id_usr'];
$sql_cc="SELECT carte_centre FROM pic_usr_contact WHERE ID_usr='$id_sur'";
$req_verif_cc=mysql_query($sql_cc) or die (mysql_error());
$tableau=mysql_fetch_array($req_verif_cc);
if($tableau['carte_centre']=='paye'){
echo
"<tr ><td style='font-weight: bold;'>carte centre</tD><td>
<input name=\"carte_centre\" type=\"radio\" value='paye' checked>payée</input></td>
 
<td><input name=\"carte_centre\" type=\"radio\" value='pas_paye'>pas payée</input></td></tr>";
}
 
if($tableau['carte_centre']=='pas_paye'){
echo
"<tr style='font-size: 10px;'><td style='font-weight: bold;'>Carte centre</tD><td>
<input name=\"carte_centre\" type=\"radio\" value='paye'>payée</input></td>
 
<td style=' color:red;font-weight: bold;'><input name=\"carte_centre\" type=\"radio\" value='pas_paye' checked>pas payée</input></td></tr>";
}
}

et voici le formulaire de ma page paiement.php

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
69
70
71
<table>
<tr><td colspan=3><h1>Ajouter un nouveau paiement</h1></td></tr>
<tr>
	<td colspan=3><form method="post" name="ajout_paiement" action=""></td>
</tr>
 
<tr>
<?php   
 
echo"<tr><td><b>Sautant</b><br>". $_SESSION['session_paiement_affichage']."</td><td>";
 
$sql="SELECT *,pic_session.ID_session, pic_session.periode_debut, pic_session.periode_fin FROM pic_usr_contact INNER JOIN pic_session ON pic_usr_contact.id_session= pic_session.ID_session WHERE ".$_SESSION['id_session_paiement_sql']." ";
$requete=mysql_query($sql) or die (mysql_error());
echo"<select name='payeur' onchange='verif_payeur_autre(this.value);appelle_requete(this.value);'>";
echo"<option value=''>Selectionnez un sautant..</option>";
while($tableau=mysql_fetch_array($requete)){
echo"<option  value='".$tableau['ID_usr']."'>".strtoupper(stripslashes($tableau['nom']))." ".stripslashes($tableau['prenom'])."</option>";}
echo"<option value='0' style='font-weight:bold;'>Autre (Précisez)</option>";
echo"</select>";
?>
	</td>
</tr>
 
<tr><td colspan=2 ><span id='bloc_cc'></span></td></tr>
 
	<tr><td colspan=2>
 
<table id='paiement_autre' style="display: none;" class='formation'>
<tr><td colspan=2>Précisez</td></tr>
<tr><td >Nom</td><td><input name="paiement_autre_nom"></input></td></tr>
<tr><td >Prénom</td><td><input name="paiement_autre_prenom"></input></td></tr>
</table>
</td></tr>
</tr>
<input name="autre_payeur" type="hidden"></input>
 
<?php 
$today = getdate();
$datejour=$today['mday'];$datemois=$today['mon'];$dateyear=$today['year'];
$date_today=$datejour."-".$datemois."-".$dateyear;
?>
 
<tr>
	<td ><b>Date</b> </td>
	<td colspan=2> <input name="date" value=<?php  if(isset($_POST['date'])){echo$_POST['date'];}else{echo$date_today;}?> readonly="readonly"></input> <img src='Images/date.png' onclick="ds_sh(document.forms['ajout_paiement'].elements['date']);"></td></tr>
 
<tr>
	<td ><b>montant</b></td>
	<td colspan=2> <input name="montant"></input></td>
</tr>
 
<tr>
	<td><b>Moyen de paiement</b></td>
	<td ><input type="radio" name="moyen_paiement" value="Espece" checked onchange='type_paiement(this.value)'>Espèce</input>
	<input type="radio" name="moyen_paiement" value="Cheque" onchange='type_paiement(this.value)'>Cheque</input><br></td>
</tr>
 
<tr>
	<td id="space_Fonction" ></td>
	<td id="space_Fonction2" colspan=2></td>
</tr>
<input name="numero_cheque" type="hidden"></input>
 
<tr>
	<td ><b>Remarques</b> </td>
	<td colspan=2> <textarea name="remarque" value="&nbsp "></textarea></td>
</tr>
 
<tr>
	<td colspan=3> <input type="button" value="valider" onclick="verif();"></input></form></td>
</tr>

Et j'ai testé ma page en ligne, ça ne me renvoie aucune erreur SQL...

Je vais essayer de ré expliquer mon problème. Lorsque je valide le formulaire de ma page paiement.php, je n'arrive pas à récupérer la valeur de mon bouton radio créé dynamiquement en Ajax. Il me valide bien mon formulaire, mais ma variable $_POST['carte_centre'] est inconnue..

**Bovino** · 21/07/2008, 19h14

Je vais essayer de ré expliquer mon problème. Lorsque je valide le formulaire de ma page paiement.php, je n'arrive pas à récupérer la valeur de mon bouton radio créé dynamiquement en Ajax. Il me valide bien mon formulaire, mais ma variable $_POST['carte_centre'] est inconnue..

Effectivement, c'est un problème qui arrive souvent.
A mon avis (je peux me tromper toutefois), lorsque tu insères des éléments de formulaire dynamiquement, ceux-ci ne sont pas intégrés lors du submit. En gros, ils existent dans le DOM et sont affichés, mais le submit généré ne prend en compte que les éléments existants à la création de la page... Essaye sur un onsubmit de rajouter 'manuellement' via javascript les éléments ajoutés.

Sinon, quand je cliques sur ton lien sous FF2, il y à l'erreur suivante :

You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 1

[AJAX] XMLHttpRequest et intégration de la reponse dans un formulaire

JavaScript

Vue hybride

Discussions similaires

Partager

Partager