I am beginner in dojo, i have done some work but unable to add the form value into respective cell in the grid, After click on the submit button.
Here my Dojo script
require([
"dojo/_base/lang",
"dojo/dom",
"dojo/dom-construct",
"dojo/on",
"dojo/dom-form",
"dijit/form/TextBox",
"dijit/form/Button",
"dojox/grid/DataGrid",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/request",
"dojo/domReady!"
],
function(lang, dom, domConstruct, on, domForm, TextBox, Button, DataGrid, Memory, ObjectStore, request)
{
var formJson, first, last, dob, city, state, country, mobile, formId, dataStore, grid;
/*set up layout*/
var layout = [[
{'name': 'First name', 'field': 'id', 'width': '100px'},
{'name': 'Last Name', 'field': 'col2', 'width': '100px'},
{'name': 'DOB', 'field': 'col3', 'width': '200px'},
{'name': 'City', 'field': 'col4', 'width': '150px'},
{'name': 'State', 'field': 'col5', 'width': '150px'},
{'name': 'Country', 'field': 'col6', 'width': '150px'},
{'name': 'Mobile', 'field': 'col7', 'width': '150px'},
]];
/*create a new grid*/
var grid = new DataGrid(
{
store: dataStore,
query: { id: "*" },
queryOptions: {},
structure: layout
}, "grid");
/*append the new grid to the div*/
grid.placeAt("gridDiv");
/*Call startup() to render the grid*/
grid.startup();
});
function submitForm() {
first= dijit.byId('first').get('value');
last= dijit.byId('last').get('value');
dob= dijit.byId('dob').get('value');
city= dijit.byId('city').get('value');
state= dijit.byId('state').get('value');
country= dijit.byId('country').get('value');
mobile= dijit.byId('mobile').get('value');
//console.log(first+','+last+','+dob+','+city+','+state+','+country+','+mobile);
formId = "myform";
formJson = domForm.toJson(formId);
console.log(formJson);
//dataStore.add(formJson);
//grid.setQuery({id: "*"});
}
// Connect the buttons
on(dom.byId("submitForm"), "click", submitForm);
console.log(formJson);
});
and html
<body class="claro">
<div id="wrapper">
<form id="myform">
<div id="formContainer">
<div class="row">
<label>First Name</label>
<input type="text" id="first" name="first" data-dojo-type="dijit.form.TextBox" value="Thilakar" />
</div>
<div class="row">
<label>Last Name</label>
<input type="text" id="last" name="last" data-dojo-type="dijit.form.TextBox" value="Kathirvel" />
</div>
<div class="row">
<label>DOB</label>
<input type="text" id="dob" name="dob" data-dojo-type="dijit.form.TextBox" value="07/10/1983"/>
</div>
<div class="row">
<label>City</label>
<input type="text" id="city" name="city" data-dojo-type="dijit.form.TextBox" value="Chennai"/>
</div>
<div class="row">
<label>State</label>
<input type="text" id="state" name="state" data-dojo-type="dijit.form.TextBox" value="Tamilnadu"/>
</div>
<div class="row">
<label>Country</label>
<input type="text" id="country" name="country" data-dojo-type="dijit.form.TextBox" value="India"/>
</div>
<div class="row">
<label>Mobile</label>
<input type="text" id="mobile" name="mobile" data-dojo-type="dijit.form.TextBox" value="9094730388"/>
</div>
<div class="row">
<label> </label>
<input type="button" value="submit" id="submitForm"/>
</div>
</div>
</form>
<h1>Saved Data</h1>
<div id="gridDiv"></div>
</div>
</body>
please give some suggestion how it's possible.
Thanks
There are several issues. See working example here : http://jsfiddle.net/psoares/Hm8j2/
I changed your html to this :
<div id="wrapper">
<form id="myform">
<div id="formContainer">
<div class="row">
<label>First Name</label>
<input type="text" id="first" name="first" data-dojo-type="dijit/form/TextBox" value="Thilakar" />
</div>
<div class="row">
<label>Last Name</label>
<input type="text" id="last" name="last" data-dojo-type="dijit/form/TextBox" value="Kathirvel" />
</div>
<div class="row">
<label>DOB</label>
<input type="text" id="dob" name="dob" data-dojo-type="dijit/form/TextBox" value="07/10/1983"/>
</div>
<div class="row">
<label>City</label>
<input type="text" id="city" name="city" data-dojo-type="dijit/form/TextBox" value="Chennai"/>
</div>
<div class="row">
<label>State</label>
<input type="text" id="state" name="state" data-dojo-type="dijit/form/TextBox" value="Tamilnadu"/>
</div>
<div class="row">
<label>Country</label>
<input type="text" id="country" name="country" data-dojo-type="dijit.form.TextBox" value="India"/>
</div>
<div class="row">
<label>Mobile</label>
<input type="text" id="mobile" name="mobile" data-dojo-type="dijit/form/TextBox" value="9094730388"/>
</div>
<div class="row">
<label> </label>
<button type="submit" value="submit" data-dojo-type="dijit/form/Button" id="submitForm">Submit</button>
</div>
</div>
</form>
<h1>Saved Data</h1>
<div id="gridDiv"></div>
And your javascript to :
require([
"dojo/_base/lang",
"dojo/dom",
"dojo/dom-construct",
"dojo/on",
"dijit/form/Form",
"dijit/form/TextBox",
"dijit/form/Button",
"dojox/grid/DataGrid",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/request",
"dijit/registry",
"dojo/domReady!"
], function(lang, dom, domConstruct, on, Form, TextBox, Button, DataGrid, Memory, ObjectStore, request, registry){
var layout, dataStore, grid, form;
/*set up layout*/
layout = [
{'name': 'First name', 'field': 'first', 'width': '100px'},
{'name': 'Last Name', 'field': 'last', 'width': '100px'},
{'name': 'DOB', 'field': 'dob', 'width': '200px'},
{'name': 'City', 'field': 'city', 'width': '150px'},
{'name': 'State', 'field': 'state', 'width': '150px'},
{'name': 'Country', 'field': 'country', 'width': '150px'},
{'name': 'Mobile', 'field': 'mobile', 'width': '150px'}
];
dataStore = new ObjectStore({ objectStore : new Memory() });
/*create a new grid*/
grid = new DataGrid({
store: dataStore,
query: { id: "*" },
queryOptions: {},
structure: layout
}, "gridDiv");
/*Call startup() to render the grid*/
grid.startup();
form = new Form({
onSubmit : function(evt) {
evt.preventDefault();
var formValue = this.get("value");
console.debug(formValue);
dataStore.newItem(formValue);
}
}, "formContainer");
form.startup();
});