Jquery：如果表单没有变化，则禁用按钮

Posted 2023-05-09

【中文标题】Jquery：如果表单没有变化，则禁用按钮

【英文标题】：Jquery: Disable button if there is no change in form

【发布时间】：2018-01-01 08:35:45

【问题描述】：

目标：如果表单没有变化，则禁用按钮。

实际上我已经有了这个函数的工作代码，唯一的问题是如果我的表单中有input[type=file]，我就无法让它工作。如果我只更改文件，按钮仍然被禁用。

你能帮我吗？

这是我到目前为止所做的

$('#formEdit').each(function()
  $(this).data('serialized', $(this).serialize());
).on('change input', function()
  $(this).find('input:submit').attr('disabled', $(this).serialize() == $(this).data('serialized'));
);

谢谢。

【问题讨论】：

为什么不从禁用按钮开始，只在表单完成到足以提交时才启用它？

我就是这么做的

【参考方案1】：

.serialize() 方法不适用于 file 输入类型，因此您可以使用 new FormData('form'); 以下是您的用例的工作代码：

  $('#formEdit').each(function() 
    var form_data = new FormData('form');
    $(this).data('serialized', form_data);
).on('change input', function() 
    var form_data1 = new FormData('form');
    $(this).find('input:submit').attr('disabled', form_data1 == $(this).data('serialized'));
);

请参考jquery doc 了解更多关于 .serialize() 方法的信息。

【讨论】：

这可行，但没有检测到更改。我认为它只像 onkeyup 一样起作用。一旦按钮被启用它不会禁用它只会检测到动作）

【参考方案2】：

实现这一点非常复杂，您必须使用上一个上传文件的哈希值，如果用户选择另一个文件，您必须上传该文件以检索哈希值进行比较（使用一些 edge-api使客户端的哈希计算可能不一致）。因此，您可以确定（理论上它会猜测，因为 2 个不同的文件发生哈希冲突的可能性非常小），如果文件相同。

允许再次上传同一个文件并在服务器端简单地交换它会更简单（并且不会让用户感到困惑）。

html

<form id="form">
    <input type="file" name="foo" />
    <input type="text" name="bar" />
    <button type="submit" id="btn">submit</button>
</form>

js

$(function()
    $('#btn').attr('disabled', true);
    $('#form :input').on('change', function()
        $('#btn').removeAttr('disabled');
    );
);