[AJAX] AJAX et submit du formulaire

**metwa** · 25/07/2011, 10h19

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 :

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

print_r($_POST)

Code :

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

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

merci d'avance

**andry.aime** · 25/07/2011, 11h31

Salut,

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

A+.

**metwa** · 25/07/2011, 11h39

voila mon fichier AJAX:

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

**Bovino** · 25/07/2011, 11h45

Code :

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

$q=$_POST["q"];

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

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

**metwa** · 25/07/2011, 11h59

voila le code javascript:

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

**mctarek** · 25/07/2011, 12h20

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

**Bovino** · 25/07/2011, 12h28

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

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 ?

**metwa** · 25/07/2011, 12h34

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

Au fait, tu as testé avec quel navigateur ?

je teste sur google chrome

**Bovino** · 25/07/2011, 12h36

Envoyé par Bovino

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

**metwa** · 25/07/2011, 12h46

le voilà le code HTML:

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

**Bovino** · 25/07/2011, 12h50

Envoyé par Bovino

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

Important : Les règles incontournables d'utilisation de ce forum

**metwa** · 25/07/2011, 12h55

Bovino:

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?

**andry.aime** · 25/07/2011, 13h06

Bonsoir,

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

**andry.aime** · 25/07/2011, 13h07

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

.

A+.

**metwa** · 25/07/2011, 13h25

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

**mctarek** · 25/07/2011, 13h50

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

**andry.aime** · 25/07/2011, 15h07

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

**metwa** · 25/07/2011, 15h48

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

**mctarek** · 25/07/2011, 18h14

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 :

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

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

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

**metwa** · 25/07/2011, 19h25

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

[AJAX] AJAX et submit du formulaire

AJAX

Discussions similaires

Partager

Partager