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

Version imprimable

19/07/2008, 17h07
gussoner

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

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.
20/07/2008, 13h17
Invité

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+

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:

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:

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:

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

21/07/2008, 18h48
Bovino

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

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:

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:

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:

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

21/07/2008, 19h14
Bovino

Citation:

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 :

Citation:

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
21/07/2008, 19h59
jojosbiz

Salut,
ton problème vient de la manière dont tu insères ton code dans ta page.

Oublie les "innerHTML" quand tu insères des éléments (input, images, etc...), il faut utiliser le DOM (getElementById, appendChild, createElement, etc...) pour que le navigateur puisse prendre en compte les dis éléments.

Merci pour vos réponses.

Citation:

Envoyé par jojosbiz

Salut,
ton problème vient de la manière dont tu insères ton code dans ta page.

Oublie les "innerHTML" quand tu insères des éléments (input, images, etc...), il faut utiliser le DOM (getElementById, appendChild, createElement, etc...) pour que le navigateur puisse prendre en compte les dis éléments.

J'ai pris en compte ce que tu as dit, j'ai donc modifié mon script d'insertion comme ceci:
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 function actualisercc() { document.getElementById('bloc_cc').innerHTML = ''; var result_cc = requete.responseText; var input_cc_paye = document.createElement('input'); input_cc_paye.setAttribute('type', 'radio'); input_cc_paye.setAttribute('name', 'carte_centre'); input_cc_paye.setAttribute('value', 'paye'); if(result_cc=='paye'){ input_cc_paye.setAttribute('checked', 'checked');} document.getElementById('bloc_cc').appendChild(input_cc_paye); var montexte = document.createTextNode("Payée"); document.getElementById('bloc_cc').appendChild(montexte); var input_cc_pas_paye = document.createElement('input'); input_cc_pas_paye.setAttribute('type', 'radio'); input_cc_pas_paye.setAttribute('name', 'carte_centre'); input_cc_pas_paye.setAttribute('value', 'pas_paye'); if(result_cc=='pas_paye'){ input_cc_pas_paye.setAttribute('checked', 'checked');} document.getElementById('bloc_cc').appendChild(input_cc_pas_paye); var montexte2 = document.createTextNode("pas payée"); document.getElementById('bloc_cc').appendChild(montexte2); }
Mais ca ne prend toujours pas en compte lorsque je valide mon formulaire

Citation:

Essaye sur un onsubmit de rajouter 'manuellement' via javascript les éléments ajoutés.

Tu veux dire par exemple en ajoutant des champs cachés qui prendraient la valeur du bouton radio sélectionné? J'y ai pensé, mais j'aimerai autant éviter de faire ca, d'autant plus que ca doit bien être possible.

Et je teste sous FF2 et FF3, et je n'ai aucune erreur SQL.. D'autant plus que les erreurs SQL ne dépendent pas du navigateur.. :cfou:

21/07/2008, 22h12
gussoner

Problème de SQL_error normalement résolu, c'était une histoire de cookie qu'il devait ne pas trouver.

Ca c'est fait!
21/07/2008, 22h47
Invité

Bonjour,

Je suis allé sur le dit site.
Oh, surprise, quel foutoir dans ce code (par afficher la source) des <input...> suivi de </input>, des <table> avant le <body>, du code JS un peu partout, des chargement de fichiers de style CSS au milieu d'un <div>, du <p> sans </p>.

Bon, faudrait peut-être mettre déjà de l'ordre la dedans....
Peut-être déjà aller ICI
A+
21/07/2008, 23h32
Bovino

Ton form n'a pas de action ni de submit...
Ta soumission se fait avec la fonction verif()... mais on ne la voit pas. Prend-elle bien en compte tous les éléments de ton form ?

Citation:

Envoyé par jlmag

Bonjour,

Je suis allé sur le dit site.
Oh, surprise, quel foutoir dans ce code (par afficher la source) des <input...> suivi de </input>, des <table> avant le <body>, du code JS un peu partout, des chargement de fichiers de style CSS au milieu d'un <div>, du <p> sans </p>.

Bon, faudrait peut-être mettre déjà de l'ordre la dedans....
Peut-être déjà aller ICI
A+

Et encore tu ne vois pas mon code PHP :oops:

Bon j'ai fait un peu de ménage, et j'ai bookmarqué ton lien ;)

Mais malgré tout ca, cela ne fonctionne toujours pas. C'est bien ma fonction verif () qui fait le submit. Elle me sert à vérifier si les champs sont correctement remplis. Si c'est le cas, elle déclenche le submit ceci:

document.forms['ajout_paiement'].submit();

Voici ma fonction vérif() en entière:
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 function verif(){ if(document.forms['ajout_paiement'].elements['payeur'].value=='') { alert('Qui qui a payé?!'); return 0; } if(document.forms['ajout_paiement'].elements['montant'].value=='') { alert('Euh.. il a payé combien?!'); return 0; } if((document.forms['ajout_paiement'].elements['payeur'].value=='0')&&(document.forms['ajout_paiement'].elements['paiement_autre_prenom'].value=='')&&(document.forms['ajout_paiement'].elements['paiement_autre_nom'].value=='')) { alert('Et l\'autre c\'est qui?!'); return 0; } var montant= document.forms['ajout_paiement'].elements['montant'].value; numerique(montant); if(numerique(montant)==true){ document.forms['ajout_paiement'].submit(); } else{ alert('Le montant ne doit être composé que de chiffres!'); } } function numerique(chaine) { var exp=new RegExp("^[0-9]*$","g"); return exp.test(chaine); }
Je ne comprends pas ce que tu veux dire par Prend-elle bien en compte tous les éléments de ton form ?

Merci pour votre aide

22/07/2008, 12h10
Invité

1 pièce(s) jointe(s)

Bonjour,

Tu trouveras joint un fichier HTML de ce que devrait être le tien . Et voir ce que cela donne ICI

Il n'y a plus qu'a y ajouter le JS et le PHP (avec un peu d'organisation:D)

Il sera plus facile pour toi de découvrir ce qui ne va pas.

A+
23/07/2008, 00h10
gussoner

Merci à tous pour vos conseils. Je laisse de coté le développement de cette appli pendant quelques jours à cause d'un problème de virus particulièrement coriace (MSDSOD.pif, s'il y en a qui ont déjà eu à faire, je suis preneur d'info, un formatage complet de mon disque n'a rien fait :?)

Mais je note: réorganiser mon code plus proprement, et voir la ou ça couille