Binding an input element to a JavaScript object

Question

I want to introduce a simple notation to bind a HTML <input> element to a JavaScript object. Something like:

<script>            
    var qform = {
        uid : "",
        pass : ""
    };
</script>

<form method="get" action="#">
    <input id="temp0" type="text" name="uid" bind="qform.uid" />
    <input id="temp1" type="password" name="pass" bind="qform.pass" />
    <input type="submit" value="submit" />
</form>

So that any changes to the <input>s will change my JS variable. The way I'm trying to implement it is:

<script>

    var x = 0;
    for(x = 0; x < 2; x++) {

        var inputField = document.getElementById("temp" + x);


        var bindObj = inputField.getAttribute("bind");            

        var bindObjTree = bindObj.split(".");
        var parent = window;
        for (var i = 0; i < bindObjTree.length - 1; i++) {
            parent = parent[bindObjTree[i]];
        }
        child = bindObjTree[bindObjTree.length - 1];

        inputField.value = parent[child];

        inputField.onchange = function() {
            var xp = parent;
            var xc = child;
            xp[xc] = inputField.value;
            alert(JSON.stringify(window["qform"]));
        };

    } // for

    </script>

However only the second input field behaves the way I want to. Can someone explain why that is? I'm guessing it has something to do with closures. I'm really trying to understand what I'm doing wrong rather than find a solution (I can easily work around this with JQuery, but I don't really want that).

In your case, why aren't you using eval to get the object reference that you want to bind? The way you doing is very harder and in this case has less performance. Do you have some restriction with eval? — Gabriel Gartz
– Gabriel Gartz, Commented Jan 8, 2013 at 8:18
@GabrielGartz historically I have avoided eval, and going forward with the code I won't be able to use eval. However with the above example, I do agree that eval is the better choice — tinkerbeast
– tinkerbeast, Commented Jan 8, 2013 at 8:58
Many developers recommend against using eval(). Before using eval as part of your solution, you should consider any damage that might be done if an 'attacker' changed your attribute values to include malicious code which it then relies on your program to run via an eval statement. — Jared Clemence
– Jared Clemence, Commented Mar 22, 2016 at 1:49
This problem is similar to stackoverflow.com/questions/750486/… where the concepts are better explained. — tinkerbeast
– tinkerbeast, Commented Nov 2, 2019 at 18:26

Konstantin Dinev · Accepted Answer · 2013-01-08 09:01:22Z

1

The issue is with these:

        parent = parent[bindObjTree[i]];
        child = bindObjTree[bindObjTree.length - 1];

and

    inputField.onchange = function() {
        var xp = parent; // Always refers to the element retrieved at index 1 of the for loop
        var xc = child; // Always refers to the element retrieved at index 1 of the for loop
        // This is regardless of which input's event handler executes
        xp[xc] = inputField.value;
        alert(JSON.stringify(window["qform"]));
    };

These will always refer to the elements found in the last iteration of the for loop because of closure.

edited Jan 8, 2013 at 9:01

answered Jan 8, 2013 at 8:13

Konstantin Dinev

35k14 gold badges79 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Quentin Engles · Accepted Answer · 2013-01-08 08:14:13Z

0

inputFields needs to be an an array so it doesn't get overwritten in the loop or

you can place an id in the form tag and instead reference it to get the fields as its child elements.

answered Jan 8, 2013 at 8:14

Quentin Engles

2,8421 gold badge23 silver badges33 bronze badges

Comments

Chris · Accepted Answer · 2013-01-08 08:14:31Z

0

Your child variable is global. Try to use:

var child = bindObjTree[bindObjTree.length - 1];

instead. Since it is global, you will overwrite the global child variable on the second turn.

answered Jan 8, 2013 at 8:14

Chris

7,8268 gold badges54 silver badges103 bronze badges

1 Comment

tinkerbeast Over a year ago

Thanks Chris, I didn't notice that tiny bug

Collectives™ on Stack Overflow

Binding an input element to a JavaScript object

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related