How to POST the data manually in dhtmlxForm?

How to POST the grid data(which is added using type: “container”) and how to handle it? Please give me an example. Code below is not posting the grid data. Please Correct me. Thanks.

<!--pro_form.html-->
<!DOCTYPE html>
<!--pro-->
<html>
<head>
	<title>FORM integration</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<script>
		var myGrid;
		function doOnLoad() {
			
			initialize_form();
			myGrid = new dhtmlXGridObject(myForm.getContainer("gridbox"));
			//myGrid = new dhtmlXGridObject('gridbox2');
			myGrid.setImagePath("../../../codebase/imgs/");
			myGrid.setHeader("Sales, Book Title, Author");
			myGrid.setInitWidths("150,150,*");
			myGrid.setColAlign("left,left,left");
			myGrid.setColTypes("dyn,txt,ed");
			myGrid.setColSorting("str,str,str");
			myGrid.submitOnlyChanged(false);
			
			myGrid.init();
			myGrid.load("../common/grid.xml");
			
			
		}
		


		function initialize_form() {
			formData = [

				{type: "settings", position: "label-left", labelWidth: 100, inputWidth: 120},
				//{type: "fieldset", label: "Item", inputWidth: "auto", list:[
				{type: "block",blockOffset:2, width: 450, list:[	

					{type: "hidden",labelWidth:120, label: "Book Category ID", name: "id", value: "", inputWidth:50},
					{type: "input",labelWidth:120, label: "Category No", name: "catno",validate: "NotEmpty", value: "", required:true, inputWidth:50},
					{type: "input",labelWidth:120, label: "Category", name: "cat",validate: "NotEmpty", value: "", required:true, inputWidth:50},
					{type: "container", name: "gridbox", label: "", inputWidth: 1230, inputHeight: 200}
					]}
			];		
			myForm = new dhtmlXForm("div_frm", formData);
}

		function save_all() {
			myGrid.parentFormOnSubmit();
			myForm.send("pro_form.php");
}		
</script>
</head>
<body onload="doOnLoad()">
	<form action="pro_form.php" method="post" target="result">

        
        <table width="600">
			<tr>
				<td>
                	<div id="div_frm" style="width:100%; height:100px; background-color:white;"></div>
					<div id="gridbox2" style="width:100%; height:300px; background-color:white;"></div>
                    
				</td>
			</tr>
		</table>
		<input type="button" value="Save" onClick="save_all();">
        <input type="submit"">
	</form>
	<iframe id="result" name="result" width="596px" height="120"></iframe>
</body>
</html>

<?php
//pro_form.php

require_once('../../../global/config.php');
$con = mysql_connect('localhost', 'root', 'root');/**/

$code=$_POST['catno'];   // posting from form
$book=$_POST["gridbox_1_1"]; // grid data
//$book=$_POST["gridbox2_1_1"]; // grid data from manual form submit
 
	$sql = 	"INSERT INTO test(frm_data,grid_data)
			VALUES ('".$code."','".$book."')";
	mysql_query($sql);
	$res='saved';

	$res=mysql_error()."- dm_err";

print_r($res);


?>