Discussion :

[moimp]

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

[danielhagnoul]

Un ID doit être unique dans la page web. Si vous avez plusieurs formulaires identiques, ils ne peuvent pas contenir des ID.

On récupère la valeur de l'attribut data-* avec dataset

Exemple :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
<form class="cardForm" data-tab="1">
    <label>Prénom</label>
    <input type="text" name="firstname">
</form>
<form class="cardForm" data-tab="2">
    <label>Prénom</label>
    <input type="text" name="firstname">
</form>
<form class="cardForm" data-tab="3">
    <label>Prénom</label>
    <input type="text" name="firstname">
</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
14
15
16
17
18
19
20
21
22
23
24
25
26
27
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    const forms = Array.from(document.querySelectorAll('form.cardForm'));
 
    for(const form of forms){
        form.addEventListener('change', ev => {
            let prenom = ev.target.value;
            let idForm = form.dataset.tab;
 
            console.log(`data-tab = ${idForm}, prénom = ${prenom}`);
        }, {
            capture: false,
            passive: true,
            once: false
        });
    }
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});

[moimp]

Bonjour,
1- id
Ne pas confondre l'attribut name="id" qui correspond à l'id de la table de la base de données à mettre à jour et l'attribut id qui n'a effectivement pas lieu d'être ici. On est bien d'accord.

2- Le code JavaScript donné me pose plusieurs problèmes:
Si mon analyse est juste, il ne répond pas à mon besoin: A partir du champ cliqué, je dois retrouvé le formulaire auquel ce champ appartient pour mettre à jour la ligne de base de données dont l'id correspond au champ id (name="id") du formulaire concerné.
Array.from n'est pas reconnu par IE.
for/of n'est pas non plus reconnu par IE.
data-tab correspond à un numéro de page et non pas au numéro de formulaire dans cette page. Pas de problème pour le remplacer soit par un attribut name du formulaire, soit par le champ caché nr ou par un data-nr par exemple.

Je ne sais pas si mes explications sont plus claires.

[moimp]

Bonjour,
J'ai trouvé, il suffit d'utiliser parentNode

[NoSmoking]

Bonjour,

il suffit d'utiliser parentNode

Tu mets en place la « plus mauvaise » des méthodes, qu'adviendra-t-il de ton code si tu modifies ta structure HTML pour, par exemple, en améliorer le rendu ?

Il existe une propriété liée à tous les contrôles d'un élément <form>, la propriété form.

On peut donc écrire tout simplement :

Code :

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

1
2
3
4
5
6
7
8
field.addEventListener('blur', function() {
    const oForm = this.form;
    this.select();
    //inclForm.action = editFile+'?field='+this.name;
    //inclForm.submit();
    oForm.action = editFile + '?field=' + this.name;
    oForm.submit();
});

[moimp]

Bonjour et merci.
J'ignorais l'existence de cette propriété. Pour m'affranchir des modifications HTML, j'avais créé une boucle do/while qui se terminait lorsque nodeName.toLowerCase == 'form'. Très lourd

Par contre, il me reste un problème, selon l'endroit où je clique, j'ai ou non une instabilité.
Par exemple dans l'image ci-dessous, si après avoir modifié un champ, je clique sur un autre champ du formulaire, le favicon du navigateur tourne sans fin en actualisation. Si je clique sur un autre onglet ou si je sélectionne une autre application le fonctionnement est correct (= la valeur est correctement enregistrée en base de données).
Je joins mon fichier PHP de traitement, en cours de développement. Je ne sais pas si c'est d'une grande utilité?

Code PHP :

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
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
<?php
 
if ( empty(session_id()) ) session_start();
 
if ( !defined('DIR_ROOT') )
{
	define('DIR_ROOT', $_COOKIE['dir_root']);
}
require_once(DIR_ROOT.'defines.php');
require_once(DIR_ROOT.COMMON_HEAD_PHP);
require_once(DIR_ROOT.MODEL);
 
if ( !isset($_SESSION['user']['id_subscrib'], $_SESSION['user']['id_user']) )
{
	header('Location: '.URL_SITE.INDEX_PAGE);
	exit;
}
 
use moimp\ErrorHandler\ErrorHandler;
use moimp\InputsCtl\InputsCtl;
 
$objErrors	= new ErrorHandler('errors', 'error0');
$objControls= new InputsCtl();
// For easier writing in the restscript
$subscribId	= $_SESSION['user']['id_subscrib'];
$userId		= $_SESSION['user']['id_user'];
$tab		= (int) $_SESSION['displCard']['tab'];
$field		= $_GET['field'];
$post		= $_POST;
 
// Select the table to be edited, check values
switch ($tab) {
	case 0:
		$table	= 'dat_customers';
		switch ($field)
		{
			case 'phone':
			case 'fax':
				//$post[$field] = trim(str_replace([' ','/','*','.','(',')'], '', $post[$field]));
				$f = "ctl_$field";
				if ( $post[$field] and ! $objControls->$f )
					$objErrors->addMessage(FIELD_ERR['dial']);
				$post[$field] = setDefaultValue($post[$field], NULL);
			break;
			case 'zip':
				if ( $post[$field] and ! $objControls->ctl_postcode($post[$field], $post['country']) )
					$objErrors->addMessage(FIELD_ERR['zip']);
				$post[$field] = setDefaultValue($post[$field], NULL);
			break;
			case 'mail':
				if ( $post[$field] and ! $objControls->ctl_email($post[$field]) )
					$objErrors->addMessage(FIELD_ERR['email']);
			break;
			case 'url':
				if ( $post[$field] and ! $objControls->ctl_url($post[$field]) )
					$objErrors->addMessage(FIELD_ERR['url']);
			break;
		}
	break;
	case 1:
		$table	= 'dat_staff';
		// ... code à développer ...
	break;
	case 2:
		$table = '';
	break;
	// Suite à développer
}
 
if ( empty($table) )
{
	header('Location: '.URL_SITE."frontend/controllers/cardFrame.php");
	exit;
}
 
$defValue = getDefaultValue($table, $field);
 
$data['id']		= $post['id'];
$data['value']	= ( empty($defValue) ) ? '': setDefaultValue($post[$field], $defValue->defaultValue);
saveSingleData($table, $field, $data);
 
if ( !empty($objErrors) ) { $_SESSION['errors'] = (string) $objErrors; }
header('Location: '.URL_SITE."frontend/controllers/cardFrame.php");

J'ai pensé utiliser Ajax mais je n'ai jamais réussi à le faire fonctionner.