I have a form in my application that has 3 <select>
(named ACTIVITE1
,ACTIVITE2
, ACTIVITE3
) which propose some activities. The idea is that the user can't select 3 times the same activity.
So for that i use this JavaScript/jQuery code :
// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Safari
var isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);
// iOS
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
// si IE,Edge, Safari ou iOS: on désactive les options déjà sélectionnées
if (isIE || isEdge || isSafari || iOS) {
$("#select-session1").change(function() {
var activ1 = $("#select-session1 option:selected").text().substring(0,$("#select-session1 option:selected").text().indexOf(" avec"));
if (!activ1) activ1='999';
var activ2 = $("#select-session2 option:selected").text().substring(0,$("#select-session2 option:selected").text().indexOf(" avec"));
if (!activ2) activ2='999';
var activ3 = $("#select-session3 option:selected").text().substring(0,$("#select-session3 option:selected").text().indexOf(" avec"));
if (!activ3) activ3='999';
$("#select-session2 option").removeAttr('disabled');
$("#select-session3 option").removeAttr('disabled');
$("#select-session2 option:contains("+activ1+" avec)").attr('disabled','true');
$("#select-session2 option:contains("+activ2+" avec)").attr('disabled','true');
$("#select-session2 option:contains("+activ3+" avec)").attr('disabled','true');
$("#select-session3 option:contains("+activ1+" avec)").attr('disabled','true');
$("#select-session3 option:contains("+activ2+" avec)").attr('disabled','true');
$("#select-session3 option:contains("+activ3+" avec)").attr('disabled','true');
})
$("#select-session2").change(function() {
activ1 = $("#select-session1 option:selected").text().substring(0,$("#select-session1 option:selected").text().indexOf(" avec"));
if (!activ1) activ1='999';
activ2 = $("#select-session2 option:selected").text().substring(0,$("#select-session2 option:selected").text().indexOf(" avec"));
if (!activ2) activ2='999';
activ3 = $("#select-session3 option:selected").text().substring(0,$("#select-session3 option:selected").text().indexOf(" avec"));
if (!activ3) activ3='999';
$("#select-session1 option").removeAttr('disabled');
$("#select-session3 option").removeAttr('disabled');
$("#select-session1 option:contains("+activ1+" avec)").attr('disabled','true');
$("#select-session1 option:contains("+activ2+" avec)").attr('disabled','true');
$("#select-session1 option:contains("+activ3+" avec)").attr('disabled','true');
$("#select-session3 option:contains("+activ1+" avec)").attr('disabled','true');
$("#select-session3 option:contains("+activ2+" avec)").attr('disabled','true');
$("#select-session3 option:contains("+activ3+" avec)").attr('disabled','true');
});
$("#select-session3").change(function() {
activ1 = $("#select-session1 option:selected").text().substring(0,$("#select-session1 option:selected").text().indexOf(" avec"));
if (!activ1) activ1='999';
activ2 = $("#select-session2 option:selected").text().substring(0,$("#select-session2 option:selected").text().indexOf(" avec"));
if (!activ2) activ2='999';
activ3 = $("#select-session3 option:selected").text().substring(0,$("#select-session3 option:selected").text().indexOf(" avec"));
if (!activ3) activ3='999';
$("#select-session1 option").removeAttr('disabled');
$("#select-session2 option").removeAttr('disabled');
$("#select-session1 option:contains("+activ1+" avec)").attr('disabled','true');
$("#select-session1 option:contains("+activ2+" avec)").attr('disabled','true');
$("#select-session1 option:contains("+activ3+" avec)").attr('disabled','true');
$("#select-session2 option:contains("+activ1+" avec)").attr('disabled','true');
$("#select-session2 option:contains("+activ2+" avec)").attr('disabled','true');
$("#select-session2 option:contains("+activ3+" avec)").attr('disabled','true');
});
});
}
})
IE 11/Safari/Edge does not allow to hide options of a select so I have simply disabled the options already selected to block the user. So that is working perfectly in all the browsers.
But, here is the problem: on IE11/Safari/Edge when I fill out the form and validate it when I dump the data of the form I don't have all my select in theses data.
Here is the datas that return the form (so you can see that select named ACTIVITE1
& ACTIVITE2
are missing):
array (size=26)
'ID_INSCRIPTION' => string '' (length=0)
'test' => string 'test' (length=4)
'NOM_ENFANT' => string 'test' (length=4)
'PRENOM_ENFANT' => string 'test' (length=4)
'SEXE_ENFANT' => string 'G' (length=1)
'DTNAISSANCE_ENFANT' => string '10/04/2009' (length=10)
'NOM_ECOLE' => string 'test' (length=4)
'ACTIVITE3' => string '29' (length=2)
'RESP1' => string 'ts' (length=2)
'ADRESSE_RESP1' => string 'tes' (length=3)
'TEL_RESP1' => string '0606060606' (length=10)
'MAIL_RESP1' => string 'ts@gmail.com' (length=12)
'RESP2' => string '' (length=0)
'ADRESSE_RESP2' => string '' (length=0)
'TEL_RESP2' => string '' (length=0)
'MAIL_RESP2' => string '' (length=0)
'SAITNAGER' => string 'N' (length=1)
'AUTORISE1' => string '' (length=0)
'AUTORISE2' => string '' (length=0)
'TRAITEMENT' => string 'N' (length=1)
'OUITRAITEMENT' => string '' (length=0)
'ALLERGIES' => string 'Aucune' (length=6)
'AUTRESALLERGIES' => string '' (length=0)
'AUTRESSANTE' => string '' (length=0)
'COCHE' => string 'O' (length=1)
'submit' => string 'Envoyer ma préinscription' (length=26)
That seems to come from the javascript because on Chrome that is working and I try to comments on the code that I put you above and that works without this part of code.
I'm a bit stuck right now, if someone got an idea, I'm open to propositions...