jamesallardice/Placeholders.js

Placeholders are not cleared when javascript calls form.submit() on Internet Explorer

Opened this issue · 5 comments

In Internet Explorer, placeholder texts are not being cleared when javascript code calls form.submit() on a form that contains inputs with placeholders; this is because on Internet Explorer, in contrast to other browsers, the form.submit() method does not trigger an onsubmit event, so the Placeholders.js code responsible for clearing any placeholder texts, never gets called.
I've solved this locally by modifying the addEventListener(elem, event, fn) method in Placeholders.js as follows:

// Cross-browser DOM event binding
function addEventListener(elem, event, fn) {
    if (event == "submit") {
        setupTriggerEventBeforeSubmit(elem);
    }
    if (elem.addEventListener) {
        return elem.addEventListener(event, fn, false);
    }
    if (elem.attachEvent) {
        return elem.attachEvent("on" + event, fn);
    }
}

, and adding an extra method

function setupTriggerEventBeforeSubmit(form) {
    if (! form.submit.oldsubmit) {
        var oldsubmit = form.submit;
        form.submit = function() {
            if (form.dispatchEvent) {
                var newEvent = document.createEvent("HTMLEvents");
                newEvent.initEvent("submit", true, false);
                form.dispatchEvent(newEvent);
            } else if (form.fireEvent) {
                form.fireEvent("OnSubmit");
            }
            form.submit.oldsubmit.call(form);
        }
        form.submit.oldsubmit = oldsubmit;
    }
}

Thanks for reporting this. The solution you've come up with will work but it's not ideal for general use as it could cause unwanted side effects (if there are any other submit event handlers bound to the form they will now get executed when you dispatch the fake submit event).

I'll see if I can come up with another approach but let me know if you have any ideas.

Ran into this one too. I just call Placeholder.disable() right before form submit() and it seems to work.

MicahStevens's solution worked for me.
However, be sure to use Placeholders.disable()
(note the s at the end of Placeholders)

Ran into a problem (placeholders submitted with form) when the form in question has no id-attribute. Even with id-attribute i had to change line 515:
var form = elem.form;
to
var form = elem.form.getAttribute('id');

in the function newElement(elem)

works now on Windows 7 IE 9.0.39 - so far the best placeholder emulation! 👍

I also ended up just calling .disable before the submit.

$(function() {
    $('form').on('submit', function () {
        Placeholders.disable();
    });
});