在表单元素已被修改且未提交时询问用户何时导航离开

Question

对于下面的工作示例，我想找到一个明确的解决方案，如何避免表单中的数据已更改但用户可以轻松更改网格中的行并丢失表单中的修改的问题.

我换句话说：

请运行代码片段
点击网格中的第一项
然后更改表格中的内容
然后单击网格中的第二个项目
表格中的修改丢失。

在它丢失之前。我想找到一种方法来询问用户是否要从表单中删除修改。

<!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>

Answer 1

您可以尝试为表单编辑添加一个标志：

var edited

并在 changing/saving 你的表单上触发它

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

以便在标志为真时阻止新行选择

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

});

在表单元素已被修改且未提交时询问用户何时导航离开

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

javascript

forms

dhtmlx