Question

我已经找到（读取复制并粘贴）了一些代码

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）立即触发事件某些数据被更改填充“数据已更改”的div，而不是等待页面卸载。

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

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

威尔

Answer 1

http://jsfiddle.net/colbycallahan/9rxLx/

检测表单上输入的更改并使用更改的输入值填充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;
});

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

1 个答案: