My Javascript is not working when tested in IE8

Question

I am making a website and one of the requirements is it to be IE8 compatible. I have a simple form on my page and using a radio button I am changing what fieldsets of the form are visible. Basically I am giving user an option to either input his name or his number. I am using IE11 on W10 in IE8 compatibility mode in F12 menu and the switching is not working. It works everywhere else, even in IE9+. Do you know what could be the problem?

Both my radio buttons have an onclick function that set one fieldset at display:none and the other at display:block. The "header__form__fs_person" is hidden by default.

html:

           <form class="header__form" name="form_name">
                <fieldset class="header__form__label_choices">
                    <label class="header__form__label" for="person">Podle jména</label>
                    <input class="header__form__input_radio" type="radio" value="person_on" id="person" name="choice" onclick="hideIc(this)" checked>

                    <span class="header__form__divider">/</span>

                    <label class="header__form__label" for="ic">Podle IČ</label>
                    <input class="header__form__input_radio" type="radio" value="ic_on" id="ic" name="choice" onclick="hidePerson(this)">
                </fieldset>

                <fieldset class="header__form__fs_person">
                    <input class="header__form__input_text" type="text" id="name" placeholder="Jméno" required>

                    <input class="header__form__input_text" type="text" id="lastname" placeholder="Příjmení" required>

                    <input class="header__form__input_text" type="text" id="bday" placeholder="Narozen" onfocus="(this.type='date')" required>
                </fieldset>

                <fieldset class="header__form__fs_ic" disabled>
                    <input class="header__form__input_text" pattern=".{9,}" placeholder="123456789" required>
                </fieldset>

                <label class="header__form__terms" for="terms">Souhlasím s <a class="header__form__terms_a" href="">obchodnimi podmínkami</a></label>
                <input class="header__form__input_checkbox" type="checkbox" id="terms" required>

                <input class="header__form__input_btn" type="submit" value="Ověřit">
            </form>

js:

<script>
            function hideIc(radio_btn) {
                if (radio_btn.checked) {
                    var ic = document.getElementsByClassName("header__form__fs_ic");
                    var person = document.getElementsByClassName("header__form__fs_person");

                    for (var i=0; i < ic.length; i++) {
                        ic[i].style.display = "none";
                        ic[i].disabled = true;

                        person[i].style.display = "block";
                        person[i].disabled = false;

                    }

                }
            }

            function hidePerson(radio_btn) {
                if (radio_btn.checked) {

                    var ic = document.getElementsByClassName("header__form__fs_ic");
                    var person = document.getElementsByClassName("header__form__fs_person");

                    for (var i=0; i < ic.length; i++) {
                        ic[i].style.display = "block";
                        ic[i].disabled = false;

                        person[i].style.display = "none";
                        person[i].disabled = true;
                    }
                }
            }

        </script>

what specifally isn't working and what errors are thrown? Note that pattern and placeholder won't be supported without shims — charlietfl, Oct 08 '16 at 22:25
There are no errors, it just does not work. When I click the radio button nothing happens, nothing hides, nothing appears. Also the pattern and placeholders are something that I did not see. How can I make them work? — Arcane, Oct 08 '16 at 22:34

score 0 · Answer 1 · edited May 23 '17 at 11:48

0

IE8 doesn't support getElementsByClassName().

See here: http://caniuse.com/#feat=getelementsbyclassname

There is a walk-around:

if(!document.getElementsByClassName) {
    document.getElementsByClassName = function(className) {
        return this.querySelectorAll("." + className);
    };
    Element.prototype.getElementsByClassName = document.getElementsByClassName;
}

The answer isn't mine... I found it here:
javascript document.getElementsByClassName compatibility with IE

edited May 23 '17 at 11:48

Community

1
1

answered Oct 08 '16 at 22:33

Louys Patrice Bessette

33,375
6
36
64

I read your solution and tried it and while it worked on all browsers, it still did not work in IE8 compatibility mode. I tried the function and I tried to replace all 'getElementsByClassName' with 'querySelectorAll' and it still did not work. – Arcane Oct 08 '16 at 22:49
If you use jQuery (you tagged your question with it) you could just use `var person = $(".header__form__fs_person");`... Would be more simple. Because, like said, this answer is not mine... I can't explain why it's not working for you. – Louys Patrice Bessette Oct 08 '16 at 22:57

My Javascript is not working when tested in IE8

1 Answers1