JavaScript判斷表單元素value值是否被修改過
本章節分享一段程式碼例項,它實現了判斷表單元素的value值是否被修改的功能。
具有一定實用性,比如當表單的內容被修改的時候,這時不小心關閉了頁面,給出一個提示,詢問使用者是否儲存表單的修改,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> function formIsDirty(form) { for (var index = 0; index < form.elements.length; index++) { var element = form.elements[index]; 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; } window.onload=function(){ var obt=document.getElementById("bt"); var odiv=document.getElementById("show"); obt.onclick=function(){ odiv.innerHTML=formIsDirty(document.myform) } } </script> </head> <body> <div id="show"></div> <form name="myform"> <input type="text" name="username" value="softwhy.com"><br> <input type="text" name="address" value="青島市南區"><br> <select name="kecheng"> <option value="css教程" selected="">css教程</option> <option value="div教程">div教程</option> </select> </form> <input type="button" id="bt" value="檢視效果"/> </body> </html>
上面的程式碼實現了判斷功能,下面就介紹一下它的實現過程。
程式碼註釋:
(1).function formIsDirty(form) {},引數是一個表單物件,如果改動則返回true,否則返回false。
(2).for (var index = 0; index < form.elements.length; index++) {},遍歷form下每一個表單元素。
(3).var element = form.elements[index],獲取指定索引的表單元素。
(4).var type = element.type,獲取表單元素的型別。
(5).if (type == "checkbox" || type == "radio") {
if (element.checked != element.defaultChecked) {
return true;
}
}如果是核取方塊或者單選按鈕,那就判斷當前的選中情況是否和預設選中是否一致,下面的判斷原理也是如此。
相關文章
- javascript獲取所有表單元素的value值JavaScript
- 通過模板判斷Value是否為指標指標
- JavaScript判斷元素是否具有required屬性JavaScriptUI
- JavaScript 判斷元素是否獲得焦點JavaScript
- JavaScript判斷陣列是否包含指定元素JavaScript陣列
- javascript如何判斷元素是否具有指定屬性JavaScript
- javascript判斷元素是否具有指定樣式類JavaScript
- 41:判斷元素是否存在
- javascript如何判斷一個頁面元素是否存在JavaScript
- 如何利用jQuery判斷一個元素是否被隱藏jQuery
- jquery判斷按鈕是否被點選過jQuery
- JavaScript如何判斷指定元素是否具有class樣式類JavaScript
- jQuery 判斷元素是否隱藏jQuery
- jQuery如何判斷元素是否存在jQuery
- js判斷option項中是否含有具有給定value值的項JS
- JavaScript 通過 type 屬性值獲取表單元素JavaScript
- Javascript 判斷物件是否相等JavaScript物件
- 判斷元素是否在視口和元素相交
- javascript如何判斷指定型別元素是否具有指定屬性JavaScript型別
- JavaScript判斷元素是否在瀏覽器可視區域JavaScript瀏覽器
- 判斷物件值是否為空物件
- 判斷元素是否有重疊部分
- jQuery 判斷頁面元素是否存在jQuery
- jQuery如何判斷單選按鈕是否被選中jQuery
- javascript判斷變數是否是數值型別程式碼JavaScript變數型別
- JavaScript 判斷是否是陣列JavaScript陣列
- JavaScript 判斷函式是否存在JavaScript函式
- JavaScript判斷字串是否為空JavaScript字串
- 如何判斷Javascript物件是否存在JavaScript物件
- jQuery如何判斷一個元素是否存在jQuery
- 如何利用jQuery判斷指定元素是否存在jQuery
- 判斷DOM元素是否含有子節點
- 如何判斷一個元素是否隱藏
- javascript如何判斷checkbox核取方塊是否被選中JavaScript
- postgresql如何判斷表是否存在SQL
- 判斷excel檔案是否被開啟Excel
- 判斷一個物件是否為空物件,判斷一個物件中是否有空值物件
- javascript 判斷括號是否配對。JavaScript