Javascript onblur & onclick 功能多次保存记录答案

【问题标题】：Javascript onblur & onclick function saves record multiple timesJavascript onblur & onclick 功能多次保存记录
【发布时间】：2018-09-28 10:06:19
【问题描述】：

我有一个名为“saveForm()”的 Javascript 函数，我从中将记录保存在数据库中。

我的表单有一个按钮“保存在草稿中”，它将记录保存为草稿模式。在这个按钮上，有onclick事件调用上面的javascript“saveForm()”函数。

现在，我有一个关于自动保存记录的功能，它在表单字段的每个 onblur 事件上调用“saveForm()”函数上方的 javascript。

现在，情况是当我填写其中一个字段并直接单击“保存在草稿中”按钮时，它会将记录多次保存为称为并行的 (onblur 和 onclick) 事件。

点击：

<input type="button" class="btn" id="draftsave" value="Save in draft" onclick="javascript: saveForm(this.form.id, 'draft');" />

模糊：

jQuery(document).delegate(":input[type!='button']", "blur", function() {            
    saveForm(this.form.id, "draft");
});

HTML Form

【问题讨论】：

为什么不离开模糊处理程序并删除点击呢？唯一不会触发的情况是，如果有人直接单击按钮而没有关注其中一个输入，因此您也可以使用 autofocus 属性手动关注第一个输入。
当每个字段都有模糊保存功能时，你为什么还要点击按钮呢？
附带说明，.delegate 已被弃用并且已经有一段时间了，您应该切换到 .on 并交换前两个参数。
你可以拆分逻辑，所以你在数据库中有一些叫做“草稿”的东西，或者类似于保存自动保存值的东西。然后当 saveForm() 被调用时，你可以删除草稿并继续你的表单数据逻辑。
@VinodBhavnani ：实际上我有一个有 30 多个字段的大表单，所以我们在每个 onblur 事件的后台自动保存，而最终用户不知道。用户将只有有关另存为草稿按钮和最终提交按钮的信息

标签： javascript jquery html

【解决方案1】：

您可以执行以下操作，也可以在插入数据库之前进行检查，但在这种情况下，它将进行多次后端调用，最好在进行后端调用时在前端进行检查，因此您可以尝试以下代码看看它是否能解决你的问题：

var clicked;
$("#draftsave").click(function() {
  clicked = true;
});

jQuery(document).delegate(":input[type!='button']", "blur", function() {
  if (!clicked) {
    saveForm(this.form.id, "draft");
  } else {
    //do something
  }
});

【讨论】：

【解决方案2】：

好的，所以如果你想要这个功能（但你可以让你的提交与 onChange 相关联），只需发送一个关于更改事件的布尔值，例如

<input type="text" onChange="someFunction(true);">

现在您可以获取一个全局布尔变量并使用 onChange 布尔参数的值更新其值。

boolean isOnChangeCalled=false;//global variable

function someFunction(isOnchange)
{
this.isOnChangeCalled=isOnchange
}

在 onClick 的情况下，只需检查此布尔值，即 isOnChangeCalled 是否设置为 true，然后执行 onClick 事件，否则提示用户表单已保存

在后端验证 如果数据已经提交并且用户点击提交按钮，那么只需通过比较两个对象来检查数据库中的数据是否已经更新，但这是一个额外的开销并在数据已经存在的情况下返回适当的响应

更新您可以维护表单对象的克隆，在您的 onClick 事件之前，您可以比较两个对象，如果它们相同，只需提示用户相关消息

【讨论】：