Dojo - Need to add form value into datagrid after click on submit button

StackOverflow https://stackoverflow.com/questions/17427835

Question

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>&nbsp;</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

Was it helpful?

Solution

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>&nbsp;</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();
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top