0

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...

Eb Heravi
  • 398
  • 5
  • 15
skywalskurt
  • 87
  • 1
  • 10
  • [Many more solutions](https://www.google.com/search?q=jquery+ie11+disable+options+site:stackoverflow.com) – mplungjan Aug 24 '20 at 10:04
  • jquery hide method does not works on IE 11, the browsers don't allow to hide option of a select. And the issue is not really on HOW to hide option but WHY select doesn't appear in my datas in the back – skywalskurt Aug 24 '20 at 12:39
  • Yes we know, so don’t - the suggestion is to change the option to something that can be hidden – mplungjan Aug 24 '20 at 12:40

0 Answers0