检测表单是否已更改，脚本不工作

Question

我正在尝试使用以下脚本来检测我的表单中是否有任何字段已更改（编辑：检测我的表单字段的值是否已更改），并在发生更改时提醒用户。否则，显示另一个js框。

虽然它没有检测到任何更改，并且从未显示确认框。我做错了什么？

$('#eventMedia').click(function() {
        var form_changed = false;

        $('#tribe-events > form').on('keyup change', 'input, select, textarea', function(){
            form_changed = true;
        });

        if (form_changed == true) {
            confirm('You have unsaved changes! Click Cancel to save your changes before continuing.');
        } else {
            $('#eventMediaBox').show();
            $('#blackFade').show();
        }
    });

Answer 1

您仅在单击 #eventMedia 按钮后才开始注册 keyup 和 change 事件，这可能不是所需的顺序。

改为：

// Set the boolean flag variable first
var form_changed = false;

// On `input change` events - set flag to truthy
$('#tribe-events > form').on('input change', 'input, select, textarea', function(){
    form_changed = true;
});

// Showtime!
$('#eventMedia').click(function() {
    if (form_changed) {
        alert('You have unsaved changes! Save your changes before continuing.');
    } else {
        $('#eventMediaBox, #blackFade').show();
    }
});

请注意 "input" 事件（在 .on('input change' 中）还将涵盖用户使用鼠标等粘贴内容的情况...

此外，不要忘记有时在代码中将 form_changed 重置为 false...

现在回想起您的 UI...我有一个问题。 "Why?"。是的，如果用户没有更改表单中的任何内容，为什么要显示 "SAVE" 或任何 #eventMedia 呢？我的意思是，如果用户做了任何更改，就没有理由做任何事情 - 对吗？

我想这应该足够了：

> button is disabled="true"
> (User makes changes?) on `input change` make enabled.

检测表单是否已更改，脚本不工作

Detecting if form has changed, script not working

javascript

forms

jquery

conditional