[AJAX] Remplir un formulaire sans recharger la page

Version imprimable

05/11/2007, 11h53
houdazcom

[AJAX] Remplir un formulaire sans recharger la page

Bonjour à tous et à toutes,j'espère trouver une solution à mon problème.
Alors j'ai une page php qui contient un grand formulaire (form1),qui à son tour contient deux boutons + le dernier bouton de validation.
Les deux boutons permettent de sélectionner deux div cachés:
si par exemple l'utilisateur clique sur le bouton A,un <div id="A"> sera visible contenant des champs de texte rempli automatiquement depuis la base de donnée.
Par contre si le bouton B est selectionné,un autre <div id="B"> sera visible et c'est la où ca se complique pour moi: car dans ce 2éme cas il ya en fait un sous-cas, car dans le div B il y a une liste déroulante qui est remplie depuis la base de donnée,et si à la séléction d'un élément dans cette liste,il faut que les champs de texte se remplissent automatiquement également depuis la base de donnée selon l'element choisi.
exemple: Si je choisi un nom X dans la liste,les champ nom,prenom,adresse,ville,tel seront rempli automatiquement selon la requete "select * from coordonnee where nom='X'";
Mais si je choisi "Autre" dans ce cas les champs en question restent vide pour l'ajout (j'arrive à gérer ce cas sans problème).
Je pense que je dois utiliser AJAx (parce que je veux pas que ma page se recharge) seulement je ne connais pas AJAX,et j'ai lu beaucoup de tutoriaux le concernant,mais ca ne correspond pas toujours à ce que je cherche.
Ma question est: comment faire? (je ne demande pas des codes je peux vous les fournir,j'ai besoin de comprendre comment pouvoir insérer ce que je veux dans la position que je veux depuis la page qui va me faire le traitement)
Je sens dejà que je n'aurai pas de réponses :(:(
05/11/2007, 16h14
marcha

Salut,

sur le principe il te faut déjà gérer le onchange de ton select pour appeler une fonction javascript lorsque l'utilisateur fait sont choix dans la liste.

dans cette fonction, tu lances une requête ajax sur une page serveur qui reçoit le
paramètre correspondant au choix de la liste, qui fait la requête sql et qui retourne
le contenu de l'enregistrement (au format JSON ça serait surement pas mal dans
ton cas)

ensuite, la fonction de retour programmée sur l'objet xmlHttpRequest extrait le
JSON puis modifie les champs du formulaire en conséquence.

si tu as besoin de précision sur un point, n'hésite pas.

Salut!

Je doute que JSON te sois indispensable pour ça et si tu connais pas l'application, laisse tomber. Si tu ne connais pas bien Ajax, recherche sur google des tutoriels ou des parties de script que tu pourrais modifier pour faire un form inline.

J'en ai un sur mon site qui met en loading après l'envoi du form et qui retourne le même formulaire après traitement des données et il fonctionne nickel... ça se présente comme ça:

form.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<title>MonForm</title>
### Rel ton code ajax
### Rel ton code javascript
</head>
<body>
<div id="max"> ### div modifié par Ajax
<form method="post" onSubmit="var poststring=createstring(); javascript: ajax('datas.php', 'max', 'POST', 'poststring')">
<input type="text" name="sample" id="sample">
<input type="submit">
</form>
<script type="text/javascript">
 
function createpoststring(){
var sample = document.getElementById('sample').value
var poststr = 'sample=' + encodeURI(sample);
return poststring
}
 
</script>
</div>

datas.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
### Traitement des données
### Enregistrement SQL
### Données récupérées par SQL
 
mysql_close();
 
if($valide == "oui") ### exemple pour l'affichage du formulaire
{
 
?>
 
<html>
<head>
<title>Mon2eForm</title>
### Rel ton code ajax
### Rel ton code javascript
</head>
<body>
 
<form method="post" onSubmit="var poststring=createstring(); javascript: ajax('datas.php', 'max', 'POST', 'poststring')">
<input type="text" name="sample" id="sample" value="<?php echo"$ma_valeur"; ?>">
<input type="submit">
</form>
<script type="text/javascript">
 
function createpoststring(){
var sample = document.getElementById('sample').value
var poststr = 'sample=' + encodeURI(sample);
return poststring
}
 
</script>
 
<?php
 
}

Ce n'est qu'un exemple! Bon dév!

~w~

06/11/2007, 12h37
houdazcom

Merci pour vos réponses,finalement j'ai trouvé une alternative vue que ca me prendrai beaucoup de temps si je m'y met à ajax d'abord,alors en fait l'utilisateur choisira dans la liste déroulante son choix et ensuite continuer le formulaire puis valider,et c'est dans la page suivante que je récupérerai son choix avec les autres infos et les afficher ensuite dans la page d'affichage des infos depuis la BD.Au cas où il choisira "Autre" le formulaire caché sera donc afficher et il saisira les infos qui seront par la suite insérer dans la page suivante.
C'est vrai qu'AJAX me sera très utile dans plusieurs cas donc je m'y met à AJAX.
Merci à vous.