如何实时检测表单字段更改以显示或隐藏提交按钮

Question

我的表格如下所示：

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

我的这个表单显示为预填充。那就是我的状态被检查了，name 的值为 Anyname，city 的值为 Anycity，State 的值为 AnyState。基本上，当表单出现时，保存更改表单是隐藏的。但是，如果用户单击任何字段，只需附加任何字符或删除字符，它应该会实时检测更改，任何立即设置的保存更改按钮显示，即删除类隐藏。如果再次删除附加字符并将其设置为原始字符，则应再次隐藏保存更改按钮。

基本上是实时检测表单字段变化并实时隐藏或显示按钮。

我看过几个与之相关的问题，但没有一个符合我的要求。

我试过了

 $('myform:input, myform:checkbox').change(function() {
      $("#save").removeClass("hide");
});

Answer 1

您指的是 ID 为 accept 的元素，但它在您的 HTML 中不存在。

您的保存按钮的 ID 为 save。

这是一个 jsfiddle，它在值更改时显示按钮：http://jsfiddle.net/Town/tUAeh/

为了在字段返回到之前的值时隐藏按钮，您需要存储初始值并将其与当前值进行比较，以确定是否实际发生了更改。

还值得注意的是，change 事件仅在失去焦点时在文本框上触发。我不确定这是否对您有问题，但您最好使用keyup。

Answer 2

首先您必须保存当前值，然后在发生任何更改时进行比较。我使用 .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/

Answer 3

看看this working jsFiddle

$('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');
     }
});

这仅在所有字段都具有“值”属性时才有效，但您可以更改它以补偿缺失值。

Answer 4

由于您需要将原始值与当前值进行比较，因此您必须将原始值存储在某个地方。

正如 CBroe 在 cmets 中指出的，您可以使用 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() 事件的。这将在按下某个键时触发文本输入功能，并立即隐藏或显示保存按钮。

Here's a fiddle

Answer 5

试试这个

$('input[type=text] input[type=checkbox]').change(function(){
    $('#save').removeClass('hide'); 
});

在表单中没有“接受”id。确保你删除类以接受 id。

Answer 6

它给你一个错误吗？因为它应该这样做，因为您在#accept 之后缺少引号。 而且我觉得你的选择器很奇怪，试试

$('#myform input[type=text], #myform [type=checkbox]').change();

由于没有状态为 :input 的名为 myform 的元素