Bind Form to Datastore

I’m trying to bind a Form to a Datastore object so that when the form loads the values from the Datastore will automatically populate on the form. When I bind the form to the datastore, I have made sure that the “id” fields match, what I don’t understand is how do I map the “value” field in the datastore to be the value of the form field when it loads. Below is my complete sample code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" lang="en" xml:lang="en">
       <title>Init From JSON</title>
    <body onload="doOnLoad();">
         <div class="content">
         <link rel="stylesheet" type="text/css"  href="../codebase/skins/dhtmlxform_dhx_skyblue.css">
         <script src="../codebase/dhtmlxcommon.js"></script>
         <script src="../codebase/dhtmlx.js"></script>
         <script src="../codebase/dhtmlxform.js"></script>
         <script src="../codebase/datastore.js"></script>
           var myForm, formData, datastore;
               function doOnLoad() {
                   datastore = new dhtmlXDataStore();
                       {id:"FIRSTNAME", value:"FIRST NAME"},
                       {id:"LASTNAME",  value:"LAST NAME"}
                    formData = [
                      {type: "settings", position: "label-left", labelWidth: 100, inputWidth: 120},
                      {type: "input", id:"FIRSTNAME", label: "First Name"},
                      {type: "input", id:"LASTNAME", label: "Last Name"}	
                    myForm = new dhtmlXForm("myForm", formData);
            <div id="myForm" style="height:500px;"></div>

You need to have ids of form’s input equal to the name of fields in dataset, something like

formData = [ {type: "settings", position: "label-left", labelWidth: 100, inputWidth: 120}, {type: "input", id:"id", label: "First Name"}, {type: "input", id:"value", label: "Last Name"}

to make it more clear you can change naming of data in initial data set

datastore.parse([ { id:"1", firstname:"FIRST NAME", lastname:"LAST NAME"} ]) formData = [ {type: "settings", position: "label-left", labelWidth: 100, inputWidth: 120}, {type: "input", id:"firstname", label: "First Name"}, {type: "input", id:"lastname", label: "Last Name"} ];

in above case you also need to call


to specify which data record need to be shown in the form.

Thanks, this makes sense now and your example worked great.