Playing with binding

by Jake Cattrall

HTML

<script src="https://rawgit.com/eligrey/384583/raw/62ce828084bbf3f3d1cd202ffadd8425ad081c61/object-watch.js"></script>
<script src="http://rawgit.com/macek/jquery-serialize-object/master/jquery.serialize-object.js"></script>
<form id="form" action="." method="get">
    <input type="text" name="firstName" placeholder="First Name" />
    <br />
    <input type="text" name="lastName" placeholder="Last Name" />
    <br />
    <input type="email" name="email" placeholder="Email" />
    <br />
    <button>Submit</button>
</form>
<br />
<br />
<input id="lastNameObj" type="text" placeholder="Set lastName object value" />
<button onclick="setLastName()">Go</button>

CSS

1 change event 2 watch event

JavaScript

var bindForm = (function () {
    function bindForm(selector) {
        var that = this;
        this.elem = $(selector);
        this.set = this.elem.serializeObject();
        this.elem.on('change', '[name]', function () {
            var elem;
            elem = $(this);
            that.set[elem.attr('name')] = elem.val();
        });
        for (var k in this.set) {
            this.set.watch(k, function (key, oldVal, newVal) {
                that.elem.find("[name='" + key + "']").val(newVal);
            });
        }
        this.formObj;
    }

    bindForm.prototype.elem = false;

    bindForm.prototype.set = false;

    return bindForm;

})();

var form = new bindForm('form');

$('form').submit(function (e) {
    e.preventDefault();
    form.set.firstName = 'Submitted!';
    form.set.lastName = 'Submitted!';
    form.set.email = 'Submitted!';
    return false;
});

window.setLastName = function () {
    form.set.lastName = $('#lastNameObj').val();
};