识别表单更改并使用jQuery触发div内容更改

我已经获得（阅读、复制和粘贴）一些代码

var catcher = function() {
  var changed = false;
  $('form').each(function() {
if ($(this).data('initialForm') != $(this).serialize()) {
  changed = true;
  $(this).addClass('changed');
} else {
  $(this).removeClass('changed');
}
});
if (changed) {
return 'One or more forms on this page have changed.  Are you sure you want to leave this page?';
  }
};

$(function() {
$('form').each(function() {
$(this).data('initialForm', $(this).serialize());
}).submit(function(e) {
var formEl = this;
var changed = false;
$('form').each(function() {
  if (this != formEl && $(this).data('initialForm') != $(this).serialize()) {
    changed = true;
    $(this).addClass('changed');
  } else {
    $(this).removeClass('changed');
   }
   });
  if (changed && !confirm('Another form on this page has been changed. Are you sure you want to continue with this form submission?')) {
e.preventDefault();
} else {
$(window).unbind('beforeunload', catcher);
}
});
$(window).bind('beforeunload', catcher);
});

现在…这段代码处理多个表单。。。并且巧妙地识别出所有离开页面的方法，警告可能存在未保存的数据

我一直在努力破解密码，但我无能为力

我想做的是

a） 立即触发事件某些数据发生更改，使用“data changed”填充div，而不是等待页面卸载

b） 可能会将脚本功能减少到一种形式

感激地接受任何帮助、建议或想法

将

检测表单上输入的更改，并用更改的输入值填写div：

$('#myForm').on('change', 'input, select', function(){
    $('#div_id').text($(this).val());    
});

更改表单的操作、重置表单并阻止其提交：

$('#myForm').on('submit', function(event){
    event.preventDefault();
    alert($(this).serialize());
    alert('form action is: ' + $(this).attr('action'));

    $('#myForm')[0].reset();
    $('#myForm').attr('action', 'Your_New_Url');

    return false;
});

---

当然，这不会适用于所有表单元素，如下拉菜单、收音机等。是的，很抱歉，我忘了将select添加到事件侦听器中。看看我为你做的小提琴。干杯。：）