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

Question

当我在 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如何获取这个值呢？我可以访问它吗？

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

Answer 1

输入元素的默认值是通过在元素本身中输入 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/