dojodojox.grid.datagriddojox.grid

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


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


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();
    });