Enregistrement automatique de formulaire

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous,

Deux mois de galère, c'est trop. Avec vous, j'ai essayé plusieurs méthodes mais je n'avance pas. Comme c'est quelque chose que je voudrais réaliser pour plusieurs de mes applications, j'aimerais bien y arriver.

J'ai essayé de sauvegarder le formulaire complet avec Ajax avec un contrôle global des champs et je butte sur la phase de contrôle.
Avec Ajax encore, j'ai essayé de sauvegarder chaque champ après chaque modification avec un contrôle individuel de chaque champ et c'est la noyade complète.
J'ai essayé de recharger ma page après chaque modification en php avec contrôle individuel de chaque champ et mon code tourne en boucle lorsque je passe d'un champ à l'autre à l'intérieur du même formulaire.

Et j'en suis toujours en phase d'échec.

Je pense préférable de traiter (contrôle et enregistrement) chaque champ individuellement mais ne sais plus par quel bout m'y prendre.

A toute fin utile, je vous donne mon dernier code qui appelle le fichier de contrôle PHP. Malheureusement, ce code tourne en boucle, aussi bien avec la version en commentaire qu'avec celle en cours.
Mon but est de contrôler et sauvegarder chaque champ, lorsque je le quitte (blur).
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 37 38 39 40 41 42 43 44 45 "use strict"; //(function() //{ window.addEventListener('load', function() { const inclForms = document.querySelectorAll('.cardForm') , editableFields= document.querySelectorAll("[data-action='edit']") ; // Constant 'editFile' is sent from cardFrameView.php function send(objField) { const objForm = objField.form; if ( objField.nodeName.toLowerCase() !== 'select' ) objField.select(); objForm.action = editFile+'?field='+objField.name; objForm.submit(); } for (let i=0, max=editableFields.length; i<max; i++) { (function(field) { field.addEventListener('blur', function() { send(this); }); field.addEventListener('keydown', function(e) { console.log(this); if ( e.keyCode == 13 && this.nodeName.toLowerCase != 'textarea' ) send(this); }); })(editableFields[i]); } }, { capture: false, passive: true, once: false }); //}) ();
Voici une image d'une de mes applications.
Pièce jointe 506807
Remarque: Certains onglets peuvent contenir plusieurs formulaires identiques par exemple pour les interlocuteurs ou les actions.

01/10/2019, 11h58
Invité
Bonjour,

A mon avis, il faut revenir aux fondamentaux.
Avant de faire des trucs compliqués, on commence par la base : un formulaire PHP tout simple, avec rechargement de page et traitement PHP.
APRÈS, on essaie de trouver comment l'améliorer.

A AUCUN moment tu nous a donné une vision GLOBALE du code :
- on n'a jamais vu le code HTML DES formulaires !
- on ne sait pas ce que tu veux enregistrer, et dans quoi
- tu montres un code JS, sans le moindre commentaire ni explication
- ...
D'autre part, tu semble vouloir faire une vérification des champs en JS, alors que la vérification la plus importante doit se faire en PHP (et PEUT se faire en PHP, via Ajax !).

D'abord merci de venir à mon secours!

Citation:

Envoyé par jreaux62

A mon avis, il faut revenir aux fondamentaux.
Avant de faire des trucs compliqués, on commence par la base : un formulaire PHP tout simple, avec rechargement de page et traitement PHP.
APRÈS, on essaie de trouver comment l'améliorer.

J'ai fait des centaines de formulaires qui fonctionnent bien avec un bouton d'enregistrement. Le fichier de traitement (en PHP) effectue alors les contrôles nécessaires et l'enregistrement en base de données. Maintenant je veux faire un contrôle préalable à un enregistrement automatique au fur et à mesure des modifications de chaque champ.
J'ai adopté pour la première fois une structure MVC .
L'image que j'ai jointe résulte de mon code actuel. Il s'agit d'une application de prospection (CRM simplifiée pour gestion B2B par affaire, calquée sur une application que j'avais développé sur Access et que j'ai utilisé pendant des années).

Actuellement la structure est la suivante:
Un fichier cardFrame.php qui sert de moteur et de routeur pour les différents onglets (voir image). A chaque onglet correspond un formulaire. - Ce fichier fonctionne correctement.
Un fichier cardFrameView.php qui affiche la trame commune avec le menu principal et le menu des onglets
Chaque onglet peut contenir un ou plusieurs formulaires identiques (exemples address.php pour un formulaire unique ou staff.php pour des formulaires multiples).
Dans le cas de formulaire multiples, j'ai deux fichiers : Un fichier collecteur (dans l'exemple staff.php) et un fichier contenant le formulaire (ici person.php).

Si je prends l'exemple des interlocuteurs, le fichier collecteur staff.php est le suivant:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?php ob_start(); ?> <div>  <?= doMultiFormInsert($arrInsertForms); ?> </div> <footer class="formFooterNotes"> <ol class="note"> <li><?= STAFF_NOTES[0]; ?></li> <li><?= STAFF_NOTES[1]; ?></li> <li><?= STAFF_NOTES[2]; ?></li> <li><?= STAFF_NOTES[3]; ?></li> <li><?= STAFF_NOTES[4]; ?></li> </ol> <input type="submit" formaction="" title="<?= STAFF_BTN_NEW_TITLE; ?>" value="<?= BTN_NEW; ?>" /> </footer> <?php $strInsertPage = ob_get_clean(); ?>
Fonction d'affichage des formulaires multiples:
Code:

1 2 3 4 5 6 7 8 9 10 function doMultiFormInsert($arrToInsert) { if ( empty($arrToInsert) ) return ''; $strToInsert = ''; foreach ($arrToInsert as $str) { $strToInsert .= $str; } return $strToInsert; }
Exemple de vue du formulaire person.php inclus dans staff.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 <?php ob_start(); ?> <form method="post" action="" class="cardForm">  <div> <input type="hidden" name="id" value="<?= setPostValue('id'); ?>" /> <label><?= STAFF_LBL_GENDER; ?></label><?= $lstGender; ?><br/> <label><?= STAFF_LBL_TITLE; ?></label><input type="text" name="title" value="<?= setPostValue('title'); ?>" data-action='edit' /><br/> <label><?= STAFF_LBL_FIRST; ?></label><input type="text" name="firstname" value="<?= setPostValue('firstname'); ?>" data-action='edit' /><br/> <label><?= STAFF_LBL_LAST; ?></label><input type="text" name="lastname" value="<?= setPostValue('lastname'); ?>" data-action='edit' /><br/> </div> <div> <label><?= STAFF_LBL_ROLE; ?></label><input type="text" name="role" value="<?= setPostValue('role'); ?>" data-action='edit' /><br/> <label><?= STAFF_LBL_STD_ROLE; ?></label><?= $lstStdRoles; ?><sup class="note"> (1)</sup><br/> <label><?= STAFF_LBL_DEPT; ?></label><input type="text" name="department" value="<?= setPostValue('department'); ?>" data-action='edit' /><br/> </div> <div>  </div> <div> <label for="checkboxes[1]"><?= STAFF_LBL_CHK[0]; ?></label><input type="checkbox" name="checkboxes[1]" id="checkbox_1"<?= $checked[0]; ?> data-action='edit' /><sup class="note">(2)</sup><br/> <label for="checkboxes[2]"><?= STAFF_LBL_CHK[1]; ?></label><input type="checkbox" name="checkboxes[2]" id="checkbox_2"<?= $checked[1]; ?> data-action='edit' /><sup class="note">(3)</sup><br/> <label for="checkboxes[3]"><?= STAFF_LBL_CHK[2]; ?></label><input type="checkbox" name="checkboxes[3]" id="checkbox_3"<?= $checked[2]; ?> data-action='edit' /><sup class="note">(4)</sup><br/> <label for="checkboxes[4]"><?= STAFF_LBL_CHK[3]; ?></label><input type="checkbox" name="checkboxes[4]" id="checkbox_4"<?= $checked[3]; ?> data-action='edit' /><sup class="note">(5)</sup><br/> </div> </form> <?php $arrInsertForms[] = ob_get_clean(); ?>
Citation:

Parce que là, ni toi, ni nous ne savons précisément :

ce que tu as au départ
ce que tu veux obtenir à la fin

Je pense que le départ est maintenant à peu près connu. A la fin, je veux la même chose mais mis à jour des corrections à la fois dans la base de données et dans le formulaire.

Citation:

D'autre part, tu semble vouloir faire une vérification des champs en JS, alors que la vérification la plus importante doit se faire en PHP (et PEUT se faire en PHP, via Ajax !).

Non, pour moi, la vérification en JS est facultative, même si s'agissant d'une application, j'informe l'utilisateur que l'acceptation de JS est obligatoire pour utiliser l'application. Par contre, je n'arrive pas à gérer les appels au contrôle PHP via Ajax, et ce, malgré les aides reçues ici et les explications et les exemples sur MDN.

Citation:

Bref : si tu galères autant, c'est que le problème est MAL posé, et que tu ne nous donnes pas les infos nécessaires et suffisantes.

Je veux bien le croire car sur les problèmes complexes, j'ai toujours du mal à discerner, ce qui est nécessaire et ce qui noie.

01/10/2019, 16h17
Invité

Je vais être plus clair : on a besoin du code nécessaire et suffisant.

On est ici dans le forum JavaScript, et on cherche à mettre au point un traitement JS/Ajax.

Donc : on se "moque royalement" du code PHP (qui "construit" la page en amont).

Par contre, on a besoin du code HTML généré ("CTRL"+"U"), ou d'une version simplifiée (2 formulaires suffisent a la résolution de la problématique).

Voici deux exemples de codes sources (simplifiés)
Le premier correspond au cas d'un formulaire unique.
Le second correspond au cas de trois formulaires identiques.

Est-ce que cela suffit?

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
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
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Titre</title>
 
		<meta http-equiv="Expires" content="-1" />
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
 
		<base href="http://sirep.proginet.local/" />
 
		<link rel='stylesheet' media='all' type='text/css' href='http://sirep.proginet.local/common/css/structure.css' />
		<link rel='stylesheet' media='screen' type='text/css' href='http://sirep.proginet.local/common/css/style0.css' />	
	</head>
 
	<body>
 
		<section>
			<div id="left">
 
<nav class="mainNav">
	<ul>
		<li><a href='http://sirep.proginet.local/frontend/index.php' >Accueil entreprise</a></li>
		<li><a href='http://sirep.proginet.local/frontend/controllers/cardFrame.php' >Fiche client</a></li>
		<li><a href='http://sirep.proginet.local/frontend/controllers/displList.php' >Liste</a></li>
		<li><a href='http://sirep.proginet.local/index.php' >Déconnexion</a></li>
	</ul>
</nav>
 
			</div>
			<article id="right">
 
<h3 class="blue">Un client</h3>
 
<div class="menuH">
	<ul>
		<li class='currentTab'><a href='http://sirep.proginet.local/frontend/controllers/cardFrame.php?tab=0'>Adresse</a></li>
		<li><a href='http://sirep.proginet.local/frontend/controllers/cardFrame.php?tab=1'>Interlocuteurs</a></li>
		<li><a href='http://sirep.proginet.local/frontend/controllers/cardFrame.php?tab=2'>Commercial</a></li>
		<li><a href='http://sirep.proginet.local/frontend/controllers/cardFrame.php?tab=3'>Actions</a></li>
		<li><a href='http://sirep.proginet.local/frontend/controllers/cardFrame.php?tab=7'>Divers</a></li>
	</ul>
</div>
 
<!-- Formulaire à traiter -->
<form method="post" action="" class="cardForm">
	<div>
		<input type="hidden" name="id" value="2963" />
		<label for="company">Client</label><input type="text" name="company" id="company" value="XXXX" data-action='edit' /><br/>
		<label for="fullname">Complément de nom</label><input type="text" name="fullname" id="fullname" value="" data-action='edit' /><br/>
		<label for="address1">Adresse 1</label><input type="text" name="address1" id="address1" value="171 avenue de Paris" data-action='edit' /><br/>
		<label for="address2">Adresse 2</label><input type="text" name="address2" id="address2" value="" data-action='edit' /><br/>
		<label for="country">Pays</label><select name="country" id="country" data-action='edit'>
			<option></option>
			<option value="DE">Allemagne</option>
			<option value="FR">France</option>
			<option value="ZW">Zimbabwe</option>
		</select><br/>
		<label for="zip">Code postal</label><input type="text" name="zip" id="zip" value="01234" data-action='edit' /><br/>
		<label for="city">Ville</label><input type="text" name="city" id="city" value="Ma ville" data-action='edit' /><br/>
	</div>
	<div>
		<label for="phone">Téléphone</label><input type="text" name="phone" id="phone" value="01 02 03 04 05" data-action='edit' /><br/>
		<label for="fax">Télécopie</label><input type="text" name="fax" id="fax" value="" data-action='edit' /><br/>
		<label for="mail">Courriel</label><input type="text" name="mail" id="mail" value="xxxx@wanadoo.fr" data-action='edit' class="mail" /><br/>
		<label for="url">Site Web</label><input type="text" name="url" id="url" value="" data-action='edit' class="url" /><br/>
	</div>
</form>
 
<script src="http://sirep.proginet.local/common/js/functions.js"></script>
 
<!-- Pour info: Formulaire servant à la gestion et à la navigation entre les clients. Sans intérêt pour le problème posé -->
<form method="post" action="http://sirep.proginet.local/frontend/controllers/footFormHandle.php" class="footForm">
	<div>
		<input type="submit" name="new" value="Ajouter" title="Enregistrement d'un nouveau client" formaction="" /><br/>
		<input type="submit" name="del" value="Supprimer" title="Suppresion totale de ce client" formaction="" /><br/>
		<input type="submit" name="print" value="Imprimer" title="Impression de la fiche complète du client" formaction="" /><br/>
	</div>
	<div>
		<input type="submit" name="navig" value="<<" /> <input type="submit" name="navig" value="<" />
		<input type="submit" name="navig" value=">" /> <input type="submit" name="navig" value=">>" /><br/>
		<input type="text" value="1/51" style="width:128px; text-align:center;" readonly />
	</div>
</form>
 
<script>
        const editFile = "http://sirep.proginet.local/frontend/controllers/editField.php";
</script>
<script src="http://sirep.proginet.local/frontend/js/cardFrame.js"></script>
<script src="http://sirep.proginet.local/frontend/js/editField.js"></script>
 
 
			</article>
		</section>
 
	</body>
</html>

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
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Titre</title>
 
		<meta http-equiv="Expires" content="-1" />
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
 
		<base href="http://sirep.proginet.local/" />
 
		<link rel='stylesheet' media='all' type='text/css' href='http://sirep.proginet.local/common/css/structure.css' /><link rel='stylesheet' media='screen' type='text/css' href='http://sirep.proginet.local/common/css/style0.css' />	
	</head>
 
	<body>
 
		<section>
			<div id="left">
 
<nav class="mainNav">
	<ul>
		<li><a href='http://sirep.proginet.local/frontend/index.php' >Accueil entreprise</a></li>
		<li><a href='http://sirep.proginet.local/frontend/controllers/cardFrame.php' >Fiche client</a></li>
		<li><a href='http://sirep.proginet.local/frontend/controllers/displList.php' >Liste</a></li>
		<li><a href='http://sirep.proginet.local/index.php' >Déconnexion</a></li>
	</ul>
</nav>
 
			</div>
			<article id="right">
 
<h3 class="blue">Un client</h3>
 
<div class="menuH">
	<ul>
		<li class='currentTab'><a href='http://sirep.proginet.local/frontend/controllers/cardFrame.php?tab=0'>Adresse</a></li>
		<li><a href='http://sirep.proginet.local/frontend/controllers/cardFrame.php?tab=1'>Interlocuteurs</a></li>
		<li><a href='http://sirep.proginet.local/frontend/controllers/cardFrame.php?tab=2'>Commercial</a></li>
		<li><a href='http://sirep.proginet.local/frontend/controllers/cardFrame.php?tab=3'>Actions</a></li>
		<li><a href='http://sirep.proginet.local/frontend/controllers/cardFrame.php?tab=7'>Divers</a></li>
	</ul>
</div>
 
 
<div>
 
<!-- Formulaires à traiter (ici 3) -->
<form method="post" action="" class="cardForm">
	<div>
		<input type="hidden" name="id" value="3600" />
		<label>Civilité</label>
			<select name="gender" id="gender" data-action='edit'>
				<option value=""></option>
				<option value="F">Madame</option>
				<option value="M" selected="selected">Monsieur</option>
			</select><br/>
		<label>Titre</label><input type="text" name="title" value="" data-action='edit' /><br/>
		<label>Prénom</label><input type="text" name="firstname" value="Martial" data-action='edit' /><br/>
		<label>Nom</label><input type="text" name="lastname" value="Nom 1" data-action='edit' /><br/>
	</div>
	<div>
		<label>Fonction</label><input type="text" name="role" value="Direction" data-action='edit' /><br/>
		<label>Fonction codifiée</label>
			<select name="standard_role" id="standard_role" data-action='edit'>
				<option></option>
				<option value="8">Assistante</option>
				<option value="9">Chef d'agence</option>
				<option value="6" selected="selected">DG</option>
				<option value="7">Dir. commerciale</option>
				<option value="5">RH</option>
			</select><sup class="note"> (1)</sup><br/>
		<label>Service</label><input type="text" name="department" value="" data-action='edit' /><br/>
	</div>
	<div>
		<label>Tél. direct</label><input type="text" name="phone" value="" data-action='edit' /><br/>
		<label>Fax direct</label><input type="text" name="fax" value="" data-action='edit' /><br/>
		<label>Courriel</label><input type="text" name="mail" value="xxx@yyy.com" data-action='edit' class="mail" /><br/>
		<label>Tél. portable</label><input type="text" name="cell" value="" data-action='edit' /><br/>
	</div>
	<div>
		<label for="checkboxes[1]">Imprimable</label><input type="checkbox" name="checkboxes[1]" id="checkbox_1" checked data-action='edit' /><sup class="note">(2)</sup><br/>
		<label for="checkboxes[2]">Imprimer le service</label><input type="checkbox" name="checkboxes[2]" id="checkbox_2" data-action='edit' /><sup class="note">(3)</sup><br/>
		<label for="checkboxes[3]">Refus publipostage</label><input type="checkbox" name="checkboxes[3]" id="checkbox_3" data-action='edit' /><sup class="note">(4)</sup><br/>
		<label for="checkboxes[4]">Sélectionner</label><input type="checkbox" name="checkboxes[4]" id="checkbox_4" data-action='edit' /><sup class="note">(5)</sup><br/>
	</div>
</form>
 
<form method="post" action="" class="cardForm">
	<div>
		<input type="hidden" name="id" value="3589" />
		<label>Civilité</label>
			<select name="gender" id="gender" data-action='edit'>
				<option value=""></option>
				<option value="F">Madame</option>
				<option value="M" selected="selected">Monsieur</option>
			</select><br/>
		<label>Titre</label><input type="text" name="title" value="" data-action='edit' /><br/>
		<label>Prénom</label><input type="text" name="firstname" value="Bruno" data-action='edit' /><br/>
		<label>Nom</label><input type="text" name="lastname" value="Nom 2" data-action='edit' /><br/>
	</div>
	<div>
		<label>Fonction</label><input type="text" name="role" value="Adjoint de direction" data-action='edit' /><br/>
		<label>Fonction codifiée</label>
			<select name="standard_role" id="standard_role" data-action='edit'>
				<option></option>
				<option value="8">Assistante</option>
				<option value="9">Chef d'agence</option>
				<option value="6">DG</option>
				<option value="7" selected="selected">Dir. commerciale</option>
				<option value="5">RH</option>
			</select><sup class="note"> (1)</sup><br/>
		<label>Service</label><input type="text" name="department" value="" data-action='edit' /><br/>
	</div>
	<div>
		<label>Tél. direct</label><input type="text" name="phone" value="" data-action='edit' /><br/>
		<label>Fax direct</label><input type="text" name="fax" value="" data-action='edit' /><br/>
		<label>Courriel</label><input type="text" name="mail" value="xxx@yyy.com" data-action='edit' class="mail" /><br/>
		<label>Tél. portable</label><input type="text" name="cell" value="" data-action='edit' /><br/>
	</div>
	<div>
		<label for="checkboxes[1]">Imprimable</label><input type="checkbox" name="checkboxes[1]" id="checkbox_1" checked data-action='edit' /><sup class="note">(2)</sup><br/>
		<label for="checkboxes[2]">Imprimer le service</label><input type="checkbox" name="checkboxes[2]" id="checkbox_2" data-action='edit' /><sup class="note">(3)</sup><br/>
		<label for="checkboxes[3]">Refus publipostage</label><input type="checkbox" name="checkboxes[3]" id="checkbox_3" data-action='edit' /><sup class="note">(4)</sup><br/>
		<label for="checkboxes[4]">Sélectionner</label><input type="checkbox" name="checkboxes[4]" id="checkbox_4" data-action='edit' /><sup class="note">(5)</sup><br/>
	</div>
</form>
 
<form method="post" action="" class="cardForm">
	<div>
		<input type="hidden" name="id" value="3623" />
		<label>Civilité</label>
			<select name="gender" id="gender" data-action='edit'>
				<option value=""></option>
				<option value="F" selected="selected">Madame</option>
				<option value="M">Monsieur</option>
			</select><br/>
		<label>Titre</label><input type="text" name="title" value="" data-action='edit' /><br/>
		<label>Prénom</label><input type="text" name="firstname" value="Sara" data-action='edit' /><br/>
		<label>Nom</label><input type="text" name="lastname" value="Nom 3" data-action='edit' /><br/>
	</div>
	<div>
		<label>Fonction</label><input type="text" name="role" value="" data-action='edit' /><br/>
		<label>Fonction codifiée</label>
			<select name="standard_role" id="standard_role" data-action='edit'>
				<option></option>
				<option value="8" selected="selected">Assistante</option>
				<option value="9">Chef d'agence</option>
				<option value="6">DG</option>
				<option value="7">Dir. commerciale</option>
				<option value="5">RH</option>
			</select><sup class="note"> (1)</sup><br/>
		<label>Service</label><input type="text" name="department" value="" data-action='edit' /><br/>
	</div>
	<div>
		<label>Tél. direct</label><input type="text" name="phone" value="" data-action='edit' /><br/>
		<label>Fax direct</label><input type="text" name="fax" value="" data-action='edit' /><br/>
		<label>Courriel</label><input type="text" name="mail" value="xxx@yyy.com" data-action='edit' class="mail" /><br/>
		<label>Tél. portable</label><input type="text" name="cell" value="" data-action='edit' /><br/>
	</div>
	<div>
		<label for="checkboxes[1]">Imprimable</label><input type="checkbox" name="checkboxes[1]" id="checkbox_1" checked data-action='edit' /><sup class="note">(2)</sup><br/>
		<label for="checkboxes[2]">Imprimer le service</label><input type="checkbox" name="checkboxes[2]" id="checkbox_2" data-action='edit' /><sup class="note">(3)</sup><br/>
		<label for="checkboxes[3]">Refus publipostage</label><input type="checkbox" name="checkboxes[3]" id="checkbox_3" data-action='edit' /><sup class="note">(4)</sup><br/>
		<label for="checkboxes[4]">Sélectionner</label><input type="checkbox" name="checkboxes[4]" id="checkbox_4" data-action='edit' /><sup class="note">(5)</sup><br/>
	</div>
</form>
 
</div>
 
 
<!-- Pour info: Formulaire servant à la gestion et à la navigation entre les clients. Sans intérêt pour le problème posé -->
<form method="post" action="http://sirep.proginet.local/frontend/controllers/footFormHandle.php" class="footForm">
	<div>
		<input type="submit" name="new" value="Ajouter" title="Enregistrement d'un nouveau client" formaction="" /><br/>
		<input type="submit" name="del" value="Supprimer" title="Suppresion totale de ce client" formaction="" /><br/>
		<input type="submit" name="print" value="Imprimer" title="Impression de la fiche complète du client" formaction="" /><br/>
	</div>
	<div>
		<input type="submit" name="navig" value="<<" /> <input type="submit" name="navig" value="<" />
		<input type="submit" name="navig" value=">" /> <input type="submit" name="navig" value=">>" /><br/>
		<input type="text" value="1/51" style="width:128px; text-align:center;" readonly />
	</div>
</form>
 
<script>
        const editFile = "http://sirep.proginet.local/frontend/controllers/editField.php";
</script>
<script src="http://sirep.proginet.local/frontend/js/cardFrame.js"></script>
<script src="http://sirep.proginet.local/frontend/js/editField.js"></script>
 
 
			</article>
		</section>
 
		<footer class="footer">
	<br/>&nbsp;
	* N° de semaine selon ISO 8601	<hr/>
	<p class="center"><a href="">Conditions générales d'utilisation (CGU)</a></p>
</footer>
 
		<script>
                        var clockData = {"weekDays":["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"],"shortDays":["D","L","Ma","Me","J","V","S"],"monthes":["Janvier","F\u00e9vrier","Mars","Avril","Mai","Juin","Juillet","Ao\u00fbt","Septembre","Octobre","Novembre","D\u00e9cembre"],"week":"Semaine","language":"fr"};
                </script>
		<script src="common/js/clock.js"></script>
 
	</body>
</html>

05/10/2019, 16h04
moimp

Faute de réponses, je me suis orienté vers une solution PHP sans Ajax. Dois-je considérer que mon problème est résolu pour autant?

Bonjour,

1- tu nous as donné des codes, c'est bien.
Mais comme c'est une URL locale (http://sirep.proginet.local/)... on n'a pas accès aux fichiers CSS/JS, et donc, on ne peut toujours pas tester. :calim2:
Si tu veux vraiment qu'on puisse t'aider efficacement, il faut faire un effort, et nous fournir le code nécessaire et suffisant (pas juste une copie du code source et "débrouillez-vous").

2- J'ai quand même regardé le code JS de ton 1er message (bien qu'il n'y ait AUCUN commentaire ni explication... :weird:) :
Code:

1 2 3 4 5 6 const inclForms = document.querySelectorAll('.cardForm') , editableFields= document.querySelectorAll("[data-action='edit']") ; ... for (let i=0, max=editableFields.length; i<max; i++) {
Donc là, editableFields contient l'ENSEMBLE des champs (input,...) de TOUS les formulaires, sans distinction !

3- Moi, mon 1er réflexe serait de boucler D'ABORD sur les formulaires, donc sur inclForms :
Code:

1 2 3 4 5 6 7 8 9 10 11 // Tous les formulaires const inclForms = document.querySelectorAll('.cardForm'); // On parcourt tous les formulaires for (let f=0, max_form=inclForms.length; f<max_form; f++) { let editableFields = inclForms[f].querySelectorAll("[data-action='edit']"); // uniquement les champs de CE formulaire dont data-action='edit' // On parcourt tous les champs de CE formulaire for (let i=0, max=editableFields.length; i<max; i++) { ...
Ici, editableFields ne contient QUE les champs du formulaire en cours (défini dans la boucle précédente)

4- Identification du formulaire :

Code:

<input type="hidden" name="id" value="3589" />

Si, comme ça semble être le cas, cet id est UNIQUE pour CHACUN des formulaires, on doit pouvoir s'en servir pour IDENTIFIER le formulaire en question.
ATTENTION ! : Il faut AUSSI le récupérer !
Ce qui donne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // Tous les formulaires const inclForms = document.querySelectorAll('.cardForm'); // On parcourt tous les formulaires for (let f=0, max_form=inclForms.length; f<max_form; f++) { // identifiant du formulaire (input name="id") let form_id = inclForms[f].querySelector("[name='id']").value; console.log( 'form_id : '+ form_id ); // editableFields contient ici uniquement les champs de CE formulaire let editableFields = inclForms[f].querySelectorAll("[data-action='edit']"); // console.log( editableFields ); // NodeList // On parcourt tous les champs de CE formulaire for (let i=0, max=editableFields.length; i<max; i++) { console.log( editableFields[i].name +' : '+ editableFields[i].value ); } }

Entre temps, j'avais retravaillé sur le script suivant. Ce script fonctionne sur les éléments select, input de type text ou checkbox, textarea. Il n'a pas été finalisé pour les boutons radio. Je l'ai commenté. ATTENTION: Il est prévu pour ne modifier qu'un champ à la fois et l'enregistrer au fur et à mesure en base de données.
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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 // Dans son état actuel, ce script fonctionne sans Ajax. "use strict"; (function() { const editableFields= document.querySelectorAll("[data-action='edit']") , checkboxes = document.querySelectorAll(".cardForm input[type='checkbox']") // Ces éléments n'ont pas l'attribut data-action='edit' ; // Constant 'editFile' is sent from cardFrameView.php // La constante inclForms n'est plus utilisée // Traitement commun avec récupération du formulaire parent (propriété form du champ) function send(objField) { const objForm = objField.form; objForm.action = editFile+'?field='+objField.name; objForm.submit(); } // Boucle sur l'ensemble des champs modifiables de tous les formulaires // Cas des éléments select, input, textarea for (let i=0, max=editableFields.length; i<max; i++) { (function(field) { // Cas général field.addEventListener('blur', function() { send(this); }); // Alternative pour les champs autres que les zones de texte field.addEventListener('keydown', function(e) { if ( e.keyCode == 13 && this.nodeName.toLowerCase != 'textarea' ) send(this); }); })(editableFields[i]); } // Cas des cases à cocher non affectées de [data-action='edit'] for (let i=0, max=checkboxes.length; i<max; i++) { (function(field) { field.addEventListener('change', function() { send(this); }); })(checkboxes[i]); } }) ();
Réponses à tes questions:
1-Je vais voir pour mettre en ligne, mais j'ai plusieurs mises au point à faire avant.

2 et 3 - J'ai utilisé la propriété form du champ actif pour éviter d'avoir à boucler sur les formulaires. Vaut-il mieux boucler comme tu le préconises?

4-L'id est celui de la ligne de la base de données correspondant au formulaire en cours. Il est donc différent pour chacun des formulaires.

07/10/2019, 19h12
moimp

J'ai testé ta solution. Elle est plus longue que la mienne et ne fonctionne ni mieux ni plus mal.
Les deux solutions fonctionnent dans le cas général mais ne fonctionnent pas avec un datepicker (voir mon autre question).
07/10/2019, 21h41
Invité

Bonjour,

c'est pourtant toi qui cherchais à "Retrouver le formulaire dont l'utilisateur a modifié un champ", non ?

As-tu trouvé une solution ?
08/10/2019, 11h03
moimp
Oui, c'est ce que j'essayais de t'expliquer avec mon exemple de code. J'ai trouvé ici la réponse ici avec la propriété form.
Il me reste encore deux problèmes:
- Celui-ci
- Le remplacement de ma solution par une solution avec Ajax. Pour ce dernier point, je me demande si c'est mieux et nécessaire.