Discussion :

[tryan]

Bonjour,

Sur l'un de mes sites j'utilise un formulaire extra long sur lequel une liste déroulante (catégories) est lié à une panoplie de micro formulaires. Par exemple, à la sélection de la catégorie 1, ça va afficher 3 "input", catégorie 2 va afficher une liste, etc...
Pour ce faire, j'utilise actuellement un "onchange="javascript:submit(this)"" sur la liste pour recharger la page puis j'utilise un "if ($_POST["categorie"]==***)" pour afficher ou ré afficher la partie correspondante.

Aujourd'hui, je tente d'améliorer ce formulaire afin d'éviter le rechargement de la page à la sélection et j'essaye donc d'utiliser Ajax pour aboutir à ce résultat. La ou je "coince", c'est que je ne parviens pas à garder la sélection de la seconde partie du formulaire si l'utilisateur valide le formulaire et qu'une erreur survient.

Ma partie teste :

Sur ma sélection (ma liste) j'utilise onchange="montre(this.value);" qui transmet à ma fonction ajax le numéro de l'option qui elle même va chercher en "GET" (dans le fichier 'teste2.php') tout ce qui correspond au numéro transmit puis affiche le résultat dans un <span id="bloc"></span>.

Jusque la, pas de soucis.

Si je valide mon formulaire, la partie du formulaire associée à ma sélection disparaît ... la est mon soucis !

La seule solution que j'ai trouvé pour ne pas perdre ma sélection à la validation est d'inclure le fichier appelé via Ajax à la validation du formulaire directement dans mon bloc d'affichage :

Code :

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

<span id="bloc"><?php if(isset($_POST['Valider'])) include('teste2.php');?></span>

et de vérifier dans ce même fichier (teste2.php) si celui-ci reçoit les informations en GET ou POST pour ré afficher ou pas les données...

Fichier teste2.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
<?php
//récupération de la valeur de l'option via Ajax
if(isset($_GET['numoption']) && !empty($_GET['numoption'])){
    $numoption = $_GET['numoption'];
}
//si le formulaire a été validé, on inclue cette page dans le bloc lié à la liste déroulante pour récupérer et ré afficher les valeurs associées en cas d'erreur.
if(isset($_POST['categorie']) && !empty($_POST['categorie'])){
    $numoption = $_POST['categorie'];
}
 
//Catégorie 1
if($numoption == 1){?>
    Cat 1 <input type="text" name="cat1" value="<?php if(isset($_POST['cat1'])) echo $_POST['cat1'];?>" />
<?php }
 
//Catégorie 2
if($numoption == 2){?>
    Cat 2 <input type="text" name="cat2" value="<?php if(isset($_POST['cat2'])) echo $_POST['cat2'];?>" />
<?php }
//etc...
?>

Ma méthode me semble tellement tordu que je préfère vous en faire part afin d'obtenir vos avis...

Merci

[v1cent]

Je pense que déjà il y a une incompréhension de ta part sur l'AJAX

pardonne moi si je me trompe, mais si je comprend bien ton problème, tu remplace un bout de formulaire par une autre version, et tu es géné parce que un champ est remplacé

la solution serait alors de mettre à jour uniquement le reste tout simplement

sinon tu met ton résultat dans une variable globale en javascript tout simplement aussi

[tryan]

Non ce n'est pas vraiment ça en même temps ma compréhension est limité . J'utilise ajax sur le même principe que 2 listes déroulante liées. La sélection dans ma liste demande via la fonction ajax d'afficher dans un bloc la partie correspondante.

Le fichier qui est appelé via la fonction contient uniquement des bouts de formulaire. Chaque bout de formulaire est donc affiché dans le bloc uniquement à la sélection de la liste.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<form action="<?php echo($_SERVER['PHP_SELF']); ?>" method="post" id="form1">
 
	<select name="categorie" id="categorie" onchange="montre(this.value);">
	<option value="vide">---Selectionner---</option>
	<option value="1" <?php if(isset($_POST['categorie']) && $_POST['categorie'] == 1) echo "selected";?>> Cat 1</option>
	<option value="2" <?php if(isset($_POST['categorie']) && $_POST['categorie'] == 2) echo "selected";?>> Cat 2</option>
	</select>
 
                <!-- bloc affichant le résultat de la sélection-->
		<span id="bloc"></span>
 
	<input type="submit" name="Valider" value="Valider">
</form>

Côté Ajax :

Code :

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

1
2
3
4
5
6
7
8
/*L'envoie*/
        var url = 'teste2.php?numoption='+ numoption;
        /* Envoi de la requête à la page de traitement */
        requete.open('GET', url, true);
/*la réponse*/
    var affichereponse = requete.responseText;
    var blocListe = document.getElementById('bloc');
    blocListe.innerHTML = affichereponse;

Comme je le disais, le fichier "teste2.php" contient uniquement des bouts de formulaires et comme la fonction ajax transmet le numéro de l'option sélectionné, j'utilise donc une série de conditions pour afficher uniquement la partie souhaité.

teste2.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
<?php
//récupération de la valeur de l'option via Ajax
if(isset($_GET['numoption']) && !empty($_GET['numoption'])){
    $numoption = $_GET['numoption'];
}
 
//Catégorie 1
if($numoption == 1){?>
 
    Cat 1 <input type="text" name="cat1" value="<?php if(isset($_POST['cat1'])) echo $_POST['cat1'];?>" />
   Cat 2 <input type="text" name="cat2" value="<?php if(isset($_POST['cat2'])) echo $_POST['cat2'];?>" />
 
<?php }
 
//Catégorie 2
if($numoption == 2){?>
 
    Cat 2 <input type="text" name="cat2" value="<?php if(isset($_POST['cat2'])) echo $_POST['cat2'];?>" />
   Cat 3 <input type="text" name="cat3" value="<?php if(isset($_POST['cat3'])) echo $_POST['cat3'];?>" />
 
<?php }
//etc...
?>

Si je valide mon formulaire pour enregistrer les données en BD, la partie du formulaire affiché dans mon bloc (<span id="bloc"></span>) disparaît alors que moi je veux qu'il reste affiché, d'ou la méthode utilisé dans mon premier poste et ma question.

[v1cent]

ha oui j'ai compris, ton problème est que après le rechargement, le formulaire ne se met pas à jour en fonction de l'option ?


tu as deux solution, soit tu fait comme maintenant, soit tu utilise ta fonction javascript au chargement de la page en plus du onchange

[tryan]

ha oui j'ai compris, ton problème est que après le rechargement, le formulaire ne se met pas à jour en fonction de l'option ?

Yessssssssss

Je viens de tester en utilisant ma fonction au chargement de la page. La partie du formulaire appelé s'affiche correctement par contre les données saisies ne se ré affiche pas ?
Je m'y prend peut être comme un manche ...

Après validation j'injecte le numéro de l'option sélectionné dans la fonction :

Code :

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

<body onload="montre(<?php if(isset($_POST['categorie'])) echo $_POST['categorie'];?>);">

Quand j'effectue un print_r($_POST); , j'obtiens entre autre :

Code :

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

1
2
3
 
    [categorie] => 1
    [cat1] => teste

Pour moi, tout est la y comprit la valeur du champ.

Code :

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

	Cat 1 <input type="text" name="cat1" value="<?php if(isset($_POST['cat1'])) echo $_POST['cat1'];?>" />

Le contenu devrait donc théoriquement se ré afficher ...non ?

Sinon et je m'excuse d'insister, ma méthode initial ne vous paraît vraiment pas "tordu" ?

[v1cent]

Non ce n'est pas tordu du tout

Pour tes données, c'est normal, il faut que tu transmette tes données à la main (ou les stocker coté serveur) si tu veux qu'elles se réaffichent... du coup poursuivre comme tout de suite semble plus pertinent que le coup de la fonction au chargement...

Par contre il y a peut être plus simple à gérer : tu transmet tout, et tu cache ou affiche les champs (css display none) en fonction de ton select.

Comme ça tu es sûr que les données sont conservées et tu as pas à t'emm..bêter en ajax

quand le formulaire arrive, tu ne lis pas ce qui ne t'intéresse pas, tout simplement

[tryan]

Ok, merci de votre réponse .

J'avais testé le coup du formulaire "afficher/cacher" par un "display" à la sélection et le problème était que si je remplie 2 choix différents, les 2 choix sont conservés...

Par exemple, j'affiche l'option 1, je remplie le formulaire associé, je valide. Une erreur survient et je décide de changer de sélection (option 2) donc je remplie de nouveau le formulaire associé à ma nouvelle sélection. Quand je valide, la BD enregistre le formulaire de l'option 2 et de l'option 1 alors que seule la dernière sélection doit être conservé (pas facile à expliquer ces histoires de formulaires).

[v1cent]

c'est ton algorithme qui devait être un peu foireux, si tu n'enregistre que les champs qui t'intéressent en fonction de l'option, la BDD n'aura que ceux là, indépendamment de ce que tu affiche coté client

[tryan]

c'est ton algorithme qui devait être un peu foireux...

Très certainement ! Du coup je m’interroge sur ce que vous venez d'écrire car je ne vois pas comment enregistrer en bd uniquement ce qui correspond à l'option sélectionné?

Pour moi, "afficher/cacher" correspond à suite de div caché qui est affiché uniquement la sélection.

Code :

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

1
2
3
4
5
6
 
<!--Routine JS pour "montrer/cacher" un bloc à la sélection-->
 
<div id="option_1" style ="display:none;"><!--formulaire 1--></div> 
<div id="option_2" style ="display:none;"><!--formulaire 2--></div> 
<div id="option_3" style ="display:none;"><!--formulaire 3--></div>

Toujours pour moi, si 2 formulaires sont remplient successivement, les données des 2 formulaires sont conservés...bref, il y a un truc qui m'échappe .

Si vous avez le temps de me montrer un exemple pour que je comprenne, n'hésitez pas.
Merci de vos réponses .

[v1cent]

Je ne peux pas deviner comment ça se fait, vu que nous ne voyons pas tes requêtes SQL...

Les données sont conservées dans le formulaire, mais rien ne t'empêche de décider de ce que tu transmet ou non...

En gros tu peux faire une bidouille du genre

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
 
//si le formulaire a été validé, on inclue cette page dans le bloc lié à la liste déroulante pour récupérer et ré afficher les valeurs associées en cas d'erreur.
if(isset($_POST['categorie']) && !empty($_POST['categorie'])){
    $numoption = $_POST['categorie'];
}
 
// ajout d'un tableau qui récupère les données
$donneesForm = array() ;
// tri des données intéressantes en fonction de l'option
 //Catégorie 1
if($numoption == 1){
    $donneesForm['cat1'] = $_POST['cat1'] ;
    $donneesForm['cat2'] = "" ;
    // etc.
}
//Catégorie 2
if($numoption == 2){
    $donneesForm['cat1'] = "" ; 
    $donneesForm['cat2'] = $_POST['cat2'] ;
    //etc.
}
// enregistrement de ce qui t'intéresse en base
 
?>
 
    Cat 1 <input type="text" name="cat1" value="<?php echo $donneersForm['cat1']?>" />
    Cat 2 <input type="text" name="cat2" value="<?php echo $donneersForm['cat2']?>" />

Bon comme je sais pas ce que tu fait exactement, je suis pas sûr que ça colle tout à fait, mais l'esprit est là

[tryan]

Avec un peut de retard, merci de votre exemple et c'est une solution qui ne m'avait même pas effleuré l'esprit.

A la final j'ai gardé mon principe et ça semble pour le moment très bien fonctionné.

Encore merci de vos réponse.