Binding HTML Form Fields To Javascript Objects

Anay — Thu, 22 May 2008 15:42:58 +0000

Consider that I have a object called ‘person’ with a property called ‘Name’ which returns me the name of a particular person. I want to assign this object property to a form element such that:

The form element will display the value of object property (In our case, the value of person.Name)
If I change the value in form, then it should automatically get assigned to the object property

In C#, it could be done by using the following piece of code:

nameTextBox.DataBindings.Add("Text", person, "Name");

I really like the way DataBinding works and would really like have something like this when I’m working on web applications to bind a object property to input elements in HTML forms. So I decided to write a small javascript that would allow me to bind object properties to form elements. For example, I wanted to write something like this:

Thanks to the power of Javascript and prototype library, I was able to use data binding in html forms using code:

function initializeFormBinding()
{
	var formElements = document.getElementsByTagName('input');
	$A(formElements).each(function(formElement)
				{
					Element.extend(formElement);
					initializeFormElement(formElement);
				});
}

function initializeFormElement(formElement)
{
	if (!(formElementHasObjectAttribute(formElement) && formElementHasPropertyAttribute(formElement)))
		return;
	var objectName = getAttributeValue(formElement,'object');
	var propertyName = getAttributeValue(formElement,'property');
	window.eval('formElement.value = '+objectName+'.'+propertyName);
	window.eval('formElement.onchange=function(){ '+objectName+'.'+propertyName+' = formElement.value; }');
}

function formElementHasObjectAttribute(formElement)
{
	return getAttributeValue(formElement,'object')!=null;
}

function formElementHasPropertyAttribute(formElement)
{
	return getAttributeValue(formElement,'property')!=null;
}

function getAttributeValue(element, attributeName)
{
	return element.readAttribute(attributeName);
}

Lets see how to use this: First, create a javascript object. For example:

var person = {};
person.firstName = '';
person.lastName = '';
person.age = '';
person.country = '';

After that call initializeFormBinding() function using onLoad attribute of body tag. For example:

Now, in each of your input elements, put the name of the object in ‘object’ attribute and name of property in ‘property’ attribute as follows:


First Name:


Last Name:


Age:


Country:

Thats it…. If you initialize properties of person object, you would see those values in respective form elements. On the other hand, if you modify the value in a particular input element then it would get reflected in the corresponding object property. Anybody is free to use this code in their applications.

Download a small example application..

Anay Kamat's Weblog » forms

Binding HTML Form Fields To Javascript Objects