Bonjour,
J'ai une page qui peut contenir un ou plusieurs formulaires identiques. Le script JS ci-dessous fonctionne bien, lorsque je n'ai qu'un seul formulaire.
Dans le cas de formulaires multiples, j'ai pensé à deux solutions pour distinguer les formulaires:
  • Soit je leur affecte un nom name="1" à name="n".
  • Soit j'ajoute un champ caché qui contient le numéro du formulaire.


Mon problème est le suivant: Lorsque un utilisateur modifie un champ, je veux retrouver à quel formulaire appartient ce champ pour pouvoir modifier les bonnes données dans la base.

Code d'un formulaire (dans ce code le formulaire est identifié de 1 à n par <?= setPostValue('nr'); ?>):
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
<?php ob_start(); ?>
 
<form method="post" action="" class="cardForm" data-tab="1" data-form="<?= setPostValue('nr'); ?>">
	<div>
		<input type="hidden" name="nr" value="<?= setPostValue('nr'); ?>" />
		<input type="hidden" name="id" value="<?= setPostValue('id'); ?>" />
		<label for="gender">Sexe</label><?= $lstGender; ?><br/>
		<label for="title">Titre</label><input type="text" name="title" id="title" value="<?= setPostValue('title'); ?>" data-action='edit' /><br/>
		<label for="firstname">Prénom</label><input type="text" name="firstname" id="firstname" value="<?= setPostValue('firstname'); ?>" data-action='edit' /><br/>
		<label for="lastname">Nom</label><input type="text" name="lastname" id="lastname" value="<?= setPostValue('lastname'); ?>" data-action='edit' /><br/>
	</div>
	<div>
		<label for="phone">Téléphone</label><input type="text" name="phone" id="phone" value="<?= setPostValue('phone'); ?>" data-action='edit' /><br/>
		<label for="fax">Télécopie</label><input type="text" name="fax" id="fax" value="<?= setPostValue('fax'); ?>" data-action='edit' /><br/>
		<label for="mail">Courriel</label><input type="text" name="mail" id="mail" value="<?= setPostValue('mail'); ?>" data-action='edit' class="mail" /><br/>
		<label for="cell">Portable</label><input type="text" name="cell" id="cell" value="<?= setPostValue('cell'); ?>" data-action='edit' /><br/>
	</div>
</form>
 
<?php $arrInsertForms[] = ob_get_clean(); ?>
Script qui fonctionne avec un seul formulaire:
Code js : 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
31
32
33
"use strict";
 
(function()
{
 
	const	inclForm	= document.querySelector('.cardForm')		// Cas d'un seul formulaire
		,	inclForms	= document.querySelectorAll('.cardForm')	// En prévision du cas de plusieurs formulaires
		,	editableFields= document.querySelectorAll("[data-action='edit']")
	;
	// A ces constantes s'ajoute la constante 'editFile' is sent from php
 
	for (let i=0, max=editableFields.length; i<max; i++)
	{
		(function (field)
		{
			field.addEventListener('blur', function()
			{
				this.select();
				inclForm.action = editFile+'?field='+this.name;
				inclForm.submit();
			});
			field.addEventListener('keydown', function(e)
			{
				if ( e.keyCode == 13 && this.type != 'textarea' )
				{
					inclForm.action = editFile+'?field='+this.name;
					inclForm.submit();
				}
			});
		})(editableFields[i]);
	}
 
}) ();