0

I'm having a problem with removing content from the form on Safari and IE. I have tried to do that via CSS vith no success. Then I tried to do it by JS but stucked here.

The Task is for current user with class user-id-1 to hide some form options.

So when I try

console.log(document.querySelector("option[value='+newTime+']"));

it returns null

formID = ['1015', '1018', '1035', '1036', '1060'];
    
if (document.querySelector("body").classList.contains("user-id-1")) {
    
for (var i = 0; i < formID.length; i++) {
        var newTime = formID[i];
                
    console.log(document.querySelector("option[value='+newTime+']"));// returns null
    console.log(formID[i]);// works well
    console.log(newTime);//works well
       }
  
}
<body class=" js user-id-1 user-role-administrator  contact_page_cf7-data auto-fold">
  <div class="user-1">
    <form>
      <select name="fid" onchange="this.form.submit();">
        <option value="">Choose form</option>
        <option value="814">Contact form 1</option>
        <option value="818">Forma za započet izazov</option>
        <option value="824">Besplatan video / prijava</option>
        <option value="981">Forma za započet izazov / Vladimir Vukadinovic</option>
        <option value="982">Besplatan video / prijava-Vladimir Vukadinovic</option>
        <option value="1001">Besplatan video / Dajana Salvati</option>
        <option value="1002">Forma za započet izazov/ Dajana Salvati</option>
        <option value="1015">Besplatan video / Raskovici</option>
        <option value="1018">Forma za započet izazov / Raskovici</option>
        <option value="1035" selected="selected">Besplatan video / Lamos</option>
        <option value="1036">Forma za započet izazov / Lamos</option>
        <option value="1060">Besplatan video / Skorici</option>
        <option value="1063">Forma za započet izazov / Skorici</option>
      </select>
    </form>
    </div>
</body>
Milan Grujić
  • 35
  • 6
  • Your code looks for an ` – Felix Kling Sep 23 '20 at 07:09
  • 2
    Also you need () on remove: `document.querySelector("option[value="+selectedForm+"]").remove();` – mplungjan Sep 23 '20 at 07:10
  • 2
    Also `if (document.querySelector("body").classList.contains("user-id-1")) ...` – mplungjan Sep 23 '20 at 07:13
  • you could listen to your `select` will be more efficient – Joseph Sep 23 '20 at 07:13
  • 1
    Here is a workign script: `if (document.querySelector("body").classList.contains("user-id-1")) { const sel = document.querySelector(".user-1 select[name=fid]"); const options = [...document.querySelectorAll(".user-1 select[name=fid] option")].filter(opt => !formID.includes(opt.value)); if (sel.options.length > options.length) { sel.options.length=0; /* remove all */ options.forEach(opt => sel.append(opt)); } } ` – mplungjan Sep 23 '20 at 07:29
  • Thanks, @mplungjan your code work perfectly but it is too complicated for me. Is there any easier way with just something like: `document.querySelector("option[value='+newTime+']")).remove();` – Milan Grujić Sep 23 '20 at 15:04
  • If you format my code it is not complicated at all. It is a simple filter and I test to see if we should modify the select by comparing the length of the filter with the length of the selects options – mplungjan Sep 23 '20 at 15:07
  • Thank you @mplungjan – Milan Grujić Sep 23 '20 at 15:30

0 Answers0