gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 11:46:29 26 4
gpt4 key购买 nike

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

换句话说:

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

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

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

最佳答案

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

var edited

并在更改/保存表单时触发它

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

});

关于javascript - 在表单元素已被修改且未提交时询问用户何时导航离开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40848585/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com