Javascript 如何检测表单feild change live以显示或隐藏提交按钮

我的表格如下所示：

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

---

它给了你一个错误吗？因为它应该这样做，因为您在#接受之后缺少一个报价。 我觉得你的选择器很奇怪，试试看

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

---

由于没有名为myform的元素，其状态为：input

它是否给了您一个错误？因为它应该这样做，因为您在#接受之后缺少一个报价。 我觉得你的选择器很奇怪，试试看

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

由于没有名为myform的元素，其状态为：input

只有当所有字段都有“value”属性时，这才有效，但您可以修改它以补偿缺少的值。

查看

只有当所有字段都有“value”属性时，这才有效，但您可以修改它以补偿缺少的值。

试试这个

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

在没有“接受”id的表单中。请确保您删除了接受id的类。

试试这个

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

---

表单中没有“accept”id。请确保移除类以接受id。

您引用的元素id为

accept

，但HTML中不存在该元素

“保存”按钮的ID为

save

下面是一个JSFIDLE，它在值更改时显示按钮：

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

---

还值得注意的是，

change

事件仅在失去焦点时才会在文本框上触发。我不确定这是否是您的问题，但您最好使用

keyup

。

您指的是ID为

accept

的元素，但HTML中不存在该元素

“保存”按钮的ID为

save

下面是一个JSFIDLE，它在值更改时显示按钮：

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

还值得注意的是，

change

事件仅在失去焦点时才会在文本框上触发。我不确定这是否是您的问题，但您最好使用

键控

。

因为您需要将原始值与当前值进行比较，所以必须将原始值存储在某个位置

正如CBroe在评论中指出的，您可以使用

defaultValue

或

defaultChecked

获取每个元素的原始值：

下面检查每个输入以查看值是否已更改，并返回已更改的元素的

长度

（数量）。然后，您可以使用它来显示/隐藏“保存”按钮

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

事件的。当按下一个键时，这将触发文本输入功能，并立即隐藏或显示保存按钮

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

正如CBroe在评论中指出的，您可以使用

defaultValue

或

defaultChecked

获取每个元素的原始值：

下面检查每个输入以查看值是否已更改，并返回已更改的元素的

长度

（数量）。然后，您可以使用它来显示/隐藏“保存”按钮

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

事件的。当按下一个键时，这将触发文本输入功能，并立即隐藏或显示保存按钮

---

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

编辑：从原始文件中删除了一些调试/显示操作代码

// 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;
}

---

正在运行的压缩版本示例：

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

编辑：从原始文件中删除了一些调试/显示操作代码

// 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;
}

---

紧凑版本的示例：在JSFIDLE中，您可以在“输入”和“复选框”上侦听

change（）

，但复选框不是一个元素，它也是一个输入输出元素；）您的代码几乎可以正常工作。但是，我有一些预先填充的值。也就是说，地址在本质上是有价值的。示例州：纽约。现在，如果我只是让newyorks，jst附加一个，它应该立即显示save cahnges按钮，然后再附加“newyorks”两个。如果我再回到纽约，它应该会再次隐藏按钮。@Lasang你如何输入预填充值？是不是像

一样？@Lasang：你所描述的就是我在答案末尾提到的-

更改
事件只在焦点丢失时触发，而不是在每个角色更改时触发。您将需要
keyup
。为了将当前值与原始值进行比较，您需要更多的代码（我在回答中也提到了）。@Billy Mathews，实际上我的表单是模板，我用一些主干模型填充它们。所以，我试图让它像推特个人资料标签编辑。如果表单从模型中获取值。所以，如果我点击其中任何一个并尝试编辑，我会尝试立即检测并显示保存按钮。同样，如果反斜杠或以任何方式使值变为原始值，它应该再次隐藏显示的保存按钮。在JSFIDLE中，您可以在“输入”和“复选框”上侦听
change（）
，但复选框不是一个元素，它也是一个输入输出元素；）您的代码几乎可以正常工作。但是，我有一些预先填充的值。也就是说，地址在本质上是有价值的。示例州：newy