Detect setting value of a field with getElementById(field_name).value and intercept/override it

Question

I don't have a provision to not invoke the JS that tries to set a value of a field using:

getElementById(field_name).value = 'someValue'

So, as an alternative, I'm trying to see if there's a way to intercept/override the JS that sets the value of the field in the html and try to restrict it if certain conditions are met.

Please let me know if it's possible?

It may seem that this question is a duplicate of this and this but it's not. Those question's solution wants a change in the code, which is not an option for me.

you can dupe the value and set it again before it's needed. other stuff will be complicated... — dandavis, Sep 15 '15 at 16:52
@toskv: i think the method is ok, it's the property assignment that's an issue. — dandavis, Sep 15 '15 at 16:57
I think you could use that and define your own setter method for the value. That might not work on all browsers though. Check this out: http://stackoverflow.com/questions/20147081/javascript-catch-access-to-property-of-object — toskv, Sep 15 '15 at 17:03

score 1 · Answer 1 · answered Sep 15 '15 at 17:56

I'm afraid you can't, so if you really cannot change the code setting it, you're stuck with the really ugly option of polling it and watching for changes. E.g., something vaguely like this:

function polledInterceptor(id, callback) {
    var element = document.getElementById(id);
    var value = element.value;
    var timer = setInterval(function() {
        if (value !== element.value) {
            value = callback(element, value);
            if (value !== null) {
                element.value = value;
            }
        }
    }, 30); // 30 = 30ms
    return {
        stop: function() {
            clearTimeout(timer);
        }
    };
}

...and then use it like this:

var poller = polledInterceptor("field_name", function(element, oldValue) {
    var newValue = element.value;
    // ...decide what to do...
    return "someValue"; // or return null to leave the value unchanged
});

when ready to stop:

poller.stop();

Detect setting value of a field with getElementById(field_name).value and intercept/override it

1 Answers1