jQUery Code doesn't work in IE

Question

Here is my jQuery code. It shows some prompt messages if the user doesn't fill in all fields.

$('#register').click(function(){
    var sign_up_button = $(this).val();

    var pass = $('#password').val();
    var retype_pass = $('#retype_password').val();

    if (pass != retype_pass)
    {
        return false;
    } else if ($('#firstname').val() == '' || $('#lastname').val() == '' || $('#mobile_number').val() == '' || $('#email_address').val() == '' || $('#password').val() == '' || $('#retype_password').val() == '') {
        $('#danger_container_all_fields').attr('class', 'alert alert-danger');
        $('#message_fill_up_all_fields').html("Please, Fill up all fields!");
        return false;
    } else {
        return true;
    }
});

I also saw this JS code online for placeholder in IE, but there's some conflict in it that suppresses the message of my jQuery code.

var _debug = false;
var _placeholderSupport = function() {
    var t = document.createElement("input");
    t.type = "text";
    return (typeof t.placeholder !== "undefined");
}();

window.onload = function() {
    var arrInputs = document.getElementsByTagName("input");
    var arrTextareas = document.getElementsByTagName("textarea");
    var combinedArray = [];
    for (var i = 0; i < arrInputs.length; i++)
        combinedArray.push(arrInputs[i]);
    for (var i = 0; i < arrTextareas.length; i++)
        combinedArray.push(arrTextareas[i]);
    for (var i = 0; i < combinedArray.length; i++) {
        var curInput = combinedArray[i];
        if (!curInput.type || curInput.type == "" || curInput.type == "text" || curInput.type == "textarea")
            HandlePlaceholder(curInput);
        else if (curInput.type == "password")
            ReplaceWithText(curInput);
    }

    if (!_placeholderSupport) {
        for (var i = 0; i < document.forms.length; i++) {
            var oForm = document.forms[i];
            if (oForm.attachEvent) {
                oForm.attachEvent("onsubmit", function() {
                    PlaceholderFormSubmit(oForm);
                });
            }
            else if (oForm.addEventListener)
                oForm.addEventListener("submit", function() {
                    PlaceholderFormSubmit(oForm);
                }, false);
        }
    }
};

function PlaceholderFormSubmit(oForm) {    
    for (var i = 0; i < oForm.elements.length; i++) {
        var curElement = oForm.elements[i];
        HandlePlaceholderItemSubmit(curElement);
    }
}

function HandlePlaceholderItemSubmit(element) {
    if (element.name) {
        var curPlaceholder = element.getAttribute("placeholder");
        if (curPlaceholder && curPlaceholder.length > 0 && element.value === curPlaceholder) {
            element.value = "";
            window.setTimeout(function() {
                element.value = curPlaceholder;
            }, 100);
        }
    }
}

function ReplaceWithText(oPasswordTextbox) {
    if (_placeholderSupport)
        return;
    var oTextbox = document.createElement("input");
    oTextbox.type = "text";
    oTextbox.id = oPasswordTextbox.id;
    oTextbox.name = oPasswordTextbox.name;
    //oTextbox.style = oPasswordTextbox.style;
    oTextbox.className = oPasswordTextbox.className;
    for (var i = 0; i < oPasswordTextbox.attributes.length; i++) {
        var curName = oPasswordTextbox.attributes.item(i).nodeName;
        var curValue = oPasswordTextbox.attributes.item(i).nodeValue;
        if (curName !== "type" && curName !== "name") {
            oTextbox.setAttribute(curName, curValue);
        }
    }
    oTextbox.originalTextbox = oPasswordTextbox;
    oPasswordTextbox.parentNode.replaceChild(oTextbox, oPasswordTextbox);
    HandlePlaceholder(oTextbox);
    if (!_placeholderSupport) {
        oPasswordTextbox.onblur = function() {
            if (this.dummyTextbox && this.value.length === 0) {
                this.parentNode.replaceChild(this.dummyTextbox, this);
            }
        };
    }
}

function HandlePlaceholder(oTextbox) {
    if (!_placeholderSupport) {
        var curPlaceholder = oTextbox.getAttribute("placeholder");
        if (curPlaceholder && curPlaceholder.length > 0) {
            Debug("Placeholder found for input box '" + oTextbox.name + "': " + curPlaceholder);
            oTextbox.value = curPlaceholder;
            oTextbox.setAttribute("old_color", oTextbox.style.color);
            oTextbox.style.color = "#c0c0c0";
            oTextbox.onfocus = function() {
                var _this = this;
                if (this.originalTextbox) {
                    _this = this.originalTextbox;
                    _this.dummyTextbox = this;
                    this.parentNode.replaceChild(this.originalTextbox, this);
                    _this.focus();
                }
                Debug("input box '" + _this.name + "' focus");
                _this.style.color = _this.getAttribute("old_color");
                if (_this.value === curPlaceholder)
                    _this.value = "";
            };
            oTextbox.onblur = function() {
                var _this = this;
                Debug("input box '" + _this.name + "' blur");
                if (_this.value === "") {
                    _this.style.color = "#c0c0c0";
                    _this.value = curPlaceholder;
                }
            };
        }
        else {
            Debug("input box '" + oTextbox.name + "' does not have placeholder attribute");
        }
    }
    else {
        Debug("browser has native support for placeholder");
    }
}

function Debug(msg) {
    if (typeof _debug !== "undefined" && _debug) {
        var oConsole = document.getElementById("Console");
        if (!oConsole) {
            oConsole = document.createElement("div");
            oConsole.id = "Console";
            document.body.appendChild(oConsole);
        }
        oConsole.innerHTML += msg + "<br />";
    }
}

Can someone help me locate the conflict code. By the way, this code only conflict in IE. In other browsers it works really well.

@Barmar yes it is inside the $(document).ready() it works good in other browsers except IE... — Sam Teng Wong
– Sam Teng Wong, Commented Mar 27, 2015 at 2:10
What debugging have you done so far? Are there any messages in the Javascript console? Have you tried setting breakpoints in your jQuery code to see if it's running? Can you make a Stack Snippet or jsfiddle that demonstrates the problem? — Barmar
– Barmar, Commented Mar 27, 2015 at 2:14
Is #register the submit button of your form? Your placeholder code has oForm.attachEvent("onsubmit", function() {, which replaces your submit handler with its own code. — Barmar
– Barmar, Commented Mar 27, 2015 at 2:16
@Barmar no error messages... when I omit the placeholder js code my JQUERY code above works just fine... but when I put the placeholder code it doesn't show the fill up all fields message... I think there is a conflict code there.. — Sam Teng Wong
– Sam Teng Wong, Commented Mar 27, 2015 at 2:17

Barmar · Accepted Answer · 2015-03-27 02:24:40Z

The problem is that this code:

if (oForm.attachEvent) {
    oForm.attachEvent("onsubmit", function() {
        PlaceholderFormSubmit(oForm);
    });
}

is replacing the jQuery submit handler. It only happens in IE because attachEvent is a non-standard, IE-only method. You have several options to work around this:

Just get rid of the above code. Then this part of the placeholder code won't work in old versions of IE (recent versions have addEventListener).
Change the order of the if and else if blocks in the placeholder code, so it tests for addEventListener first. That way, the override will only happen in old versions of IE. In general, it's best to test for new features first, and only fall back on old methods when they don't exist.
Run the jQuery code after the placeholder code. This way, it will add its submit handler to the submit handler that was added by the placeholder.

Collectives™ on Stack Overflow

jQUery Code doesn't work in IE

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related