Ask user when navigating away while form elements have been modified and not submitted

For the working example below, I would like to find a clear solution how to avoid the problem that data has been changed in the form but the user can easily change the row in the grid and lose the modification in the form.

I other words:

Please run the code snippets
click on the first item in the grid
then change the content in the form
and click on the second item in the grid
and the modification in the form is lost.

Before it's lost. I would like to find a way to ask the user if he want's to loose the modification from the form.

<!DOCTYPE html>
<html>
<head>
	<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="//cdn.dhtmlx.com/edge/dhtmlx.css"/>
	<script src="//cdn.dhtmlx.com/edge/dhtmlx.js"></script>
	<script>
		function doOnFormInit() {
            var mygrid = new dhtmlXGridObject("mygrid_container");
            mygrid.setHeader("title,Author,Price");
            mygrid.setColumnIds("title,author,price");
            mygrid.init();
            data={
              rows:[
                { id:1, data: ["A Time to Kill", "John Grisham", "100"]},
                { id:2, data: ["Blood and Smoke", "Stephen King", "1000"]},
                { id:3, data: ["The Rainmaker", "John Grisham", "-200"]}
              ]
            };
			mygrid.parse(data,"json");
            formData = [
              {type:"fieldset", list:[
                {type:"input", name:"title", label:"Name",   labelWidth:50,width:150},
                {type:"input", name:"author",label:"Author", labelWidth:50,width:150},
                {type:"input", name:"price", label:"Price",  labelWidth:50,width:150},
                {type:"button", name:"save",  value:"Submit", offsetTop:18}
              ]}
            ];                    
            var myform = new dhtmlXForm("myform_container",formData);
            myform.bind(mygrid);          
            myform.attachEvent("onButtonClick", function(id){
              myform.save();
            });
		}      
	</script>
</head>
<body onload="doOnFormInit()">
  <div id="mygrid_container" style="width:300px;height:150px;float:left;"></div>
  <div id="myform_container" style="width:250px;height:150px;"></div>   
</body>
</html>

Solution

You may try to add a flag for the form edit:

var edited

and trigger it on changing/saving your form

myForm.attachEvent("onChange", function (name, value){
  edited=true
});
myform.attachEvent("onButtonClick", function(id){
  myform.save();
  edited=false
});

so that the new row selecting can be blocked if the flag is true

myGrid.attachEvent("onBeforeSelect", function(new_row,old_row,new_col_index){
if (edited){
    show_notification()
    return false // block the row selection
}
else
    return true //allow the new row selection

});