Mise à jour de champs de formulaire

**moimp** · 05/10/2019, 16h40

Bonjour,
J'utilise le code suivant pour mettre à jour des champs de formulaire. Ce code fonctionne avec les champs input de type text ou checkbox, les zones de texte, les listes d'options. Je ne l'ai pas encore testé pour les boutons radio.
J'ai par contre un problème avec l'utilisation de jsSimpleDatePickr.
Dans ce cas, lors de la soumission du formulaire, c'est l'ancienne valeur du champ (lignes 33 et 22) et non la nouvelle sélectionnée sur le datepicker qui est transmise alors que le champ contient bien la nouvelle valeur. Je ne vois pas pourquoi.

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
46
47
48
49
50
51
52
53
54
55
"use strict";
 
(function()
{
 
	const	inclForms	= document.querySelectorAll('.cardForm')
		,	editableFields= document.querySelectorAll("[data-action='edit']")
		,	checkboxes	= document.querySelectorAll(".cardForm input[type='checkbox']")
	;
	// Constant 'editFile' is sent from cardFrameView.php
	console.log(inclForms);
	console.log(editableFields);
	console.log(checkboxes);
 
	function send(objField)
	{
		const objForm = objField.form;
		objForm.action = editFile+'?field='+objField.name;
 
		console.log(objForm);
		console.log(objField);
		console.log(objField.value);
 
		//objForm.submit();
	}
 
	for (let i=0, max=editableFields.length; i<max; i++)
	{
		(function(field)
		{
			field.addEventListener('blur', function()
			{
				console.log(this.value);
				send(this);
			});
			field.addEventListener('keydown', function(e)
			{
				if ( e.keyCode == 13 && this.nodeName.toLowerCase != 'textarea' )
					send(this);
			});
		})(editableFields[i]);
	}
 
	for (let i=0, max=checkboxes.length; i<max; i++)
	{
		(function(field)
		{
			field.addEventListener('change', function()
			{
				send(this);
			});
		})(checkboxes[i]);
	}
 
}) ();

Exemple de formulaire (simplifié):

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
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
<!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' />
		<link rel='stylesheet' media='screen' type='text/css' href='http://sirep.proginet.local/common/css/default_blue.css' />	
	</head>
 
	<body>
 
		<section>
			<div id="left">
<nav class="mainNav">
	<ul>
		<!-- Menu vertical -->
	</ul>
</nav>
			</div>
 
			<article id="right">
 
<form method="post" action="" class="cardForm">
	<div>
		<input type="hidden" name="id" value="38" />
		<p>
			<label>Représentant</label>
			<select name="id_representative" data-action='edit'>
				<option></option><option value="6">xxxx</option>
				<option value="15" selected="selected">yyyy</option>
			</select><br/>
			<label>Info:</label><br/><textarea name="info" cols="40" rows="6" data-action='edit'>Test nouveau client</textarea><br/>
		</p>
		<fieldset><legend>Origine du contact</legend>
			<label>Source d'info</label><input type="text" name="source_name" value="Déjà connu" data-action='edit' /><br/>
			<label>Date info</label><input type="text" name="source_date" id="source_date" value="31/10/2006" class="date" data-action='edit' /><br/>
			<div id="sourceCalendar" class='calendarMain calendarInLine'></div>
		</fieldset>
	</div>
	<fieldset><legend>Suivi commercial</legend>
		<label for="request_date">Date de consultation</label><br/><input type="text" name="request_date" id="request_date" value="" class="date" /><br/>
		<div id="requestCalendar" class='calendarMain calendarInLine'></div>
 
		<label for="offer_date">Date de l'offre</label><br/><input type="text" name="offer_date" id="offer_date" value="" class="date" /><br/>
		<div id="offerCalendar" class='calendarMain calendarInLine'></div>
 
		<label for="call_date">Date de relance</label><br/><input type="text" name="call_date" id="call_date" value="" class="date" /><br/>
		<div id="callCalendar" class='calendarMain calendarInLine'></div>
		<p>
		<input type="checkbox" name="is_custom" id="is_custom" value="" /><label for="is_custom">Déjà client</label><br/>
		<input type="checkbox" name="is_to_meet" id="is_to_meet" value="" /><label for="is_to_meet">A contacter</label><br/>
		</p>
	</fieldset>
</form>
 
 
<!-- The next three scripts are used for the datepicker -->
<script>var fromPHPtoJS = {"shortDays":["D","L","Ma","Me","J","V","S"],"monthes":["Janvier","F\u00e9vrier","Mars","Avril","Mai","Juin","Juillet","Ao\u00fbt","Septembre","Octobre","Novembre","D\u00e9cembre"]};</script>
<script src="http://sirep.proginet.local/common/js/jsSimpleDatePickr.2.1.js"></script>
<script src="http://sirep.proginet.local/frontend/js/followUp.js"></script>
 
<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>

**mathieu** · 07/10/2019, 10h03

c'est peut-être un soucis dans "jsSimpleDatePickr" qui a l'air d'avoir plusieurs années donc il n'est peut-être plus à jour.

actuellement j'utilise le calendrier suivant dans mes projets. il est sous licence libre et a beaucoup d'options de personnalisation :
https://jqueryui.com/datepicker/

**moimp** · 07/10/2019, 16h18

Bonjour,
Merci pour ta réponse. Mais avant de changer un outil que j'utilise un peu partout, j'aimerais être sûr que ce n'est pas seulement un mauvais choix de type d’événement. En effet, j'ai remarqué que l'événement se déclenche lorsque je clique sur le calendrier. J'ai testé les événements 'input' et change' mais rien ne se passe. Par ailleurs je suis réticent à l'utilisation de jQuery et tous les changements de versions qu'il implique. Enfin, s'il le faut je changerai.

Mise à jour de champs de formulaire

JavaScript

Vue hybride

Discussions similaires

Partager

Partager