Gestion d'événements: Un événement occulté
Bonjour,
J'ai un formulaire dont j'enregistre au fur et à mesure chaque champ modifié. Pour cela j'ai un événement blur sur les champs input de types text ainsi que sur les listes d'options et un événement click sur les cases à cocher et les boutons radio.
Si je passe d'un champ de la première catégorie (text ou liste d'options) à un champ à cocher (checkbox ou radio), seul l'événement blur se produit.
Comment faire pour que les deux événements se produisent successivement?
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 editables = document.querySelectorAll(".cardForm [data-action='edit']")
,toCheck = document.querySelectorAll(".cardForm [type='checkbox'], .cardForm [type='radio']")
,editMax = editables.length
,chkMax = toCheck.length
;
// Constant 'editFile' is sent from cardFrameView.php
var params
,calendarId
;
console.log(editables);
console.log(toCheck);
function send(objField)
{
const objForm = objField.form;
objForm.action = editFile+'?field='+objField.name;
objForm.submit();
}
for (let i=0; i<editMax; i++)
{
(function(field)
{
field.addEventListener('blur', function()
{
alert('xx');
send(this);
});
field.addEventListener('keydown', function(e)
{
if ( e.keyCode == 13 && this.nodeName.toLowerCase != 'textarea' )
send(this);
});
})(editables[i]);
}
for (let i=0; i<chkMax; i++)
{
(function(field)
{
field.addEventListener('change', function()
{
alert('yy');
send(this);
});
})(toCheck[i]);
}
}) (); |
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
| <!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>
<form method="post" action="" class="cardForm">
<div>
<label for="leg_status">Forme juridique</label><select name="leg_status" data-action='edit'><option></option><option value="1">Individuel</option><option value="2">EIRL</option><option value="3">EURL</option><option value="4">SARL</option><option value="5">SAS</option><option value="6">SASU</option><option value="7">SA</option><option value="8">SNC</option><option value="9" selected="selected">Association</option></select><br/>
<label for="capital">Capital</label><input type="text" name="capital" id="capital" value="" data-action='edit' />
<input type="radio" name="capital_unit" id="capital_unit1" value="1" /><label for="capital_unit1" class="blue min">k€</label>
<input type="radio" name="capital_unit" id="capital_unit2" value="2" checked /><label for="capital_unit2" class="blue min">M€</label><br/>
<label for="turnover">Chiffre d'affaires</label><input type="text" name="turnover" id="turnover" value="" data-action='edit' />
<input type="radio" name="turnover_unit" id="turnover_unit1" value="1" /><label for="turnover_unit1" class="blue">k€</label>
<input type="radio" name="turnover_unit" id="turnover_unit2" value="2" checked /><label for="turnover_unit2" class="blue">M€</label>
<input type="radio" name="turnover_unit" id="turnover_unit3" value="3" /><label for="turnover_unit3" class="blue">G€</label><br/>
<label for="register">Registre</label><input type="text" name="register" id="register" value="" data-action='edit' /><br/>
</div>
</form>
</body>
</html> |
P.S. J'ai essayé de mettre un exemple sur fiddle mais je n'arrive pas à me servir de ce site.
