Mise à jour de champs de formulaire
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:
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:
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> |
