Ajout intempestif d'un champ de formulaire
Bonjour,
J'utilise Ajax avec FormData. Pour une raison que je ne m'explique pas, dans le fichier de traitement (défini par la constante editFile), la variable $_POST comprend un champ supplémentaire qui n'est pas dans le formulaire (dernière paire clef/valeur):
Code:
1
2
3
4
5
6
7
8
9
10
11
| array (
0 =>
array (
'id' => '10',
'text' => 'du texte',
'id_representative' => '15',
'action_date' => '10/09/2016',
'action_type' => '3',
'-----------------------------7e33b33910594--' => '',
),
) |
D'où provient cette paire clef/valeur? Comment l'éviter? Je peux bien sûr la supprimer mais ce n'est pas très élégant.
Voici le fichier source avec deux formulaires identiques (la différentiation se fait par le champ caché nommé 'id'):
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<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">
<!-- menu vertical -->
</div>
<article id="right">
<div>
<form method="post" action="" class="cardForm">
<div>
<input type="hidden" name="id" value="10" />
<label>Résumé entretien</label><br/><textarea name="text" cols="40" rows="6" data-action='edit'>... du texte ...</textarea>
</div>
<div>
<label>Représentant/auteur</label><select name="id_representative" data-action='edit'>
<option></option>
<option value="6">Prénom1 Nom1</option>
<option value="15" selected="selected">Prénom2 Nom2</option>
</select><br/>
<label>Date entretien</label><input type="text" name="action_date" id="action_date" value="10/09/2016" />
<div id="actionCalendar" class='calendarMain calendarInLine'></div><br/>
<fieldset><legend>Nature du contact</legend>
<div>
<input type="radio" name="action_type" id="action_typ1" value="1" /><label for="action_typ1">Téléphone</label>
<input type="radio" name="action_type" id="action_typ2" value="2" /><label for="action_typ2">@</label>
</div>
<div>
<input type="radio" name="action_type" id="action_typ3" value="3" checked /><label for="action_typ3">Visite</label>
<input type="radio" name="action_type" id="action_typ4" value="4" /><label for="action_typ4">Courrier postal</label>
</div>
</fieldset>
</div>
</form>
<form method="post" action="" class="cardForm">
<div>
<input type="hidden" name="id" value="38" />
<label>Résumé entretien</label><br/><textarea name="text" cols="40" rows="6" data-action='edit'>Encore du texte</textarea>
</div>
<div>
<label>Représentant/auteur</label><select name="id_representative" data-action='edit'>
<option></option>
<option value="6">Prénom1 Nom1</option>
<option value="15" selected="selected">Prénom2 Nom2</option></select><br/>
<label>Date entretien</label><input type="text" name="action_date" id="action_date" value="12/10/2016" />
<div id="actionCalendar" class='calendarMain calendarInLine'></div><br/>
<!--
<label>Date entretien</label><input type="text" name="action_date" value="12/10/2016" data-action='edit' placeholder='04/11/2019' />
-->
<fieldset><legend>Nature du contact</legend>
<div>
<input type="radio" name="action_type" id="action_typ1" value="1" /><label for="action_typ1">Téléphone</label>
<input type="radio" name="action_type" id="action_typ2" value="2" /><label for="action_typ2">@</label>
</div>
<div>
<input type="radio" name="action_type" id="action_typ3" value="3" checked /><label for="action_typ3">Visite</label>
<input type="radio" name="action_type" id="action_typ4" value="4" /><label for="action_typ4">Courrier postal</label>
</div>
</fieldset>
</div>
</form>
</div>
<form method="post" action="http://sirep.proginet.local/frontend/controllers/footFormHandle.php" class="footForm">
</form>
<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>const editFile = "http://sirep.proginet.local/frontend/controllers/mainFormHandle.php";</script>
<script src="http://sirep.proginet.local/common/js/jsSimpleDatePickr.2.1.js"></script>
<script src="http://sirep.proginet.local/frontend/js/cardMainForm.js"></script>
</article>
</section>
</body>
</html> |
et le JavaScript:
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
| "use strict";
(function(){
const editables = document.querySelectorAll(".cardForm [data-action='edit']")
,dates = document.querySelectorAll(".cardForm [name*='_date'")
,toCheck = document.querySelectorAll(".cardForm [type='checkbox'], .cardForm [type='radio']")
,myCalendar = new jsSimpleDatePickr()
,editMax = editables.length
,datesMax = dates.length
,chkMax = toCheck.length
;
// Constant 'editFile' is sent from cardFrameView.php
var params
,calendarId
,objField
;
function send()
{
const objForm = objField.form
,request = new XMLHttpRequest()
;
request.open('POST', editFile, false);
request.send(new FormData(objForm));
}
for (let i=0; i<editMax; i++)
{
(function(field)
{
field.addEventListener('blur', function()
{
objField = this;
send();
});
field.addEventListener('keydown', function(e)
{
if ( e.keyCode == 13 && this.nodeName.toLowerCase != 'textarea' )
//send(this);
send();
});
})(editables[i]);
}
}) (); |
