在提交时检查表单字段更改

时间:2014-08-09 00:37:29

标签: javascript jquery html forms

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

我正在尝试以下代码。即使文本未更改,我也会不断更改文本。我不确定这里有什么问题?

以下是我尝试过的代码:

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

我的html表单。

<form action="" method="POST" name="myform" div id="container">
<div class="thefield">   
<input type="text" class="hint" id="name1" onkeypress='validate1(event)' value="" onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }" onblur="if (this.value == '') { this.className = 'hint'; this.value = '';}" size="25" name="name1" maxlength="30"/>   <input type="text" onkeypress='validate(event)' class="hint" id="number1" value=""  onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }" onblur="if (this.value == '') { this.className = 'hint'; this.value = '';}" size="20" name="number1" maxlength="10"/></div>
</div>

<input type="submit" value="Submit"  name="submit" id="submit" class="button1" />
</form>

1 个答案:

答案 0 :(得分: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有一个&#34;脚本&#34;致力于JavaScript的小组。不要将您的脚本放在HTML面板中。更新了小提琴:http://jsfiddle.net/prankol57/xxf08dbz/