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
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<base href="http://racine.local" />
<link rel="stylesheet" media="all" type="text/css" href="../css/structure.css" />
<link rel="stylesheet" media="all" type="text/css" href="../css/screen.css" />
<link rel="stylesheet" media="print" type="text/css" href="../css/print.css" />
<style>
form[name="tabForm"] .activite p {
line-height:30px;
}
form[name="tabForm"] .activite span {
display:inline-block;
width:100px;
}
form[name="tabForm"] .activite select {
width:200px;
}
</style>
</head>
<body>
<form method="post" name="tabForm" >
<input type="hidden" id="id0" name="id" value="3011">
<input type="hidden" name="token" value="89e5da68bf3988022f92f40f7e56054ae5d4dd1a2a037167">
<div class="formFlex">
<fieldset><legend>Activités répertoriées</legend>
<p class="note">
du texte.
</p>
<fieldset class="activite"><legend>Zone d'édition : Sélection d'une activité</legend>
<p><label><span>Section</span><select name='naf[]' required='required'><option value='' label='< ---- >'></option><option value='1'>SECTION A - AGRICULTURE, SYLVICULTURE ET PÊCHE</option><option value='2'>SECTION B - INDUSTRIES EXTRACTIVES</option></select></label></p>
<p><label><span>Division</span><select name='naf[]'><option value='' label='< ---- >'></option><option value='1'>SECTION A - AGRICULTURE, SYLVICULTURE ET PÊCHE</option><option value='2'>SECTION B - INDUSTRIES EXTRACTIVES</option></select></label></p>
<p><label><span>Groupe</span><select name='naf[]'><option value='' label='< ---- >'></option><option value='1'>SECTION A - AGRICULTURE, SYLVICULTURE ET PÊCHE</option><option value='2'>SECTION B - INDUSTRIES EXTRACTIVES</option></select></label></p>
<p><label><span>Activité</span><select name='naf[]'><option value='' label='< ---- >'></option><option value='1'>SECTION A - AGRICULTURE, SYLVICULTURE ET PÊCHE</option><option value='2'>SECTION B - INDUSTRIES EXTRACTIVES</option></select></label></p>
</fieldset>
</div>
</form>
<script>
const
form = document.querySelector("form[name=tabForm]")
,nafs = form.querySelectorAll("select[name='naf[]']")
,root = window.location.origin
;
console.log(nafs);
function handleChange(lastList, idx) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
//nafs[idx].innerHTML = xhr.responseText;
}
}
xhr.open('POST', root+'/frontend/customerActivityAjax.php', true);
var data = new FormData(form);
xhr.send(data);
}
if (nafs.length){
nafs.forEach(function(curNaf, index){
curNaf.addEventListener('change', function(e){
handleChange(curNaf,index);
}, false );
});
}
</script>
</body>
</html> |
Partager