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 js : 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 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 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 <!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.
Partager