繁体   English   中英

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

[英]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");
});

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

仅当所有字段都具有“值”属性时,此方法才有效,但是您可以对其进行更改以补偿缺失的值。

您所指的是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的评论中指出的那样,您可以使用defaultValuedefaultChecked获取每个元素的原始值:

以下检查每个输入以查看值是否已更改,并返回具有该值的元素的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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM