JQuery更改表单
我正在使用JQuery处理未保存的表单数据中的更改,用户输入页面,编辑数据,尝试离开页面而不保存,并且由于我收到对话框当我更改表格时: JQuery更改表单
上面说:“你想离开这个页面吗?你有没有保存的数据,你想不保存你的更改?
它运作良好,是非常少的代码了很多功能:
<script> $(function() {
// Set the unload message whenever any input element get changed.
$(':input').on('change', function() {
setConfirmUnload(true);
});
// Turn off the unload message whenever a form get submitted properly.
$('form').on('submit', function() {
setConfirmUnload(false);
});
});
function setConfirmUnload(on) {
var message = "Vill du gå vidare utan att spara eventuella ändringar?";
window.onbeforeunload = (on) ? function() { return message; } : null;
}
</script>
相比,我使用的是什么,上面看起来像是好多比我当前的Java的结合上下工夫+使用表单数据是否改变了Java和JS一个隐藏的表单变量,然后测试,以使这是根据我的规格警告JS:
以上是应该的样子 喜欢。事情是,我希望用户能够更改表单并将其提交到页面而不会收到警告,并且我还希望从警告中排除搜索框“fastseach”,以便可以排除组件?如何将对话框的显示更改为我自己的?我自己的对话框得出这样的:
// is this necessary? function doAsk(title, msg, action, command, actionNo, commandNo, search) {
document.getElementById("fastsearch").value = search;
document.actionForm.saveStatus.value = ''
var funcYes = 'doYes()';
var funcNo = 'hideDialog()';
if (title == 'Fel') {
var s = "<div style=\"position:absolute; z-index:1000001; left:15%; top:75%; font-size: 70% \"><input id=\"dialogaterga\" style=\"font-family:calibri; width:70px; float:right; margin-right:35px;\" type=button onclick=\"javascript:"
+ funcNo + "\" value=\"Återgå\" /></div>";
showDialog(title, msg + s);
} else if (title == 'Varning') {
var v = "<div style=\"position:absolute; z-index:1000001; left:15%; top:75%\"><input style=\"font-family:calibri; width:70px\" type=button onclick=\"javascript:"
+ funcNo
+ "\" value=\"Nej\" /></div><div style=\"position:absolute; left:70%; top:75%\"><input id=\"dialogwarnyes\" style=\"font-family:calibri; width:70px\" type=button onclick=\"javascript:doSubmit('"
+ action + "','" + command + "'); \" value=\"Ja\" /></div>";
showDialog(title, msg + v);
} else if (title == 'Information') {
var i = "<div style=\"position:absolute; z-index:1000001; left:70%; top:75%\"><input type=button class=\"dialogbuttonlink\" id=\"dialogstang\" onclick=\"javascript:hideDialog()\" value=\"Stäng\" /></div>";
showDialog(title, msg + i, true);
} else if (title == 'Fel2') {
title = 'Fel';
var s2 = "<div style=\"position:absolute; z-index:1000001; left:15%; top:75%; font-size: 70% \"><input id=\"dialogaterga\" style=\"font-family:calibri; width:70px; float:right; margin-right:35px;\" type=button onclick=\"javascript:"
+ funcNo + "\" value=\"OK\" /></div>";
showDialog(title, msg + s2);
}
initFocus();
}
function showDialog(title, message, autohide) {
//alert("showdialog");
var type = 'prompt';
var dialog;
var dialogheader;
var dialogclose;
var dialogtitle;
var dialogcontent;
var dialogmask;
var link1
var link2
if (!document.getElementById('dialog')) {
dialog = document.createElement('div');
dialog.id = 'dialog';
link2 = document.createElement('a');
link2.id = 'modalFocusLink';
link2.setAttribute('onclick', 'return false');
link2.setAttribute('onblur', 'redirectFocus');
link2.setAttribute('href', '#');
dialog.appendChild(link2);
dialogheader = document.createElement('div');
dialogheader.id = 'dialog-header';
dialogtitle = document.createElement('div');
dialogtitle.id = 'dialog-title';
dialogclose = document.createElement('div');
dialogclose.id = 'dialog-close'
dialogcontent = document.createElement('div');
dialogcontent.id = 'dialog-content';
dialogmask = document.createElement('div');
dialogmask.id = 'dialog-mask';
document.body.appendChild(dialogmask);
document.body.appendChild(dialog);
dialog.appendChild(dialogheader);
dialogheader.appendChild(dialogtitle);
dialogheader.appendChild(dialogclose);
dialog.appendChild(dialogcontent);
dialogclose.setAttribute('onclick', 'hideDialog()');
dialogclose.onclick = hideDialog;
link1 = document.createElement('a');
link1.id = 'modalBlurLink';
link1.setAttribute('onclick', 'return false');
link1.setAttribute('onfocus', 'redirectFocus');
link1.setAttribute('href', '#');
dialog.appendChild(link1);
} else {
dialog = document.getElementById('dialog');
dialogheader = document.getElementById('dialog-header');
dialogtitle = document.getElementById('dialog-title');
dialogclose = document.getElementById('dialog-close');
dialogcontent = document.getElementById('dialog-content');
dialogmask = document.getElementById('dialog-mask');
dialogmask.style.visibility = "visible";
dialog.style.visibility = "visible";
}
dialog.style.opacity = .00;
dialog.style.filter = 'alpha(opacity=0)';
dialog.alpha = 0;
var width = pageWidth();
var height = pageHeight();
var left = leftPosition();
var top = topPosition();
var dialogwidth = dialog.offsetWidth;
var dialogheight = dialog.offsetHeight;
var topposition = 33;// top + (height/3) - (dialogheight/2);
var leftposition = width - dialogwidth - 30; // left + (width/2) -
// (dialogwidth/2);
dialog.style.top = topposition + "px";
dialog.style.left = leftposition + "px";
dialogheader.className = type + "header";
dialogtitle.innerHTML = title;
dialogcontent.className = type;
dialogcontent.innerHTML = message;
var content = document.getElementById(WRAPPER);
dialogmask.style.height = content.offsetHeight + 'px';
if (title == 'Information') {
dialog.alpha = 100;
dialog.style.opacity = (1.0);
dialog.style.filter = 'alpha(opacity=' + 100 + ')';
dialog.style.visibility = "visible";
dialogmask.style.visibility = "hidden";
var fodi = document.getElementById("dialogstang");
fodi.focus();
} else {
if (title == 'Fel') {
var fo = document.getElementById("dialogaterga");
fo.focus();
} else if (title == 'Varning') {
var vafo = document.getElementById("dialogwarnyes");
vafo.focus();
}
dialog.timer = setInterval("fadeDialog(1)", TIMER);
if (autohide) {
dialogclose.style.visibility = "hidden";
// window.setTimeout("hideDialog()", (autohide * 1000));
} else {
dialogclose.style.visibility = "visible";
}
if (title == 'invisible')
dialog.style.visibility = "hidden";
}
}
我想排除可能是因为按“更新”中的“更新”按钮组件不应该激活警告,只留下页。你可以帮我吗?
回答:
没有办法改变浏览远离警告对话框的外观。这是浏览器提供的本地设施。事实上,在Firefox as of version 4你甚至无法通过提供自己的字符串作为返回值自定义消息,而它总是说是这样的:
“这页要求你确认你要离开 - 您输入的数据可能无法保存。“
至于从浏览外卖警告页面上除去各种组件,是不是你已经出现使用,你在你的用户事件禁用onbeforeunload事件扩展技术,简单的事处理程序?例如,当单击更新按钮或搜索按钮时,可以首先确保通过将onbeforeunload事件分配给null或非操作函数来“解除”onbeforeunload事件。顺便说一下,看看你正在做的所有原始DOM构建(所有appendChild()
调用和setAttribute()
调用等),我建议你看看一些客户端模板框架。 Here's a decent-looking list of alternatives。谷歌的Angular.js也很酷,虽然不仅仅是一个模板系统本身。
以上是 JQuery更改表单 的全部内容, 来源链接: utcz.com/qa/259266.html