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:
<input type="text" object="person" property="firstName" />
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:
<body onLoad="javascript:initializeFormBinding();">
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:
<form> First Name: <input type="text" object="person" property="firstName" /><br> Last Name: <input type="text" object="person" property="lastName" /><br> Age: <input type="text" object="person" property="age" /><br> Country: <input type="text" object="person" property="country" /><br> </form>
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.
it is not working fine
it is not working fine…. i checked it