0

我的表格如下所示：

<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");
});
4

6 回答 6

1

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

您的保存按钮的 ID 为save。

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

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

还值得注意的是，该change事件仅在失去焦点时在文本框上触发。我不确定这对你来说是否有问题，但你可能会更好地使用keyup它。

于 2013-04-18T12:08:30.547 回答
1

看看这个工作的 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');
     }
});

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

于 2013-04-18T12:03:30.470 回答
1

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

于 2013-04-18T13:00:58.943 回答
0

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

正如 CBroe 在评论中指出的那样，您可以使用defaultValueor获取每个元素的原始值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()事件的。这将在按下键时触发文本输入功能，并立即隐藏或显示保存按钮。

这是一个小提琴

于 2013-04-18T12:23:40.140 回答
0

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

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

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

于 2013-04-18T12:02:00.927 回答
0

试试这个

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

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

于 2013-04-18T12:04:58.373 回答