Javascript检查表单的当前数据是否等于其原始数据

Javascript check the form current data is equal to its original data

本文关键字：是否 数据 于其 原始数据 检查 检查表 表单 Javascript      更新时间：2023-09-26

当我在javascript中使用form.reset（）时。函数会将表单重置为其原始状态。例如：

<form id="myForm">
  First name: <input type="text" name="fname" value="??"><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="button" onclick="myFunction()" value="Reset form">
</form>
<script>
function myFunction() {
    var form = document.getElementById("myForm");
    form.reset();
}
</script>

当我运行此代码时，第一个输入字段将重置为"？？"（这是原始值）。javascript是如何获得这个值的？我可以访问它吗？

我正在建立一个网站，需要检查用户是否更改了表单的任何值。如果没有任何更改，我想阻止用户提交表单。这就是为什么我问有没有什么方法可以检查某个字段的当前值是否等于其原始值。

输入元素的默认值是通过在元素本身中输入value="default value"来设置的，就像您在第一个元素中所做的那样。重置窗体会将输入元素返回到其默认值。

若要访问元素的默认值，您需要访问defaultValue属性。

JavaScript:

document.getElementById('firstName').defaultValue;

jQuery（因为您在问题中标记了jQuery）：

$('#firstName')[0].defaultValue;

提交表单时，可以轻松地将当前表单值与默认表单值进行比较。

下面是一个利用jQuery实现这一点的示例：

HTML

<form id="myForm">
    <label for="firstName">First name:</label>
    <input id="firstName" type="text" name="fname" value="defaultval1" />
    <br />
    <label for="lastName">Last name:</label>
    <input id="lastName" type="text" name="lname" value="defaultval2" />
    <br />
    <br />
    <input id="btnSubmit" type="button" value="Submit" />
    <input id="btnReset" type="button" value="Reset" />
</form>

JavaScript

function hasAnythingChanged() {
    var hasChanged = false;
    $('#myForm :input[type=text]').each(function () {
        if (this.defaultValue != this.value) {
            hasChanged = true;
        }
    });
    return hasChanged;
}
$(function () {
    $('#btnReset').on('click', function () {
        var form = document.getElementById("myForm");
        form.reset();
    });
    $('#btnSubmit').on('click', function () {
        event.preventDefault();
        if (hasAnythingChanged()) {
            alert('Submitting at least one changed value!');
            // Do your submit action here
        } else {
            alert('Please change at least one value.')
            return false;
        }
    });
});

演示：http://jsfiddle.net/BenjaminRay/jLvh98br/

相关文章：