[AJAX] AJAX et submit du formulaire

Version imprimable

25/07/2011, 10h19
metwa

[AJAX] AJAX et submit du formulaire

Bonjour à tous
je travail en PHP
j'ai une page php dans laquelle il y a une form et un select qui à l'aide d'ajax ajoute à ma form quelques inputs avec des valeurs prises de la base de données
jusqu'ici tous marche parfaitement
le probleme est que lorsque je poste ma forme les inputs venant d'ajax n'apparaissent plus malgré qu'ajax fonctionne bien
s'il vous plait aidez moi
c'est quoi le probleme????
voila ce qu'il m'affiche dans la page resultante apres le submit
lorsque je fait un

Code:

print_r($_POST)

Code:

Array ( [id_adherent] => 1 [act] => add [id_typepaiement] => 3 [submit] => Valider )

merci d'avance
25/07/2011, 11h31
andry.aime

Salut,

Peut-on voir comment tu génères ces input avec l'ajax?

A+.

voila mon fichier 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
<?php
require_once('connexion.php');	
$q=$_POST["q"];
 
$sql="SELECT * FROM typepaiement WHERE id = '".$q."'";
 
$result = mysql_query($sql);
if(mysql_num_rows($result))
{
	$row = mysql_fetch_array($result);
		$prix=$row['prix'];
		echo "<div class='divinfo'>
                    <label for='fax' id='labeldetail2'>Monatant Total:</label>
                    <input type='text' value='".$prix."' name='montantTotal1' id='montantTotal1' readonly='readonly'  />
              </div>
			  <div class='divinfo'>
			   <label for='fax' id='labeldetail2'>Par Tranche: </label>
                    <input type='radio' name='modep' id='modep1' value='1' onclick='document.getElementById(\"montantPaye1\").readOnly = false;' />Oui &nbsp;&nbsp;&nbsp;
					<input type='radio' name='modep' id='modep2' value='0' onchange='document.getElementById(\"montantPaye1\").readOnly = true; document.getElementById(\"montantPaye1\").value= document.getElementById(\"montantTotal1\").value;'  checked='checked' />Non
              </div>
              <div class='divinfo'>
                    <label id='labeldetail2'>Montant pay&eacute;:</label>
                    <input type='text' value='".$prix."' id='montantPaye1' name='montantPaye1' readonly='readonly' />
              </div>";
  	}

et ça marche et ça affiche les inputs correctement dans la page

25/07/2011, 11h45
Bovino

Code:

$q=$_POST["q"];

Tu devrais faire attention à ton q tout de même ! :mouarf:

Sinon, tu ferais bien de nous montrer le code JavaScript qui va avec ;)

voila le code javascript:

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
<script type="text/javascript">
 
function getXhr(){
                 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;
			}
 
 
			 //Mthode qui sera appele sur le click du bouton
 
			function showAmount(){
				var xhr = getXhr();
				// On dfini ce qu'on va faire quand on aura la rponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('txtHint').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxPaiement.php",true);
				// ne pas oublier a pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('selecttp');
				str = sel.options[sel.selectedIndex].value;
				xhr.send("q="+str);
 
				if(str==0){
//					document.getElementById("txtHint").style.display = "none";
					document.getElementById("submitbtn").disabled = true;
				}
 
				else{
					document.getElementById("txtHint").style.display = "block";
					document.getElementById("submitbtn").disabled = false;
				}
			}
</script>

mais c'est claire que ce n'est pas à cause du "q" car les inputs s'affichent avec les bonnes valeurs prises de la BD

25/07/2011, 12h20
mctarek

Citation:

Envoyé par metwa

voila mon fichier AJAX:
et ça marche et ça affiche les inputs correctement dans la page

Dans ce cas, je veille toujours à vérifier l'état de la variable avec un window.alert() juste avant l'envoi de la requête Ajax pour monitorer request.send(variables) si POST ou url+'?'+variables si GET.

Biensûr, je veille à ne pas placer un attribut value="xxx" dans un élement sachant qu'il va recevoir un contenu dynamique.

mctarek (nouveau et curieux de ce problème).
25/07/2011, 12h28
Bovino

Citation:

mais c'est claire que ce n'est pas à cause du "q"

Non, ce n'est pas ça qui fait planter ton script... du moins pour le moment :aie:
Injecter une donnée utilisateur dans une requête SQL (en plus avec un SELECT *) sans l'avoir vérifiée au préalable est suicidaire.
Mais bon, c'est un autre problème !

Bref, maintenant, il serait bon d'avoir la portion de code HTML (pas PHP hein) associée à ta requête.

Au fait, tu as testé avec quel navigateur ?
25/07/2011, 12h34
metwa

Bienvenue et salemou 3alaikom Mctarek
merci pour vous tous pour votre interet
Bovino:

Citation:

Au fait, tu as testé avec quel navigateur ?

je teste sur google chrome
25/07/2011, 12h36
Bovino

Citation:

Envoyé par Bovino

il serait bon d'avoir la portion de code HTML (pas PHP hein) associée à ta requête.

:whistle:

le voilà le code HTML:

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
 
<form name='f' method='post' action='paymembreaction.php' >
 
       <div>
	<div class="divinfo">
        <label for="fax" id="labeldetail2">Type paiement:</label>
        <select class="inputtext" name="id_typepaiement" id="selecttp"  onchange="showAmount(this.value)">
 
       <?php
	             echo (!isset($_GET['idpnt']))?'<option value="0" selected="selected">-- Choisir type --</option>':''; 
			$q_pmnt = mysql_query("SELECT * from typepaiement"); //on lance la requete SQL renvoyant la liste de tous les frs
			if (mysql_num_rows($q_pmnt)) {//si il existe des resultats Ã* la requÃªte
				while ($lstpmnt=mysql_fetch_array($q_pmnt)) {
					$idp= $lstpmnt['id'];
					$nompmnt= $lstpmnt['nom'];
					if($idp==$idpmnt)
						$sel=' selected="selected" ';
					else
						$sel='';
					echo '<option value="'.$idp.'"'.$sel.'>'.$nompmnt.'</option>';
				}
			}
			?>          
        </select>
      </div>
      	<div id="txtHint"  >
	 </div>
 
        <input value="Valider" name="submit"  id="submitbtn" type="submit" disabled="disabled" />
        <input value="Annuler"  onclick="" class="inputsubmit" type="reset" />
      </div>
 
 
 
  </form>

25/07/2011, 12h50
Bovino

Citation:

Envoyé par Bovino

il serait bon d'avoir la portion de code HTML (pas PHP hein) associée à ta requête.

:fleche: Important : Les règles incontournables d'utilisation de ce forum
:evilred:
25/07/2011, 12h55
metwa

Bovino:

Citation:

il serait bon d'avoir la portion de code HTML (pas PHP hein) associée à ta requête.

j'ai pas comris!!!
ça veut dire quoi? quel code exactement?
25/07/2011, 13h06
andry.aime

Bonsoir,

Citation:

<select class="inputtext" name="id_typepaiement" id="selecttp" onchange="showAmount(this.value)">

Citation:

function showAmount(){
var xhr = getXhr();

:whistle:
25/07/2011, 13h07
andry.aime

Citation:

Envoyé par metwa

Bovino:
j'ai pas comris!!!
ça veut dire quoi? quel code exactement?

Clique sur le lien donnée par Bovino et lit bien :aie:.

A+.

andry.aime
le showAmount(this.value) avec et sans le paramètre c'est parce que je travaille déjà sur le fichier et j'ai testé en utilisant le paramete et sans l'utilser mais le problème réside car comme je l'avais dis AJAX marche et il m'affiche les inputs mais lorsque j'ai vérifier le source de ma page j'ai trouvé mon div vide malgré que lorsque je fait des testes javascript ça marche et aussi lorsque j'ai vérifié la réponse ajax avec firebug il m'affiche mes inputs aussi

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
<div class='divinfo'>
 
                    <label for='fax' id='labeldetail2'>Monatant Total:</label>
 
                    <input type='text' value='18' name='montantTotal1' id='montantTotal1' readonly='readonly'  />
 
              </div>
 
			  <div class='divinfo'>
 
			   <label for='fax' id='labeldetail2'>Par Tranche: </label>
 
                    <input type='radio' name='modep' id='modep1' value='1' onclick='document.getElementById("montantPaye1").readOnly = false;' />Oui &nbsp;&nbsp;&nbsp;
 
					<input type='radio' name='modep' id='modep2' value='0' onchange='document.getElementById("montantPaye1").readOnly = true; document.getElementById("montantPaye1").value= document.getElementById("montantTotal1").value;'  checked='checked' />Non
 
              </div>
 
              <div class='divinfo'>
 
                    <label id='labeldetail2'>Montant pay&eacute;:</label>
 
                    <input type='text' value='18' id='montantPaye1' name='montantPaye1' readonly='readonly' />
 
              </div>

25/07/2011, 13h50
mctarek

Citation:

Envoyé par metwa

andry.aime
le showAmount(this.value) avec et sans le paramètre c'est parce que je travaille déjà sur le fichier et j'ai testé en utilisant le paramete et sans l'utilser mais le problème réside car comme je l'avais dis AJAX marche et il m'affiche les inputs mais lorsque j'ai vérifier le source de ma page j'ai trouvé mon div vide malgré que lorsque je fait des testes javascript ça marche et aussi lorsque j'ai vérifié la réponse ajax avec firebug il m'affiche mes inputs aussi

Avec $q=$_REQUEST["q"]; // au lieu de $q=$_POST["q"];
Puis vous testez la page PHP > http://adresse/mapage.php?q=1

Est ce que la page PHP renvoit la bonne présentation?
Vous écrivez dans le code $_GET['idpnt']

Etes vous finalement en protocole GET ou POST ?

mctarek
25/07/2011, 15h07
andry.aime

Citation:

Envoyé par mctarek

Avec $q=$_REQUEST["q"]; // au lieu de $q=$_POST["q"];
Puis vous testez la page PHP > http://adresse/mapage.php?q=1

Est ce que la page PHP renvoit la bonne présentation?
Vous écrivez dans le code $_GET['idpnt']

Etes vous finalement en protocole GET ou POST ?

mctarek

:koi:
25/07/2011, 15h48
metwa

au début je l'avais fait avec le GET et puis lorsque ça n'a pas marché je l'avais changé avec POST
mais est ce qu'il y'a un problème lorsqu'on change de protocole?
car moi je le change selon mon besoin donc dans un même projet je peux utiliser plusieurs form en POST et quelques autres en GET surtout dans les liens
est ce c'est pas bon ou quoi???

Citation:

Envoyé par metwa

au début je l'avais fait avec le GET et puis lorsque ça n'a pas marché je l'avais changé avec POST
mais est ce qu'il y'a un problème lorsqu'on change de protocole?
car moi je le change selon mon besoin donc dans un même projet je peux utiliser plusieurs form en POST et quelques autres en GET surtout dans les liens
est ce c'est pas bon ou quoi???

J'ai essayé de construire les fichiers avec vos codes + BDD et tester sur mon serveur local.

J'ai le formulaire + les noms sur le menu déroulant.
Je choisis un nom et je lance une alert() et j'obtiens bien un indice 1 ou 2 etc
ensuite, j'ai leselect = <div class='divinfo........</div>'
Puis, je suis redirigé vers la page paymembreaction avec le nom transféré et le montant. Cela semble assez possitif.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CR Expertise </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta http-equiv="Content-Script-Type" Content="text/javascript" />
<script language="javascript" type="text/javascript" src="ajax_metwa.js"></script>
</head>
 
<body>
 
<form name='f' method='post' action='paymembreaction.php' >
 
    <div>
	<div class="divinfo">
        <label for="fax" id="labeldetail2">Type paiement:</label>
        <select class="inputtext" name="id_typepaiement" id="selecttp"  onchange="showAmount(this.value)">
        <?php
			include '../../../commun/connexion.inc.php';
	        echo (!isset($_REQUEST['idpnt'])) ? '<option value="0" selected="selected">-- Choisir type --</option>' : ''; 
			$q_pmnt = mysql_query("SELECT * from typepaiement"); //on lance la requete SQL renvoyant la liste de tous les frs
			if (mysql_num_rows($q_pmnt)) { //si il existe des resultats Ã* la requÃªte
				while ($lstpmnt=mysql_fetch_array($q_pmnt)) {
					$idp= $lstpmnt['id'];
					$nompmnt= $lstpmnt['nom'];
					echo '<option value="'.$idp.'"'.$sel.'>'.$nompmnt.'</option>';	
				}
			}
		?>			
        </select>
 
      </div>
 
      	<div id="txtHint"  ></div>
        <input value="Valider" name="submit"  id="submitbtn" type="submit" />
        <input value="Annuler"  onclick="" class="inputsubmit" type="reset" />
      </div>
 
  </form>
 
  </body>
  </html>

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
 
<?php
require_once('../../../commun/connexion.inc.php');
        
$q=$_REQUEST['q']; // au lieu de POST
 
 
$sql="SELECT * FROM typepaiement WHERE id = '".$q."'";
 
$result = mysql_query($sql);
 
if(mysql_num_rows($result))
{
        $row = mysql_fetch_array($result);
                $prix=$row['prix'];
                echo "<div class='divinfo'>
                                <label for='fax' id='labeldetail2'>Monatant Total:</label>
                <input type='text' value='".$prix."' name='montantTotal1' id='montantTotal1' readonly='readonly'  />
                                </div>
                                <div class='divinfo'>
                                <label for='fax' id='labeldetail2'>Par Tranche: </label>
                                <input type='radio' name='modep' id='modep1' value='1' onclick='document.getElementById(\"montantPaye1\").readOnly = false;' />Oui &nbsp;&nbsp;&nbsp;
                                <input type='radio' name='modep' id='modep2' value='0' onchange='document.getElementById(\"montantPaye1\").readOnly = true; document.getElementById(\"montantPaye1\").value= document.getElementById(\"montantTotal1\").value;'  checked='checked' />Non
                                </div>
              <div class='divinfo'>
                    <label id='labeldetail2'>Montant pay&eacute;:</label>
                    <input type='text' value='".$prix."' id='montantPaye1' name='montantPaye1' readonly='readonly' />
              </div>";
}
        
?>

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
 
function getXhr(){
                 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;
			} 
 
			 //Mthode qui sera appele sur le click du bouton
 
			function showAmount(){
				var xhr = getXhr();
				// On dfini ce qu'on va faire quand on aura la rponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('txtHint').innerHTML = leselect;
						alert('leselect: '+leselect);
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxPaiement.php",true);
				// ne pas oublier a pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('selecttp');
				str = sel.options[sel.selectedIndex].value;
				alert('var: '+str);
				xhr.send("q="+str);
 
				if(str==0){
					document.getElementById("txtHint").style.display = "none";
					document.getElementById("submitbtn").disabled = true;
				}
 
				else{
					document.getElementById("txtHint").style.display = "block";
					document.getElementById("submitbtn").disabled = false;
				}
			}

La BDD contient jsute id, prix et nom

mctarek

25/07/2011, 19h25
metwa

merci mctarek jazeka ALLAHOU 5ayran
en fait lorsque j'ai testé mon projet sur IE j'ai remarqué que ça marche nickel
malgré que j'ai rien changer dans le code le meme code marche sur IExplorer et ne marche pas sur google chrome
y a t'il une solution pour ça??
25/07/2011, 21h36
mctarek

Citation:

Envoyé par metwa

merci mctarek jazeka ALLAHOU 5ayran
en fait lorsque j'ai testé mon projet sur IE j'ai remarqué que ça marche nickel
malgré que j'ai rien changer dans le code le meme code marche sur IExplorer et ne marche pas sur google chrome
y a t'il une solution pour ça??

Le peu de code que je dispose et mis en ligne fonctionne sous Firefox 3.6, Firefox 5.0 et Chrome (11.0.696.65 beta-m)

Manque de données pour en savoir plus...
mctarek
26/07/2011, 06h31
metwa

Citation:

Envoyé par Bovino:
Injecter une donnée utilisateur dans une requête SQL (en plus avec un SELECT *) sans l'avoir vérifiée au préalable est suicidaire.
Mais bon, c'est un autre problème !

je dois faire comment apart changer le "*" par le nom du champ(s) à selectionner?
26/07/2011, 07h52
mctarek
Citation:

Envoyé par metwa

je dois faire comment apart changer le "*" par le nom du champ(s) à selectionner?

Personnellement, si la table contient beaucoup de données, je cible les données recherchées.

Code:

SELECT id, nom FROM xxxx

Pour PHP, je protège les données :
Code:

1 2 $data = trim($_REQUEST['data']); // pour enlever les vides $data = mysql_real_escape_string($data); // pour protéger la chaîne
Puis j'injecte la donnée dans la base. Biensûr, on peut appliquer des filtres comme vérifier le type (numeric, string, etc) voire une taille attendue, etc.
Au delà, c'est la parano qui l'emporte...

mctarek
26/07/2011, 16h11
metwa

j'ai réussi à résolu le problème du submit des valeurs des champs renvoyés par AJAX en ajoutant des input de type hidden et lors du submit je copie les valeurs de mes inputs dans les hidden avec JS
merci pour vous tous pour votre aide
merci Tarek pour le soutient ;)