Discussion :

[moimp]

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 :

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
"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.

Remarque: Certains onglets peuvent contenir plusieurs formulaires identiques par exemple pour les interlocuteurs ou les actions.