0

我已经获取(阅读复制和粘贴)一些代码

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) 可能将脚本功能减少到一种形式。

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

将要

4

1 回答 1

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;
});
于 2013-10-25T03:24:35.797 回答