编辑任何表单字段时显示的Javascript Box
[英]Javascript Box to appear when any form fields have been edited
问题描述
I have a form that has various fields to save to a database. 
我有一个表单，其中包含要保存到数据库的各种字段。 How do I make an alert box appear if any of those fields have been edited? 如果其中任何一个字段已被编辑，如何显示警告框？
Just to be sure, the alert box CANNOT open up IF the fields have not been touched. 只是要确保，如果未触摸字段，则无法打开警报框。
4 个解决方案
解决方案1
1 2011-01-18 09:41:38
create a flag, eg: 创建一个标志，例如：
var formUpdated = false:
wire up an OnBlur or OnChange (depending on the type of form element, like textbox or checkbox) event to every form field 将OnBlur或OnChange（取决于表单元素的类型，例如文本框或复选框）连接到每个表单字段
document.getElementById('#formelementId').onChange = function () {
// check if the value has changed
formUpdated = true;
}
wire up an event to the onsubmit of the form eg: 将事件连接到表单的onsubmit，例如：
document.forms[0].onsubmit = function () {
if(formUpdated){
alert('the form was updated')
}
}
解决方案2
0 2011-01-18 09:28:35
您可以尝试阅读onchange或onblur
解决方案3
0 2011-01-18 09:29:18
Try the OnChange event. 尝试OnChange事件。
following is simple example, 以下是一个简单的示例，
<HTML>
<HEAD>
<TITLE>Example of onChange Event Handler</TITLE>
<SCRIPT>
function valid(input) {
alert("You have changed the value from 10 to " + input);
}
</SCRIPT>
</HEAD>
<BODY>
<H3>Example of onChange Event Handler</H3>
Try changing the value from 10 to something else:<BR>
<FORM>
<INPUT TYPE="text" VALUE="10" onChange="valid(this.value)">
</FORM>
</BODY>
</HTML>
解决方案4
0 已采纳 2011-02-01 06:55:17
We eventually found the solution. 我们最终找到了解决方案。
Insert into the head: 插入头部：
<script language="javascript" type="text/javascript" >
var needToConfirm = false ;
function Submit_Click() {
needToConfirm = false;
}
function setDirtyFlag() {
needToConfirm = true; //Call this function if some changes is made to the web page and requires an alert
// Of-course you could call this is Keypress event of a text box or so...
}
window.onbeforeunload = confirmExit;
function confirmExit() {
if (needToConfirm)
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
</script>
Then within the body, the form looks like this: 然后在体内，形式如下：
<form onunload="confirmExit()">
<p>
<input id="Text1" type="text" value ="jitesh" onchange="setDirtyFlag();" /></p>
<p>
<input id="Checkbox1" type="checkbox" checked="checked" onchange="setDirtyFlag();"/></p>
<p>
<input id="Radio1" checked="checked" name="R1" type="radio" value="V1" onchange="setDirtyFlag();" /></p>
<p>
<input id="Submit" type="button" value="Submit" onclick="Submit_Click();"/></p>
<p>
</p>
</form>
We have to ensure that all fields that are applicable for that confirm box to appear must have the onchange answer of setDirtyFlag(); 我们必须确保所有适用于该确认框的字段都必须具有setDirtyFlag（）的onchange答案；
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.