This article describes the method of JavaScript to determine whether a user has modified the form. Share it for your reference. The specific analysis is as follows:
This JS code can determine whether the user has modified the form content. If the form is modified and exited the browser, it will remind the user whether to save the form content. It is a very useful code.
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;}Example of usage: When exiting the browser, if the user modified the form, the user will be reminded whether to save it.
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."; }};Here is a complete example code
The code copy is as follows: Click on below button. Now change some values in form and click the button again.
<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>
I hope this article will be helpful to everyone's JavaScript programming.