Discussion :

[Invité]

Bonjour,

J'ai un formulaire php assez complexe donc pour vous expliquer mon soucis je vais prendre un exemple simple.

J'ai donc un formulaire avec deux champs, un champ nom et un champs prénom.

J'ai aussi un <input text> dans lequel je renseigne combien de formulaire a afficher à l'écran.

Jusque là pas de problèmes. Dans ce input text j'ai créé une fonction ajax qui récupère la valeur renseignée grace à l'id de l'input text, cette fonction marche bien car en fin de fonction je fait un alert et sa m'affiche la bonne valeur.

Ce que je voudrai maintenant, c'est que je puisse récupérer dans mon code php la valeur retournée afin que je puisse afficher autant de formulaire souhaitée. En gros faire sa :

Code php :

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

1
2
 
$n_Formulaire = valeurRetournée par ma fonction()

Voici le code de mon imput text

test.php

Code php :

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

1
2
 
echo "<input name='nb_form' type='text' id='nb_form' maxlength='2' onblur='getNbEnf();'>";

Mon script 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
 
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;
	}
 
	/**
	* Méthode qui sera appelée lors du changement de focus
	*/
	function getNbEnf()
	{	
		var sel = document.getElementById('nb_form');
		var xhr = getXhr();
		// On défini ce qu'on va faire quand on aura la réponse
		xhr.onreadystatechange = function()
		{
			//attendons dque le requete soit finie...
			if(xhr.readyState == 4 && xhr.status == 200)
			{
				var rst = xhr.responseXML;
			}
		}
 
		// Ici on va voir comment faire du post
		xhr.open("POST","test.php",true);
		// ne pas oublier ça pour le post
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
		nb = sel.value;
		alert(nb);
		xhr.send("Nb="+nb);		
	}

Voilà, si quelqu'un pouvait m'éclairer se serait sympa :cool:

Je précise que je suis totalement débutant en Ajax

[Bovino]

Code php :

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

$n_Formulaire = $_POST['Nb'];

ou alors j'ai pas tout compris...

[Invité]

Justement non, quand je met $n_Formulaire = $_POST['Nb']; dans test.php
le navigateur me dit

Notice: Undefined index: Nb in C:\EasyPHP 3.0\www\Projet_CMFP\test.php on line 469

c'est pour ça que je suis un peu perdu

[emmanuel.remy]

Salut,

Y'a un souci parce que tu dis écrire dans test.php:

Code :

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

echo "<input name='nb_form' type='text' id='nb_form' maxlength='2' onblur='getNbEnf();'>";

Or a priori ce code est celui de la page principale, non ?

Donc si tu appelles cette même page en Ajax, je ne vois pas trop le résultat attendu (sauf à faire une grosse bidouille). Tu ne te tromperais pas de page appelée ?

Ce qui me fait penser à ça aussi c'est ton message: n'apparait il pas lors du chargement INITAL de la page test.php ? Ce qui serait logique car il n'y aurait pas alors de variable POST Nb.


ERE

[Invité]

Bah en faite je suis un peu embrouiller !

Donc si j'ai bien compris il faudrait que je fasse référence à une page test2.php dans mon code ajax !

Que dans cette page php je récupère ma variable avec $_POST mais ensuite comment faire pour que je puisse afficher ma variable dans test.php qui est ma page principale ?

De cette manière : ?

test.php

Code html :

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

1
2
 
<div id='divdemavarialbe'></div>

[emmanuel.remy]

Bah en faite je suis un peu embrouiller !

Donc si j'ai bien compris il faudrait que je fasse référence à une page test2.php dans mon code ajax !

Que dans cette page php je récupère ma variable avec $_POST mais ensuite comment faire pour que je puisse afficher ma variable dans test.php qui est ma page principale ?

De cette manière : ?

test.php

Code html :

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

1
2
 
<div id='divdemavarialbe'></div>

Oui, ton appel AJAX se fait vers test2.php, tu y récupères Nb.

ensuite comment faire pour que je puisse afficher ma variable dans test.php qui est ma page principale ?

C'est quoi cette variable que tu veux afficher ? Le resultat renvoyé par test2.php ?

ERE

[Invité]

En faite a la fin de ma fonction ajax je récupère le numéro rentrer dans un imput text, et je l'envoi via :

Code ajax :

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

xhr.send("Nb="+nb);

ensuite dans test2.php je fait

Code php :

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

1
2
 
$n_Formulaire = $_POST['Nb'];

et j'aimerai récupérer dans test.php $n_Formulaire

[emmanuel.remy]

En faite a la fin de ma fonction ajax je récupère le numéro rentrer dans un imput text, et je l'envoi via :

Code ajax :

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

xhr.send("Nb="+nb);

ensuite dans test2.php je fait

Code php :

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

1
2
 
$n_Formulaire = $_POST['Nb'];

et j'aimerai récupérer dans test.php $n_Formulaire

Je ne comprends pas: dans test.php, tu récupères nb_form (ton nombre de formulaires à créer) que tu envoies via AJAX à test2.php qui le récupère dans $_POST['Nb']. Et ensuite, que fait et/ou test2.php ?

ERE

[Invité]

test2.php ne fait que recevoir la variable renvoyer par ajax, car tu m'as dit ne ne pas pointer vers test.php !

En gros ce que je voudrai faire c'est récupérer la valeur écrite dans un champ afin de l'attribuer à une variable php qui servira pour une boucle for pour mettre en place n formulaires.

J'ai donc créer dans test.php 1 formulaire ensuite créer une fonction ajax qui récupère le nombre de formulaire souhaités.

Donc toute mes instructions se trouvent dans test.php

J'espère être compréhensible

[emmanuel.remy]

test2.php ne fait que recevoir la variable renvoyer par ajax, car tu m'as dit ne ne pas pointer vers test.php !

En gros ce que je voudrai faire c'est récupérer la valeur écrite dans un champ afin de l'attribuer à une variable php qui servira pour une boucle for pour mettre en place n formulaires.

J'ai donc créer dans test.php 1 formulaire ensuite créer une fonction ajax qui récupère le nombre de formulaire souhaités.

Donc toute mes instructions se trouvent dans test.php

J'espère être compréhensible

Donc si tu veux faire cela avec AJAX, test2.php reçoit le nombre de formulaire à créer, puis test2.php les crée (enfin crée le code HTML) et renvoie le code HTML comme réponse de l'appel AJAX.

Mais cela ne sert à rien. Techniquement et sauf cas particulier lié à une création obligée de tes formulaires sur le server, tu n'as pas besoin d'AJAX la dedans: dans test1.php tu récupères le nombre de formulaires à créer, et tu devrais les créer en javascript toujours depuis test1.php.

ERE

[Invité]

Okay d'accord j'était partis sur du Ajax afin de pouvoir affecter à une variable php une valeur récupérer dans le code Ajax.

Donc demain je vais faire comme tu m'a dis, créer mes formulaires à partir de javascript

Merci pour ta lumière


Edit: j'ai oublié de préciser que mon formulaire se métait en place à partir de données présentes dans une bdd

[emmanuel.remy]

Okay d'accord j'était partis sur du Ajax afin de pouvoir affecter à une variable php une valeur récupérer dans le code Ajax.

Donc demain je vais faire comme tu m'a dis, créer mes formulaires à partir de javascript

Merci pour ta lumière


Edit: j'ai oublié de préciser que mon formulaire se métait en place à partir de données présentes dans une bdd

Dans ce cas rien ne t'empêche de faire ta requête AJAX pour récupérer ces données et ensuite de les injecter dans tes formulaires créés côté client en Javascript.

ERE

[Invité]

Re,

Je ne vois pas trop comment faire, j'avoue que je débute juste en Ajax donc je suis un peu dans le flou, de plus sur le net je n'ai rien trouver de spécial avec ajax et SQL

[emmanuel.remy]

Re,

Je ne vois pas trop comment faire, j'avoue que je débute juste en Ajax donc je suis un peu dans le flou, de plus sur le net je n'ai rien trouver de spécial avec ajax et SQL

Un morceau de code simple vite fait qui crée de nouveaux formulaires directement en JS. Evidemment il reste du boulot à faire...

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript">
  function creeFormulaires() {
    var nbF = parseInt(document.getElementById("nbF").value);
    var frm = document.forms[0];
    for (var i=0; i<nbF;i++ ) {
      var frm2 = frm.cloneNode(true);
      document.getElementsByTagName("BODY")[0].appendChild(frm2);
    }
 
  }
  </script>
 
  </head>
  <body id="body">
    <form>
    <div>Nom: <input type="text" value="" /></div>
    <div>Prénom: <input type="text" value="" /></div>
    <div>Age: <input type="text" value="" /></div>
    </form>
    Nb formulaires:<input id="nbF" type="text" value="3" /><button onclick="creeFormulaires();">Créer les formulaires</button>
  </body>
</html>

ERE

[Invité]

Merci je vais me pencher sur sa

[Invité]

C'est bon, je pense avoir réussi à faire ce que je voulais grâce à ton aide !

Mais j'aimerais effectuer une amélioration, par exemple si entre le chiffre 4 sa créé 4 fois le formulaire, mais si on saisie 2 juste après sa en met deux de plus, alors que je souhaiterai que lorsque on mette 2 sa efface soit les 4 précédents ou soit les 2 derniers !

J'ai donc chercher comment faire, j'ai utiliser removeChild() et LastChild() mais sans succes !

Je ne vois pas trop comment implémenter ces fonctions.

Faut t'il créer une autre fonction ou on passe comme parametre le nom de la form et qu'on attribue au input text de saisie sur un evenement onChange ?

Merci de votre aide


Ps: je ne demande pas une solution toute faite mais juste des directives.

[emmanuel.remy]

Salut,

Modification de mon exemple précédent pour supprimer les n derniers formulaires ajoutés. Tu pourras adapter sans souci !

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript">
  function creeFormulaires() {
    var nbF = parseInt(document.getElementById("nbF").value);
    var frm = document.forms[0];
    for (var i=0; i<nbF;i++ ) {
      var frm2 = frm.cloneNode(true);
      document.getElementsByTagName("BODY")[0].appendChild(frm2);
    }
  }
 
  function supprimePlusieursFormulaires(nbre) {
    for (var i=0;i<nbre;i++) {
      var frm = document.forms[document.forms.length-1];
      frm.parentNode.removeChild(frm);
      delete frm;
    } 
  }
 
 
  </script>
 
  </head>
  <body id="body">
    <button onclick="supprimePlusieursFormulaires(2);">Supprimer 2 formulaires</button>
    <form>
    <div>Nom: <input type="text" value="" /></div>
    <div>Prénom: <input type="text" value="" /></div>
    <div>Age: <input type="text" value="" /></div>
    </form>
    Nb formulaires:<input id="nbF" type="text" value="3" /><button onclick="creeFormulaires();">Créer les formulaires</button>
  </body>
</html>

ERE

[Invité]

Je te remercie

[Invité]

Bon voila ce que j'ai fait

Code javascript :

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
 
function creeFormulaires() 
{
	supprimePlusieursFormulaires(9);// On supprime les éventuels enregistrements prévuent
	var nbF = parseInt(document.getElementById("nbF").value); // On récupère le nombre entré
	var frm = document.forms[0];// On définit un objet frm.
 
	for (var i=0; i<nbF;i++ ) // On boucle sur le nombre saisie
	{
		var frm2 = frm.cloneNode(true); //
		document.getElementsByTagName("BODY")[0].appendChild(frm2); // On créé les éléments sur le modèle défini
	}
}
 
function supprimePlusieursFormulaires(nbre)
{
	for (var i=0;i<nbre;i++) // On boucle sur le nombre reçue
	{
		var frm = document.forms[document.forms.length-1]; //
 
		if(document.forms.length != 1) // Si ce n'est pas le dernier form
		{
			frm.parentNode.removeChild(frm); // On supprime la form enfant
			delete frm;	// On supprime la variable
		}
	} 
}

Il ne manque plus qu'a adapter cela a ma solution finale, donc j'aurai peut être d'autres questions.

Sinon je voulais savoir si tu pouvais jeter un coup d'oeil ) mes commentaires, pour savoir si j'ai bien saisie la chose, et si possible commenter les lignes que je n'ai pas faites ?

Merci d'avance

[emmanuel.remy]

Plus simple si tu supprimes TOUS les formulaires ajoutés:

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
function creeFormulaires() 
{
	supprimeFormulaires();// On supprime les éventuels enregistrements prévuent
	var nbF = parseInt(document.getElementById("nbF").value); // On récupère le nombre entré
	var frm = document.forms[0];// On définit un objet frm.
				
	for (var i=0; i<nbF;i++ ) // On boucle sur le nombre saisie
	{
		var frm2 = frm.cloneNode(true); //
		document.getElementsByTagName("BODY")[0].appendChild(frm2); // On créé les éléments sur le modèle défini
	}
}

/**
 * Suppression de tous les formulaires ajoutés 
 */ 		 
function supprimeFormulaires()
{
  while (document.forms.length>1) {
	  //on prend le dernier formulaire
		var frm = document.forms[document.forms.length-1];
		frm.parentNode.removeChild(frm); // On le supprime 
		delete frm;	// On fait le ménage
  } 
}

ERE