JavaScript判斷用戶是否對表單進行了修改的方法
本文實例講述了JavaScript判斷用戶是否對表單進行了修改的方法。分享給大家供大家參考。具體分析如下:
這段JS代碼可以判斷出用戶是否對表單內(nèi)容進行了修改,如果修改了表單,并退出瀏覽器,則會提醒用戶是否要保存表單的內(nèi)容,是非常有用的代碼。
function formIsDirty(form) {
for (var i = 0; i < form.elements.length; i++) {
var element = form.elements[i];
var type = element.type;
if (type == "checkbox" || type == "radio") {
if (element.checked != element.defaultChecked) {
return true;
}
}
else if (type == "hidden" || type == "password" ||
type == "text" || type == "textarea") {
if (element.value != element.defaultValue) {
return true;
}
}
else if (type == "select-one" || type == "select-multiple") {
for (var j = 0; j < element.options.length; j++) {
if (element.options[j].selected !=
element.options[j].defaultSelected) {
return true;
}
}
}
}
return false;
}
使用示例:當(dāng)退出瀏覽器是,如果用戶修改了表單,則提醒用戶是否要保存
window.onbeforeunload = function(e) {
e = e || window.event;
if (formIsDirty(document.forms["someForm"])) {
// For IE and Firefox
if (e) {
e.returnValue = "You have unsaved changes.";
}
// For Safari
return "You have unsaved changes.";
}
};
下面是一個完整的范例代碼
<form name="fooForm">
<input type="text" name="t"><br>
<input type="text" name="2" value="default"><br>
<select name="some">
<option value="fooo" selected="">foo</option>
<option value="bar">bar</option>
</select><br>
</form>
<button onclick="alert(formIsDirty(document.fooForm))">Click to check if Form is Dirty</button>
<br>
<script>
function formIsDirty(form) {
for (var i = 0; i < form.elements.length; i++) {
var element = form.elements[i];
var type = element.type;
if (type == "checkbox" || type == "radio") {
if (element.checked != element.defaultChecked) {
return true;
}
}
else if (type == "hidden" || type == "password" ||
type == "text" || type == "textarea") {
if (element.value != element.defaultValue) {
return true;
}
}
else if (type == "select-one" || type == "select-multiple") {
for (var j = 0; j < element.options.length; j++) {
if (element.options[j].selected !=
element.options[j].defaultSelected) {
return true;
}
}
}
}
return false;
}
</script>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
初學(xué)js插入節(jié)點appendChild insertBefore使用方法
由于可見insertBefore()方法的特性是在已有的子節(jié)點前面插入新的節(jié)點但是兩種情況結(jié)合起來發(fā)現(xiàn)insertBefore()方法插入節(jié)點,是可以在子節(jié)點列表的任意位置。2011-07-07
跟我學(xué)習(xí)javascript的浮點數(shù)精度
跟我學(xué)習(xí)javascript的浮點數(shù)精度,帶大家真正的理解JavaScript的浮點數(shù),提醒大家當(dāng)心浮點運算中的精度陷阱,需要的朋友可以參考下2015-11-11
關(guān)于JS判斷圖片是否加載完成且獲取圖片寬度的方法
本篇文章小編為大家介紹,關(guān)于JS判斷圖片是否加載完成且獲取圖片寬度的方法,有需要的朋友可以參考一下2013-04-04
javascript中的event loop事件循環(huán)詳解

