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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Init From JSON</title>
</head>
<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>
<script>
var myForm, formData, datastore;
function doOnLoad() {
datastore = new dhtmlXDataStore();
datastore.parse([
{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);
myForm.bind(datastore);
}
</script>
<div id="myForm" style="height:500px;"></div>
</div>
</body>
</html>