Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
florimon opened this issue Nov 6, 2013 · 5 comments
Labels

Comments

@florimon
Copy link

florimon commented Nov 6, 2013

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;
    }
}
@jamesallardice
Copy link
Owner

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.

@MicahStevens
Copy link

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

@jerryfantastic
Copy link

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

@serumk
Copy link

serumk commented Jun 17, 2015

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! 👍

@lruckman
Copy link

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

6 participants