當我在javascript中使用form.reset（）時，Javascript檢查當前數據是否等於它的原始數據

Question

。該功能將重置表單到其原始狀態。例如：

<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/