Retrouver le formulaire dont l'utilisateur a modifié un champ
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:
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:
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]);
}
}) (); |
