Question

所以这很难搜索，请继续阅读，你会明白为什么。

这是我的目标 - 检测表单字段是否已更改，以便我可以启用“保存”按钮。好的，所以这很容易。这就是问题。如果用户在加载表单时将输入更改回ORIGINAL值，我想再次禁用保存按钮。

快速示例;

页面加载 - 输入包含值“red”
用户将其更改为“蓝色”
script detects change from original value, enable the save button
用户然后决定他喜欢“红色”，因此将输入更改回“红色”
script sees the change is same as original value, disable the save button

我知道这可能有点肛门。但是如果输入回到起始值，我的客户不明白为什么表单仍然需要保存。

当然，整个事情需要处理许多输入。

Answer 1

我认为您已经在“更改”中注册了一些onChange回调。输入字段的事件。在该回调中，您希望能够检查新值是否已恢复为原始值。（如果是这样，您想要再次禁用保存按钮）。缺少的是对原始值的一些引用。

那你什么时候才知道初始值是什么？我猜你在某个时候用以前保存的数据填充输入字段。那时，你有关于＆＃34;原始＆＃34;的信息。价值是。

现在，您希望为每个输入字段设置专门的onChange回调，其中每个回调都可以访问原始值。

您可以这样做的一种方法是使用更高阶的函数。返回新函数的函数。这会怎么样？

function createOnChangeCallback(originalValue) {
   // returning a function!
   return function(changeEvent) {
      // this is the callback that will run for one
      // of the input elements. Note that the "originalValue"
      // is in scope
      const newValue = changeEvent.target.value;
      const hasGoneBackToOriginalValue = newValue == originalValue;
      if(hasGoneBackToOriginalValue) {
         // disable the submit button
      }
   }
};

然后，当您填充特定字段时，您将执行类似

的操作

// get a reference to the input element
const $myInput = $('#myInput');
// give the input field it's first value ("populate")
$myInput.val(originalValue);
// create a specialized callback with access to the original value
$myInput.click( createOnChangeCallback(originalValue) )

Answer 2

多一点背景。该应用程序使用.Net和MVC技术构建。

发生大多数操作的主视图页面都有一个包含页面的表作业请求记录。每条记录都有一个＆＃34;编辑＆＃34;像这样的链接。

<a href="/Job/_JobEdit?id=10079" class="btnJobEdit">Edit</a>

我使用jquery来捕获文档级别的事件，因为使用DataTables.net库动态加载和呈现表。

这是我如何抓住＆＃34;点击＆＃34; ＆＃34; .btnJobEdit＆＃34;的事件链接（作业表的每一行都有一个）。还有＆＃34;变化＆＃34;和＆＃34;提交＆＃34; ＆＃34;＃frmJobEdit＆＃34;的事件，在上述＆＃34;编辑＆＃34;之前，此表格不存在。单击链接。

$(document)
  .on('click', '.btnEditJob', event_click_btnEditJob)
  .on('change', '#frmJobEdit', function () {
    // .valid() is a jQuery validation library
    $(this).find(':submit').attr('disabled', !$(this).valid()); 
    $(this).find(':reset').attr('disabled', false);
  })
  .on('submit', '#frmJobEdit', event_submit_frmJobEdit)

现在我们已经加载了初始页面。

当用户点击＆＃34;编辑＆＃34;按钮用于记录函数event_click_btnEditJob（）运行。

这是简单的功能

function event_click_btnEditJob() {
  event.preventDefault();

  $.get($(this).attr('href'), function (response) { 
    // the response will be a full html form returned as a partial view 
    // by the _JobEdit method of the JobController

    // I then set this into a BootStrap modal dialog and show the modal
    $('#modal_JobEdit .modal-body')
      .html(response)
      .modal('show') 
  }); 
}

当用户点击＆＃34;保存更改＆＃34;按钮函数event_submit_frmJobEdit再次通过对JobController的ajax调用处理提交，该调用再次返回带有表单的部分视图，并且新更改的数据准备好进行另一次编辑，以及现在有一条消息指示提交操作成功或失败。

这个现有的过程是干净，稳定和简单的。介绍切换＆＃34; Save＆＃34;的这一要求。从开发角度来看，基于用户编辑的按钮是不合需要的。此时此项目的客户代表已同意。＆＃34; 培训用户！＆＃34;

Answer 3

试试这个：

$("#your-client-form").submit(function(e){
    e.preventDefault(); //prevents for reloading the page.
});

Answer 4

以下是完成与您想要做的事情类似的完整示例。

// Retrieves the initial state of the form as a JSON object
// data-field-name determines the JSON field name
const getForm = () => {
  return $("#my-form");
};

const getFormState = (form) => {
  let originalFormState = {};
  form.children(":input").each(function() {
    const fieldName = $(this).data("fieldName");
    const fieldValue = $(this).val();
    if (fieldName) {
      originalFormState[fieldName] = fieldValue;
    }
  });
  return originalFormState;
};

const setSubmitButtonState = (form, isChanged) => {
  form.children("#submit-form").prop("disabled", isChanged);
};

const checkAndHandleFormState = (form, originalFormState) => {
  const currentFormState = getFormState(form);
  let isChanged = false;
  for (const field of Object.keys(originalFormState)) {
    if (originalFormState[field] !== currentFormState[field]) {
      isChanged = true;
      break;
    }
  }
  setSubmitButtonState(form, isChanged);
};

const addListenersToFormInputFields = (form, originalFormState) => {
  form.children(":input").each(function() {
    if ($(this).data("fieldName")) {
      $(this).change(function() {
        const fieldName = $(this).data("fieldName");
        const fieldValue = $(this).val();
        checkAndHandleFormState(getForm(), originalFormState);
      });
    }
  });
};

$(document).ready(function() {
  const form = getForm();
  addListenersToFormInputFields(form, getFormState(form));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form">
  <input id="name" data-field-name="name" type="text" value="John" />
  <input id="age" data-field-name="age" type="text" value="12" />
  <input id="submit-form" type="submit" />
</form>

HTML表单输入已更改，但随后更改回原始值

4 个答案: