javascript - 提交时检查表单字段更改

Question

我有一个 html 表单，其中有几个文本框和一个提交按钮。我想检查文本框的值是否已更改 - 如果是，请将其提交到数据库，否则只需重定向到不同的页面。

我正在尝试以下代码。即使文本没有更改，我也会不断收到文本更改警报。我不确定这里出了什么问题？

这是我尝试过的代码:

http://jsfiddle.net/6bSX6/828/

还有我的 html 表单。

<form action="" method="POST" name="myform" id="container">  
    <input type="text" id="name1" name="name1" value="" 
        onkeypress='validate1(event)' 
        onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }" 
        onblur="if (this.value == '') {this.className = 'hint'; this.value = '';}" 
        size="25" maxlength="30"/>   
    <input type="text" id="number1" name="number1" value="" 
        onkeypress='validate(event)' 
        onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }"
        onblur="if (this.value == '') {this.className = 'hint'; this.value = '';}" 
        size="20" maxlength="10"/>
    <input type="submit" value="Submit"  name="submit" id="submit" class="button1" />
</form>
<script>
    function validate(evt){
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode( key );
        var regex = /[0-9]|\./;
        if( !regex.test(key) ) {
            theEvent.returnValue = false;
            if(theEvent.preventDefault) theEvent.preventDefault();
        }
    }
    function validate1(evt){
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode( key );
        var regex = /[a-zA-Z]|\./;
        if( !regex.test(key) ) {
            theEvent.returnValue = false;
            if(theEvent.preventDefault) theEvent.preventDefault();
        }
    }
</script>

Answer 1

我认为您想要做的是跟踪是否有任何文本框发生了更改。您可以使用 $elem.data 来完成此操作。当然，如果您只有一个表单元素，则可以只使用变量，因为无论如何我们只存储一件事。

代码:

// We keep track of the form to check if it changes
// Initially, none of the forms have changed
$("form").data("changed", false);
// When it changes, set "changed" to true
$("form").on("change", function() {
    $(this).data("changed", true);
});
$('form').on('submit', function () {
    if ($(this).data("changed")) {
        alert("Something changed!");
        // Reset variable
        $(this).data("changed", false);
    } else {
        alert("Nothing changed!");
    }
    // Do whatever you want here
    // You don't have to prevent submission
    return false;
});

旁注:JSFiddle 有一个专用于 JavaScript 的“脚本”面板。不要将脚本放在 HTML 面板中。更新 fiddle :http://jsfiddle.net/prankol57/xxf08dbz/