Question

我需要在刷新页面或关闭页面之前检测到值的变化，我编写的函数将修剪表单值并连接到先前的值

function formValue(object) {
        var formValue = "";
        $(object).find("input,select,radio,checkbox,textarea").each(function(){        
            formValue += $(this).val().trim() + "&";
        });
        return formValue.substring(0, formValue.length - 1);
    }
}

我会将值存储在oldValue变量页面上。unloadEvent它会将旧值与新表单值进行比较

var addEvent = window.attachEvent || window.addEventListener;
var unloadEvent = window.attachEvent ? 'onbeforeunload' : 'beforeunload';

addEvent(unloadEvent, function (e) {

    if(oldvalue!==formValue($("form")){
    retun "Data will lost , Do you wish to continue ?"
    }
});

它运行良好，但我怀疑，这种标准方式检查表单值是否已更改或可用其他任何最佳方式来检测表单值更改？

我需要停止页面重新加载或仅在值已更改时退出。我的意思是，如果我将输入框值从名称更改为名字，并再次更改其名称。现在它不应该从价值变化中看待

Answer 1

您可以检查表单数据更改是否更可靠，也很容易

var formChangeFlag = false;
$('form').on('change', ':input', function(e){ 
 //':input' selector get all form fields even textarea, input, or select
  formChangeFlag = true;
});

$( window ).unload(function() {
  if(formChangeFlag === true){
     return "Data will lost , Do you wish to continue ?";
   }
});

评论更新：如果您想将表单数据与默认值进行比较，请将默认表单值存储在data-*属性中，并比较字段更改事件的值。

＆＃13;

var formChangeFlag = false;
_$Forminputs = $('form :input:not([type=submit])');
_$Forminputs.on('change', function(e) {
  //':input' selector get all form fields even textarea, input, or select
  formChangeFlag = false;
  //alert(_$Forminputs.length);
  for (var i = 0; i < _$Forminputs.length; i++) {
    if ($(_$Forminputs[i]).val() != $(_$Forminputs[i]).data('default')) {
      formChangeFlag = true;
      break;
    }
  }
});

$('input[type=submit]').on('click', function() {
  if (formChangeFlag === true) {
    alert('form values changed')
  } else {
    alert('form values not changed')
  }
  return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" type="post">
  <select name="sirnmae" data-default="Mr.">
    <option value="Mr." selected>Mr.</option>
    <option value="Miss">Miss</option>
  </select>
  <input type="text" data-default="ger" value="ger" name="fname" />
  <input type="text" value="last name" data-default="last name" />
  <input type="submit" value="post form" />
</form>

＆＃13;

Answer 2

有一个onchange（）函数，一旦用户离开输入框就会返回该值。这适用于多个HTML元素。只需从元素ex：

中获取值

{{1}}

或者注册一个事件监听器。这应该很容易完成你的任务。

Answer 3

您可以将 defaultValue 与所有表单控件的当前值进行比较。唯一的难点是选择元素，对于那些您可以检查所选索引是否为-1（未选择选项），0（选择第一个选项，几乎每个浏览器中的默认值）或所选选项是否已选择的那些元素/ em> attribute。

以下是：

function formChanged(form) { return [].every.call(form.elements, function(control) { // If a select's selected index is -1 (no option selected), // 0 (first option selected) or set to an option that is // selected by default, it hasn't changed if (control.tagName.toLowerCase() == 'select') { var idx = control.selectedIndex; return idx == -1 || idx == 0 || control.options[idx].defaultSelected; } // Otherwise, check current value with default value return control.value == control.defaultValue; }); }

它不适用于默认情况下选择了多个选项的多重选择（非常罕见），但可以在其他任何地方使用。

检测表单值的标准方法已更改？

3 个答案: