Javascript 使用jquery监控表单字段变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5831065/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jquery to monitor form field changes
提问by Mark
Trying to learn some jquery to implement an autosave feature and need some assistance. I have some code to monitor the status of form fields to see if there has been any change. Everything works, but I need to only monitor the changes in a specific form, not all form inputs on the page. There is a search box and a newsletter form on the same page and when these form fields are changed, they are detected as well, which I need to filter out somehow or better yet, only target the specific form.
试图学习一些 jquery 来实现自动保存功能，需要一些帮助。我有一些代码来监视表单字段的状态以查看是否有任何更改。一切正常，但我只需要监视特定表单中的更改，而不是页面上的所有表单输入。在同一页面上有一个搜索框和一个新闻稿表单，当这些表单字段发生更改时，它们也会被检测到，我需要以某种方式或更好的方式过滤掉它们，只针对特定的表单。
$(function(){
setInterval("CheckDirty()",10000);
$(':input').each(function() {
$(this).data('formValues', $(this).val());
});
});
function CheckDirty()
{
var isDirty = false;
$(':input').each(function () {
if($(this).data('formValues') != $(this).val()) {
isDirty = true;
}
});
if(isDirty == true){
alert("isDirty=" + isDirty);
}
}
回答by JohnP
Just add a class to the form and use it to filter
只需在表单中添加一个类并使用它来过滤
$('.form :input').each(function() {
$(this).data('formValues', $(this).val());
});
EDIT
编辑
Just a suggestion, you can attach the change event directly to the form
只是一个建议，您可以将更改事件直接附加到表单中
live demo here : http://jsfiddle.net/jomanlk/kNx8p/1/
现场演示：http: //jsfiddle.net/jomanlk/kNx8p/1/
<form>
<p><input type='text'></p>
<p><input type='text'></p>
<p><input type='checkbox'></p>
</form>
<p><input type='text'></p>
<div id='log'></div>
$('form :input').change(function(){
$('#log').prepend('<p>Form changed</p>')
});
You can easily improve this by adding a timer and making it save every xx seconds.
您可以通过添加计时器并使其每 xx 秒保存一次来轻松改进这一点。
回答by Mark
var $jq= jQuery.noConflict();
$jq(function() { $jq('#extensibleForm').data('serialize',$jq('#extensibleForm').serialize());
});
function formHasChanged(){
if($jq('#extensibleForm').serialize()!=$jq('#extensibleForm').data('serialize')){
alert("Data Changed....");
return (false);
}
return true;
}
回答by Diego
Here you can see it working: http://jsfiddle.net/paska/zNE2C/
在这里你可以看到它的工作：http: //jsfiddle.net/paska/zNE2C/
$(function(){
setInterval(function() {
$("#myForm").checkDirty();
},10000);
$("#myForm :input").each(function() {
$(this).data('formValues', $(this).val());
});
$.fn.checkDirty = function() {
var isDirty = false;
$(this).find(':input').each(function () {
if($(this).data('formValues') != $(this).val()) {
isDirty = true;
}
});
if(isDirty == true){
alert("isDirty=" + isDirty);
}
};
});
回答by Patricia
what's your form's id?
你的表格id是什么？
you just need to make your selector more specific :)
你只需要让你的选择器更具体:)
instead of $(':input').each(function() {
代替 $(':input').each(function() {
use
用
$('#yourFormId').find(':input').each(function() {
回答by David Magalh?es
I think you can use a class to select the type of input you want.
我认为你可以使用一个类来选择你想要的输入类型。
<input class="savethis" ... />
Then in jQuery use this.
然后在 jQuery 中使用它。
$(':input .savethis').each(function() { ...
回答by naiquevin
You can specify an id attribute (say theForm) to your form element and then select only those input fields inside it.
您可以theForm为表单元素指定一个 id 属性（比如），然后只选择其中的那些输入字段。
then try selecting with
然后尝试选择
$(':input', '#theForm')
回答by wdm
You can use the .change()function and then use $(this)to denote you want to work with just the field that is actively being changed.
您可以使用该.change()函数，然后使用$(this)表示您只想使用正在积极更改的字段。
$('#myForm input[type="text"]').change(function() {
$(this)...
});
Edit: #myForm is your form ID so you can target a specific form. You can even specify just type="text" fields within that form, as in my example.
编辑：#myForm 是您的表单 ID，因此您可以针对特定表单。您甚至可以在该表单中仅指定 type="text" 字段，如我的示例所示。
