Integration with HTML Form

dhtmlxGrid can be used as a part of an HTML form, so that the grid's data could be sent to the server as a part of form submitting. It can be used to save changes in the grid, if you don't want to use the dataprocessor library.

To use the grid as a part of an HTML form, do the following:

Place the grid's container into an HTML form:

<!DOCTYPE html>
<html>
<head>
    <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
    <script src="../codebase/dhtmlx.js"></script>
</head>
<body>
    <form action="php/form.php" method="post" target="result">         <table width="600">
            <tr>
                <td>
                    <div id="gridbox" style="width:100%; height:270px;"></div>                </td>
            </tr>
        </table>
        <input type="submit">
    </form>
    <script>    //here you will place your JavaScript code
    </script>
</body>
</html>

Initialize dhtmlxGrid in the usual way:

<!DOCTYPE html>
<html>
<head>
    <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
    <script src="../codebase/dhtmlx.js"></script>
</head>
<body>
    <form action="php/form.php" method="post" target="result">         <table width="600">
            <tr>
                <td>
                    <div id="gridbox" style="width:100%; height:270px;"></div>                </td>
            </tr>
        </table>
        <input type="submit">
    </form>
    <script>        mygrid = new dhtmlXGridObject('gridbox');  
        mygrid.setImagePath("./codebase/imgs/");          
        mygrid.setHeader("Book title,Author,Price");
        mygrid.init();
    </script>  
</body>
</html>

Related sample: FORM integration

Note,

As the names of fields contain the gridId you can include multiple grids inside one and the same form tag.
Pay your attention to the fact that only the rows edited by a user will be marked as changed. If you change some value by API calls, such row will not be included in the process of form submitting. You can mark any row in the grid as updated in the following way:
```
grid.cells(i,j).cell.wasChanged=true;
```

Submit Modes

dhtmlxGrid can work in the following modes:

Submitting only the changed rows (the default mode)
Submitting all rows
Submitting ID's of the selected rows
Submitting values of the selected rows

Submitting only changed rows

This is the default mode. In this mode the grid will include only the data of the changed rows in the process of form submitting.

For each changed row a virtual input field will be added - [GRIDID][ROWID][CELLINDEX]

where

GRIDID - the id of the grid's container
ROWID - the id of the row with changed values
CELLINDEX - the index of the cell with the changed value

The value of the field is equal to the cell value.

mygrid = new dhtmlXGridObject('gridbox'); 
mygrid.setImagePath("./codebase/imgs/");          
mygrid.setHeader("Book title,Author,Price");
mygrid.init(); 
mygrid.addRow("row1",["The Rainmaker", "John Grisham", "7.99"]);

For example, if the user changes the price of the added book from 7.99 to 10.99 and submits the form, you will get an input with the following name:

gridbox_row1_3=“10.99”

If any row was added to the grid, all values of this new row will be marked as changed. Additional to it the [GRIDID]_ROWS_ADDED virtual input will be added. It will contain the list of IDs of the added rows (so on the server side it will be possible to separate added and updated rows).
If any row was deleted, the [GRIDID]_ROWS_DELETED virtual input will be added. The same as for the added rows, it will contain the list of IDs of the deleted rows.

Sending the information about the added/deleted rows is enabled by default. To disable it use the submitAddedRows method:

mygrid.submitAddedRows(false);

Submitting all rows

To include into submitting all rows (changed and unchanged), call the submitOnlyChanged method with the 'false' value:

mygrid.submitOnlyChanged(false);

In this mode a virtual input field will be created for each cell in the grid.

Submitting selected rows' IDs

In this mode the grid will create a single virtual field: [GRIDID]_SELECTED. This field will contain the list of rows' IDs that are selected (in the single select mode it will be a single ID). The mode can be enabled by:

To enable the mode, use the submitOnlySelected method:

mygrid.submitOnlySelected(true)
mygrid.submitOnlyRowID(true);

Submitting values of selected rows

This mode works almost in the same way as the default one. It will send only the updated values of the selected rows:

mygrid.submitOnlySelected(true);
mygrid.submitOnlyRowID(false);

Sending form values by direct submit call

If you are sending form's values not by some submit button, but by the direct form.submit() call, the grid won't add its data automatically. To correct this call the parentFormOnSubmit() method before sending form's values to the server:

mygrid.parentFormOnSubmit();
form.submit();