In IE 8, I can't change the value of a field before submitting onsubmit (JS). What is the problem?

O

Oleg Ulyanov2014-11-07 15:58:56

JavaScript

Oleg Ulyanov, 2014-11-07 15:58:56

There is such a page that formats the input of 16 digits (from 1234567890123456 to 1234 5678 9012 3456). When submitting the form, the formatting should disappear and just pass the numbers. Works fine in other browsers, but in IE (8 in particular) the field value is not replaced before submit. What could be the problem?

<form name="nameForm" method="POST">
    <input type="text" name="nameInput">
    <button type="submit">Send</button>
</form>

<script>
    (function () {
        var el = document.getElementsByName('nameInput')[0];
        var frm = document.forms['nameForm'];

        if (el.addEventListener) {
            el.addEventListener("input", callbackKeydown, false);
        } else if (el.attachEvent) {
            el.attachEvent('onpropertychange', callbackKeydown);
        }

        if (frm.addEventListener) {
            frm.addEventListener("submit", callback, false);
        } else if (frm.attachEvent) {
            frm.attachEvent('onsubmit', callback);
        }

        function callbackKeydown(e) {
            var valueOriginal = (e.propertyName === 'value') ? e.srcElement.value : this.value;
            var valueWithoutSpaces = valueOriginal.replace(/\D/g, '');
            var length = valueWithoutSpaces.length;
            var valueWithSpaces = valueWithoutSpaces.substr(0, length < 4 ? length : 4)
                    + ((length > 4) ? ' ' + valueWithoutSpaces.substr(4, length < 9 ? length - 4 : 4) : '')
                    + ((length > 8) ? ' ' + valueWithoutSpaces.substr(8, length < 12 ? length - 8 : 4) : '')
                    + ((length > 12) ? ' ' + valueWithoutSpaces.substr(12, length < 16 ? length - 12 : 4) : '');
            if (e.propertyName === 'value' && e.srcElement.value != valueWithSpaces) {
                var input = e.srcElement;
                input.value = valueWithSpaces;
                input.blur();
                input.focus();

            }
            else {
                this.value = valueWithSpaces;
            }
        }

        function callback(e) {
            var v = el.value.replace(/\D/g, '');
            el.value = v;
            alert(el.value);
            return true;
        }
    }())
</script>

</html>

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

O

Oleg Ulyanov, 2014-11-10
@gelosoft

Problem in the following....
The output agent hangs on a text field (for ie on propertychange, for the others on input). In the form handler on submit, this text field is changed. For all browsers except IE (as I understand it <=8), only the form handler fires and the form is submitted, and in IE (hot favorite) the text field handler is also called before submitting. In principle, in my opinion, IE is probably doing the right thing, no matter how much I like it)))
It was decided by removing the test field handler before changing the field in the submit handler.
Latest version:

<html>
<body>
<form name="nameForm">
    <input type="text" name="nameInput" onfocus="this.value = this.value"/>
    <button value="submit" type="submit">Send</button>
</form>

<script>
    (function () {
        var el = document.getElementsByName('nameInput')[0];
        var frm = document.forms['nameForm'];

        if (el.addEventListener) {
            el.addEventListener("input", callbackInput, false);
        } else if (el.attachEvent) {
            el.attachEvent('onpropertychange', callbackInput);
        }

        if (frm.addEventListener) {
            frm.addEventListener("submit", callbackForm, false);
        } else if (frm.attachEvent) {
            frm.attachEvent('onsubmit', callbackForm);
        }

        function callbackInput(e) {
            var valueOriginal = (e.propertyName === 'value') ? e.srcElement.value : this.value;
            var valueWithoutSpaces = valueOriginal.replace(/\D/g, '');
            var length = valueWithoutSpaces.length;
            var valueWithSpaces = valueWithoutSpaces.substr(0, length < 4 ? length : 4)
                    + ((length > 4) ? ' ' + valueWithoutSpaces.substr(4, length < 9 ? length - 4 : 4) : '')
                    + ((length > 8) ? ' ' + valueWithoutSpaces.substr(8, length < 12 ? length - 8 : 4) : '')
                    + ((length > 12) ? ' ' + valueWithoutSpaces.substr(12, length < 16 ? length - 12 : 4) : '');
            if (e.propertyName === 'value' && e.srcElement.value != valueWithSpaces) {
                var input = e.srcElement;
                input.value = valueWithSpaces;
                input.blur();
                input.focus();
            }
            else {
                this.value = valueWithSpaces;
            }
        }

        function callbackForm(e) {
            if (el.detachEvent) {
                el.detachEvent('onpropertychange', callbackInput);
            } else {
                el.removeEventListener('input', callbackInput, true);
            }
            el.value = el.value.replace(/\D/g, '');
        }
    }())
</script>
</body>
</html>

V

Vladimir Rodkin, 2014-11-07
@VovanR

There is no way to check, but here stackoverflow.com/questions/16201278/jquerys-form-... they write that you can add an attribute to the button value="submit"
Or you can call the clicksubmit button event of the form on submit.

I

Ilya Lesnykh, 2014-11-07
@Aliance

There is a suspicion that the problem is that IE sends data before any methods that change them are called. You may need to explicitly break the default behavior of the event, make changes to the data, and manually replay the event. The scheme is something like this (pseudo js):

function callback (e) {
   e.preventDefault();
   // ...
   // действия с данными формы, удаление пробелов и прочего
   // ...
   form.submit();
}

I

Igor Pushkarsky, 2014-11-07
@RainMEN

Good afternoon! I hope you are testing the code directly on xp with ie8 browser? Or are you trying to run the script in the emulator (or in ie itself, set compatibility with ie8)? Check if js works at all? If not, then in your browser settings, turn on allow the use of js on this page.