Reconstituer les éléments enfants d'un formulaire à la soumission

Version imprimable

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:

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:

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();
});

09/12/2024, 14h19
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:

1 2 3 4 const form=document.querySelector(".search"); form.addEventListener('submit', function(e) { e.preventDefault(); });
09/12/2024, 19h12
moimp
Citation:

Envoyé par Toufik83

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:

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.
09/12/2024, 20h43
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".
10/12/2024, 12h56
moimp
Citation:

Envoyé par CosmoKnacki

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.

Citation:

Envoyé par CosmoKnacki

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.

Test minimal

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

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
<!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:

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

Code:

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.

11/12/2024, 11h36
NoSmoking

Bonjour,

Citation:

var_dump($_POST);

par défaut, et sans aucune précision sur la méthode utilisée, l'envoi de données se fait en GET.
11/12/2024, 12h34
moimp

Ouf, merci, c'est la réponse qu'il me fallait depuis l'ouverture de la discussion.
11/12/2024, 13h51
NoSmoking

D'où l’intérêt de bien présenter le contexte d'entrée de discussion ;)