Accessing Forms Made Easy Using DataLink

In this tutorial you will learn to use the jQuery Data Link plugin to automate the process of accessing and modifying values of form fields.

Demo

Background of Data Link

Data Link plugin is developed by Microsoft and it’s currently in beta stage. This feature was present in Microsoft Ajax Client Library and in Silverlight with the name of Two-way bindings. Also the jQuery’s templating plugin which I used in Ajax CRUD Series is also part of Microsoft Ajax Client Library.

Microsoft stopped developing Ajax Client Library and shifted its focus to jQuery and started porting their library’s cool features to jQuery as plugins.

Purpose of Data Link

With this plugin, you can link complete Html form with an object. If anything changes in the form field, it will automatically be updated in object and vice verse. It’s two-way linking. But you can limit the linking to one-way as well.

Preparing the Demo Form

You can download Data Link plugin from this GitHub page.

The Html

Let’s first prepare Html/CSS for the demo form on which we will use Data Link. Here’s the Html of demo page.

<body>
    <div id="wrapper">
        <h1 id="page_title">jQuery Data Link Demo</h1>
 
        <div id="form_container">
            <form>
                <p>
                    <label for="name">Name: </label>
                    <input type="text" id="name" name="name" />
                </p>
 
                <p>
                    <label for="email">Email: </label>
                    <input type="text" id="email" name="email" />
                </p>
 
                <p>
                    <label for="mob">Mobile: </label>
                    <input type="text" id="mob" name="mob" />
                </p>
 
                <p>
                    <label for="landline">Landline: </label>
                    <input type="text" id="landline" name="landline" />
                </p>
 
                <p>
                    <label for="msg" class="lblLeft">Message: </label>
                    <textarea id="msg" name="msg"></textarea>
                </p>
 
                <p>
                    <label>&nbsp;</label>
                    <input type="button" id="changeValues" value="Change Object Values" />
                </p>
 
                <p>
                    <label>&nbsp;</label>
                    <input type="button" id="displayValues" value="Display Values" />
                    <input type="button" id="serializeValues" value="Serialize Values" />
                </p>
            </form>
        </div>
 
        <p id="display_result">OUTPUT...</p>
    </div>
</body>

The CSS

Now add following CSS in the head tag of Html page.

body {
    background: #2B435E;
    color: #fff;
    font-family: Calibri, Tahoma, sans-serif;
    margin: 0;
    padding: 0;
}
label {
    display: inline-block;
    min-width: 100px;
    text-align: right;
}
input[type=text], textarea {
    padding: 6px;
}
input[type=button] {
    padding: 4px;
}
textarea {
    height: 50px;
    width: 218px;
}
 
#wrapper {
    margin: 0 auto;
    width: 960px;
}
#page_title {
    border-bottom: 1px solid #fff;
    border-bottom: 1px solid rgba(255,255,255,.8);
    font-size: 4em;
    font-weight: normal;
    margin: 4px 0 30px 0;
    text-shadow: 0 0 20px rgba(0,0,0,.4);
}
#form_container {
    margin: 0 auto;
    width: 400px;
}
#display_result {
    background: #5788bf;
    padding: 8px;
    text-shadow: 1px 1px 1px #000;
}
 
.alignCenter {
    text-align: center;
}
.lblLeft {
    float: left;
    margin: 0 4px 0 0;
}

I am not going deep in Html/CSS part but you can ask anything related to it in comments.

Using Data Link

Of course the first step is to include the jQuery core file and then data link plugin as shown below.

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.datalink.js"></script>
<script type="text/javascript">//our code will go here...</script>

Add these script tags before </body>. Let’s link an object to Html form using Data Link.

$( function() {
    var properties = {};
    $( 'form' ).link( properties );
});

In the above code, an empty object “properties” is created on line 2. Then this object is passed to link() method on line 3. This method is used to create two-way binding between the form and object. Now anything changes in the form will automatically be reflected in properties object. Let’s check it by displaying the object properties in display_result paragraph element (<p id=”display_result”>).

$( '#displayValues' ).click( function() {
    var output = "";
 
    output += "Name: " + properties.name + "<br />";
    output += "Email: " + properties.email + "<br />";
    output += "Mobile: " + properties.mob + "<br />";
    output += "Landline: " + properties.landline + "<br />";
    output += "Message: " + properties.msg + "<br />";
 
    $( '#display_result' ).html( output );
    return false;
});

Click event is attached with Display Values Button where I simply concatenated all member variables of properties object in output variable. Then I replaced the innerhtml of display_result with the output variable.

Now fill few of the fields of form and click Display Values. You will see that properties object gets updated automatically. Following is the output after clicking Display Values.

Name: Fawad Hassan
Email: abc@testing.com
Mobile: 1234567
Landline: 9876543
Message: Message goes here...

As I wrote above that Data Link provides two-way binding. It means if we update any member variable of properties object, the form field corresponding to it will get updated automatically. For example changing the properties.msg will update the form field as well. Let’s try it ourselves. Add a new click event handler for changeValues button.

$( '#changeValues' ).click( function() {
    $( properties ).data( "name", "Name goes here..." );
    $( properties ).data( "email", "Email goes here..." );
    $( properties ).data( "mob", "1234567" );
    $( properties ).data( "landline", "9876543" );
    $( properties ).data( "msg", "Message goes here..." );
    return false;
});

Note the way of changing values of member variables of properties object. data() method not only updates the value in properties object but also updates the corresponding form field. Click on Change Values button and you will the changes in form fields.

Remember that link() and data() methods are from Data Link plugin. Finally I want to show you how to serialize objects using jQuery. Serialized value of object can be sent to server using Ajax call. Attach a new click handler with Serialize Values button.

$( '#serializeValues' ).click( function() {
    $( '#display_result' ).html( $.param( properties ) );
    return false;
});

$.param() is used to serialize object. param is not part of Data Link plugin. It’s from jQuery and you can use it to serialize any object even if you are not using Data Link.

Data Link is much powerful than what I explained here. It contain more features like data type conversion before inserting values in object from form fields. You can also validate values before adding values to object. All of these features are very well explained in API page of link() method.

You can also break binding of form with object using unlink() method. Click here to read more about it.

Demo


comments powered by Disqus