Discussion :

[moimp]

Bonjour à tous,
Lorsqu'on soumet un formulaire avec submit(), les éléments du formulaire disparaissent. Où et comment les reconstituer pour qu'ils soient transmis au fichier cible (attribut 'action') du formulaire.
J'ai testé ceci qui ne marche pas:

Code html :

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

1
2
3
4
5
			<form class="search" action="formHandler.php">
				<input type="hidden" name="form" value="search">
				<label ><span><?= $this['_latest'] ?></span><?= $this->raw('#latest') ?></label>
				<label><span><?= $this['_favourits'] ?></span><?= $this->raw('#favourits') ?></label>
			</form>

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
const searchForm	= document.querySelector(".search")
	,latest			= document.querySelector("[name='latest']")
	,favourits		= document.querySelector("[name='favourits']")
	;
 
favourits.addEventListener('change', function(e) {
	e.preventDefault();
	let favourits = document.createElement('input');
	favourits.name = 'favourits';
	favourits.value = favourits.value;
	searchForm.appendChild(favourits);
	searchForm.submit();
});

[Toufik83]

Bonjour,

Que voulez vous dire par "disparaissent" ? ils ne sont plus visibles après la soumission ?

Je n'ai pas compris, et je pense que la page de formulaire est redirigée vers la page de script PHP lors de la soumission, car vous utilisez preventDefault() sur l'évenement change et pas submit.

Essayez d'attacher l'évenement submit au formulaire afin de rester sur la même page lors de la soumission :

Code :

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

1
2
3
4
const form=document.querySelector(".search");
  form.addEventListener('submit', function(e) {
	e.preventDefault();
  });

[moimp]

Que voulez vous dire par "disparaissent" ? ils ne sont plus visibles après la soumission ?

Ils ne sont pas disponibles sur la page PHP de destination ('formHandler.php') désigné dans l'attribut 'action' du formulaire.
Pour une question de cohérence, tous mes traitements sont gérés par cette page PHP. Je souhaite donc que l'écouteur

Code :

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

1
2
3
favourits.addEventListener('change', function(e) {
	//...
});

transmette le nom du formulaire (disponible dans un champ caché du formulaire) et la valeur de la liste d'options 'favourits' soient transmis à la page de destination.

[CosmoKnacki]

Ce que tu veux faire n'est pas bien clair.

Si j'ai bien compris:

• coté client: ton but est de faire apparaître une nouvelle zone de saisie (un nouvel élément input) lorsque tu modifies la zone de saisie (ou la checkbox) déjà présente nommée "favourits".
• coté serveur: tu veux récupérer les données du formulaire, dont celles de la nouvelle zone de saisie fraîchement créée, pour générer le même formulaire mais cette fois-ci incluant en plus la nouvelle zone de saisie.

Est-ce que j'ai bon?

Quelques remarques et questions en vrac:

• N'espère rien d'une ligne comme ça: favourits.value = favourits.value;
• Dans un formulaire, deux éléments input ne peuvent pas avoir le même attribut name. Ou alors tu dois utiliser un tableau: <input name="toto[]" type="jesaispasquoi"/> <input name="toto[]" type="jesaispasquoi"/>
• Après la soumission, si tu veux que ton code PHP affiche tous tes <input> "favourits[]", il va falloir faire une boucle.
• Que devient l'élément <input> d'origine après la soumission, reste-t-il un élément de formulaire?
• Peux-tu montrer la "big picture".

[moimp]

Peux-tu montrer la "big picture".

MIEUX QU'UNE IMAGE: Pour mieux comprendre:

• Le présent projet est la réécriture complète d'une ancienne application écrite de façon compliquée et difficile à maintenir.
• On peut se reporter à la version existante:

Dans cette version existante, regarder la version demo (lien juste au dessus du formulaire de connexion) et dans la nouvelle page accéder par le menu à l'affichage individuel.
Ce qui nous intéresse dans la présente question est le formulaire du haut ('searchForm' de la nouvelle version). Lors de la sélection d'une personne dans 'récents' ou 'favoris' celle-ci doit s'afficher instantanément dans le cadre "Personne de référence" (On obtient le même effet en cliquant sur la flèche d'une personne du cadre de droite sauf qu'ici, l'action est traitée côté serveur)

J'ai bien conscience de toutes tes remarques et questions; le mieux est de ne pas tenir compte de ce que j'ai écrit à l'intérieur de l'écouteur.

EDIT: J'ai essayé de reprendre mon ancien script, mais il ne fonctionne pas dans le nouveau contexte.

Que devient l'élément <input> d'origine après la soumission, reste-t-il un élément de formulaire?

Non, il ne me reste aucun élément de formulaire, d'où le titre de la discussion.

[moimp]

Pour compléter et mieux comprendre j'ai réalisé un test minimal.

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
26
27
28
29
30
<!DOCTYPE html>
 
<html lang="fr">
 
<head>
	<meta charset="UTF-8">
	<title>Un titre</title>
 
	<link rel="stylesheet" media="all" type="text/css" href="css/main.css">
 
	<script type="module" src="testJs.js"></script>
</head>
 
<body>
	<form class="search" action="testPhp.php">
		<input type="hidden" name="form" value="search">
		<input type="search" name="q">
		<button name="btnQ"><img src="images/glass.png"></button>
		<button name="btnHelp"><strong>&nbsp;?&nbsp;</strong></button>
		<label ><span>Récents</span><select name='latest'></select></label>
		<label><span>Favoris</span>
			<select name='favourits'>
				<option value=''></option>
				<option value='20'>Dupont Pierre</option>
				<option value='21'>Durand Alex</option>
			</select>
		</label>
	</form>
</body>
</html>

Code JavaScript :

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

1
2
3
4
5
6
7
const searchForm	= document.querySelector(".search")
	,favourits		= document.querySelector("[name='favourits']")
	;
 
favourits.addEventListener('change', function() {
	searchForm.submit();
});

Code php :

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

1
2
3
<?php declare(strict_types=1);
 
var_dump($_POST);		// retourne empty

Sur cet exemple, on voit que les données du formulaire ne sont pas transmises au fichier PHP de traitement indiqué dans l'attribut action du formulaire. Mon problème consiste donc à récupérer ces données.