[英]how to detect form feild change live to show or hide submit button
我的表格如下所示:
<form id="myform">
<fieldset>
<div class="row-fluid">
<label class="checkbox"><input type="checkbox" id="status" name="status">Active</label>
</div>
<div class="row-fluid">
<label>Address</label>
<input type="text" id="city" name="city" />
<input type="text" id="state" name="state" />
</div>
<a id="save" class="btn btn-primary hide">save changes</a>
<a id="close" class="btn">Close</a>
</fieldset>
</form>
我的这个表格似乎已预先填写。 那是我的状态被检查,名称具有值Anyname,城市具有值Anycity,州具有值AnyState。 基本上,保存更改表单在表单出现时是隐藏的。 但是,如果用户单击任何字段,只需追加任何字符或删除字符,它都应该立即检测到设置立即生效的保存更改按钮以显示更改,即删除类隐藏。 如果再次删除附加字符并将其设置为原始字符,则应再次隐藏保存更改按钮。
基本上,它是实时检测表单字段更改以及实时隐藏或显示按钮。
我看了几个与此有关的问题,但没有一个满足我的要求。
我试过了
$('myform:input, myform:checkbox').change(function() {
$("#save").removeClass("hide");
});
$('input', '#myform').keyup(function() {
if ( $(this).val() != $(this).attr('value') ){
$("#save").removeClass("hide");
}else{
donthide = false;
$('input', '#myform').each(function(){
console.log($(this).val() + ' ?= ' + $(this).attr('value'));
if ( $(this).val() != $(this).attr('value') ){
donthide = true;
}
});
console.log(donthide);
if (!donthide) $('#save').addClass('hide');
}
});
仅当所有字段都具有“值”属性时,此方法才有效,但是您可以对其进行更改以补偿缺失的值。
您所指的是ID为accept
的元素,但是HTML中不存在该元素。
您的保存按钮的ID为save
。
这是一个jsfiddle,它在更改值时显示按钮: http : //jsfiddle.net/Town/tUAeh/
为了在字段返回到其先前值时隐藏按钮,您需要存储初始值并将其与当前值进行比较,以便确定是否确实发生了更改。
还值得注意的是,仅当失去焦点时, change
事件才会在文本框上触发。 我不确定这是否对您有问题,但是您最好使用keyup
。
首先,您必须保存当前值,然后在发生任何更改时进行比较。 我使用.data存储原始文件。
编辑:从原始内容中删除了一些调试/显示操作代码。
// save original values
$(':input').each(function () {
var setvalue = getCurrentValue($(this));
$(this).data('originalvalue', setvalue);
});
// check them if anything changes
$(':input').change(function () {
if (checkvalues()) {
$("#save").addClass("hide");
} else {
$("#save").removeClass("hide");
}
});
//return current value for checking/setting
function getCurrentValue(checkMe) {
var currentValue = '';
if (checkMe.is(':checkbox')) {
currentValue = checkMe.prop('checked');
} else {
currentValue = checkMe.val();
}
return currentValue;
}
// if any do not match original, return false
function checkvalues() {
var original = true;
$(':input').each(function () {
var currentValue = getCurrentValue($(this));
var originalValue = $(this).data('originalvalue');
if (currentValue !== originalValue) {
original = false;
}
});
return original;
}
编辑:上面的更紧凑的版本:
$(':input').each(function () {
$(this).data('originalvalue', getCurrentValue($(this)));
});
$('#myform').on('change', ':input', function () {
if (checkvalues()) {
$("#save").addClass("hide");
} else {
$("#save").removeClass("hide");
}
});
function getCurrentValue(checkMe) {
return checkMe.is(':checkbox') ? checkMe.prop('checked') : checkMe.val();
}
function checkvalues() {
var original = true;
$(':input').each(function () {
if (getCurrentValue($(this)) !== $(this).data('originalvalue')) {
original = false;
}
});
return original;
}
运行中的压缩版本示例: http : //jsfiddle.net/gRXDN/
它给你一个错误吗? 因为它应该这样做,因为您在#accept之后缺少引号。 而且我认为您的选择器很奇怪,请尝试
$('#myform input[type=text], #myform [type=checkbox]').change();
由于没有名为myform的元素,其状态为:input
试试这个
$('input[type=text] input[type=checkbox]').change(function(){
$('#save').removeClass('hide');
});
格式为“接受” ID。请确保您删除类以接受ID。
由于需要将原始值与当前值进行比较,因此必须将原始值存储在某个位置。
正如CBroe的评论中指出的那样,您可以使用defaultValue
或defaultChecked
获取每个元素的原始值:
以下检查每个输入以查看值是否已更改,并返回具有该值的元素的length
(数量)。 然后,您可以使用它来显示/隐藏保存按钮。
var $inputs = $('#myform :input');
$inputs.on('keyup change', function() {
var dataChanged = $inputs.filter(function() {
if ($(this).is(':checkbox')) {
var originalValue = this.defaultChecked;
var currentValue = this.checked;
} else {
var originalValue = this.defaultValue;
var currentValue = this.value;
}
return originalValue != currentValue;
}).length;
if (dataChanged == 0) {
$('#save').addClass('hide')
} else {
$('#save').removeClass('hide');
}
});
请注意,我是如何附加keyup()
事件以及change()
事件的。 当按下一个键时,这将触发文本输入功能,并立即隐藏或显示保存按钮。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.