[AJAX] Formulaire complet (2 liste lié + champs manuel + submit)

**setherone** · 12/07/2009, 13h15

Bonjour !

J'ai effectuer tout un tas de recherche sur les forum ajax et javascript et je ne trouve pas de réponse à mon soucis ! Je connais très bien le php mais je commence tout juste avec ajax ... bref !

Mon soucis est la réalisation d'un formulaire de saisie complet, il contient 2 liste déroulante lié ainsi que plusieurs champs de saisie manuel ainsi qu'un bouton submit pour injection dans la bdd.

exemple de formulaire souhaité:

- les 2 listes sont Marque -> modele (mise à jour de modele en fonction de marque
- champs prix (saisie manuel)
- bouton submit (injection en bdd)

Pour faire simple , je veux faire le choix dans mes listes lié, remplir les autres champs et valider le tout par un bouton submit que je redirigerais vers ma page d'insertion php.

j'ai pour le moment le formulaire avec seulement les 2 listes lié il fonctionne correctement mais je ne sais pas comment intégrer mes autre champs manuel et comment et ou intégrer le bouton submit qui enverra les infos dans la bdd.

Je me suis basé sur ce script : http://perso.wareteam.com

mon code qui fonctionne seulement je comprend pas bien la partie POST "il parle d'une page valid.php mais quand me choix sont fait via mes 2 listes il ne charge pas la page ....

INDEX.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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
	/**
	 * Permet d'envoyer des données en GET ou POST en utilisant les XmlHttpRequest
	 */
	function sendData(param, page)
	{
		if(document.all)
		{
			//Internet Explorer
			var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ;
		}//fin if
		else
		{
		    //Mozilla
			var XhrObj = new XMLHttpRequest();
		}//fin else
 
		//définition de l'endroit d'affichage:
		var content = document.getElementById("contenu");
 
		XhrObj.open("POST", page);
 
		//Ok pour la page cible
		XhrObj.onreadystatechange = function()
		{
			if (XhrObj.readyState == 4 && XhrObj.status == 200)
				content.innerHTML = XhrObj.responseText ;
		}
 
		XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		XhrObj.send(param);
	}//fin fonction SendData
 
    </script>
</head>
<body>
 
<?php
   // Paramètres de la Connexion à la base MYSQL
   $user="****";
   $host="****";
   $password="****";
   $database="****";
   $i=0; // variable de test
   $j=0; // variable pour garder la valeur du premier enregistrement catégorie pour l'affichage
 
   $connexion = mysql_connect($host,$user,$password) or die ("Connexion au serveur impossible");
 
   mysql_select_db($database,$connexion);
 
   // Séléction de tous les enregistrements de la table Catégorie
   $rq="Select * from marque order by marque;";
   $result= mysql_query ($rq) or die ("Select impossible");
   echo "<form method='POST' action='valid.php'>";?>   <select size="1" name="cat" OnChange="sendData('id='+this.value,'liresc.php')" onKeyUp="sendData('id='+this.value,'liresc.php')">
 
<?php     
   while ($dt=mysql_fetch_row($result))
   {
    // Remplir la liste déroulante des catégorie      
        echo "<option value=".($dt[0]).">".($dt[1])."</option>";
    if ($i==0) { $j=$dt[0]; $i=1; } // garder la valeur du premier enregistrement
   }
    
   ?>    
   </select><br><br>
 
 
 
   <div id="contenu">
 <?php  
  // affichage des sous-catégorie appartenant à la première catégorie.
   echo "<select size='1' name='souscat'>";   
    $rq="Select * from modele where id_marque=".$j." order by modele;";
    $result= mysql_query ($rq) or die ("Select impossible");
     // $i = initialise le variable i
    $i=0;
    while ($dt=mysql_fetch_row($result))
    { 
         echo "<option value=".utf8_encode($dt[0]).">".utf8_encode($dt[1])."</option><br>";
    }    
        echo "</select>";
   ?>   
   </div>
</form>
</body>
</html>

LIRESC.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
<?php
header('Content-type: text') ; // on déclare ce qui va être afficher
 
// test des POST emis
if(isset($_POST['id']) && !empty($_POST['id']) ){
   $user="****";
   $host="*****";
   $password="****";
   $database="*****";
   $connexion = mysql_connect($host,$user,$password) or die ("Connexion au serveur impossible");   
   mysql_select_db($database,$connexion);
    $rq="Select * from modele where id_marque=".$_POST['id']." order by modele;";
    $result= mysql_query ($rq) or die ("Select impossible");
     // $i = initialise le variable i
    $i=0;
        if (mysql_num_rows($result)>0)
        {
          echo "<select size='1' name='souscat'>";
        }
        else
        {
          echo utf8_encode("Pas de sous catégories disponible");       
        }
    while ($dt=mysql_fetch_row($result))
    {   
         echo "<option value=".utf8_encode($dt[0]).">".utf8_encode($dt[1])."</option><br>";
    }    
        echo "</select>";
}
 
?>

merci de votre aide

**emmanuel.remy** · 13/07/2009, 09h37

Salut,

Si ton formulaire est correctement rempli, alors le clic sur le bouton submit envoie les données du formulaire vers la page point par l'attribut action de la balise form, ici valid.php.

Tu dois donc créer une page valid.php résidant dans le même répertoire que index.php. Pour tester l'envoi correct des données fait basiquement:
valid.php

Code :

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

1
2
 
<pre><?php print_r($_POST); ?></pre>

ERE

**setherone** · 14/07/2009, 11h23

Bonjour
en fait mon soucis ne vient pas du code php ou de la recuperation des infos du formulaire mais plus comment et ou j'integre un champs manuel et un bouton submit pour que le formulaire post les infos après le click submit en plus du post utilisez par l'ajax qui lui recupère les valeurs de la seconde liste !

**andry.aime** · 14/07/2009, 12h03

Bonjour et Bienvenue sur developpez.

mon code qui fonctionne seulement je comprend pas bien la partie POST "il parle d'une page valid.php mais quand me choix sont fait via mes 2 listes il ne charge pas la page ....

Quand tu utilises Ajax, la page ne se recharge pas mais actualise des champs.

comment et ou j'integre un champs manuel et un bouton submit pour que le formulaire post les infos après le click submit

En regardant le capture, tu as déjà le champ manuel et le bouton submit

Mais dans ton code, on ne le voit pas.

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
echo "<form method='POST' action='valid.php'>";?>   <select size="1" name="cat" OnChange="sendData('id='+this.value,'liresc.php')" onKeyUp="sendData('id='+this.value,'liresc.php')">
 
<?php     
   while ($dt=mysql_fetch_row($result))
   {
    // Remplir la liste déroulante des catégorie      
        echo "<option value=".($dt[0]).">".($dt[1])."</option>";
    if ($i==0) { $j=$dt[0]; $i=1; } // garder la valeur du premier enregistrement
   }
    
   ?>    
   </select><br><br>
 
 
 
   <div id="contenu">
 <?php  
  // affichage des sous-catégorie appartenant à la première catégorie.
   echo "<select size='1' name='souscat'>";   
    $rq="Select * from modele where id_marque=".$j." order by modele;";
    $result= mysql_query ($rq) or die ("Select impossible");
     // $i = initialise le variable i
    $i=0;
    while ($dt=mysql_fetch_row($result))
    { 
         echo "<option value=".utf8_encode($dt[0]).">".utf8_encode($dt[1])."</option><br>";
    }    
        echo "</select>";
   ?>   
   </div>
<input type="text" name="champ_prix"/>
<input type="submit" value="envoyer"/>
</form>

**setherone** · 14/07/2009, 22h52

Quand tu utilises Ajax, la page ne se recharge pas mais actualise des champs.

Eh bien

merci cette simple phrase à éclairé ma compréhension de l'ajax !! et du coup mon code est devenu plus clair ! tout fonctionne je récupère correctement les infos après submit de mon formulaire.

[AJAX] Formulaire complet (2 liste lié + champs manuel + submit)

AJAX

Vue hybride

Discussions similaires

Partager

Partager