根据表单输入长度触发事件

Question

我试图在表单长度发生变化时自动保存表单。下面是我的代码。正确记录了初始表单长度，当我使用表单时变量 $("form input").length 确实发生了变化，但未触发 if 语句中的块。

有人知道这是为什么吗？

var formLength = $("form input").length;
console.log("the current formLength is" + formLength);

$(document).ready(function() {
  if ($("form input").length > formLength) {
    setTimeout(autoSaveForm, 10000);

    formLength = $("form input").length;

    console.log("the updated formLength is" + formLength);
  }
});

更新：Florian完美解决了这个问题。我有一个新问题的更新。我的表格是在 rails 中使用 Cocoon gem 的嵌套表格。每当嵌套中添加一个 child 时，就会加载一个 datepicker.js。

然而，日期选择器仅在设置的时间间隔后加载。

下面是我的新代码。有什么想法吗？

var formLength = $("form input").length; console.log("the current formLength is : " + formLength);

$(document).ready(function() {
  $.each($('[data-behaviour~=datepicker]'), function(index, element) {
    if (element.value) {
      var dsplit = element.value.split("-");
      var d =new Date(dsplit[0],dsplit[1]-1,dsplit[2]);
      element.value = d;
    }
    new Pikaday({ field: element });
  });

  setInterval(function() {
    if ($("form input").length > formLength) {
      console.log("the updated formLength is : " + formLength);
      formLength = $("form input").length;

      var uuid = $("#uuid").html();
      $.ajax({
        type: "POST",
        url: "trailers/" + uuid + "/save-draft",
        data: $("form").serialize(),
        success: function() {
        }
      });
    } else {
      console.log("Nop. (" + $("form input").length + ")");
    }
  }, 30000);
});

Answer 1

不太确定你要干什么，但这是一个有效的例子：

var formLength = $("form input").val().length;
console.log("the current formLength is : " + formLength);

$(document).ready(function() {
    setInterval(function(){ 
      if ($("form input").val().length > formLength) {
        formLength = $("form input").length;
        console.log("the updated formLength is" + formLength);
        //setTimeout(autoSaveForm, 10000); //auto save!
      } else {
        console.log("Nop. (" + $("form input").val().length + ")");   
      }    
    }, 3000);
});

document.ready 函数中的所有内容只会在页面加载后执行，因此如果您想进行定期检查，您需要一个 setInterval（定期执行）。

您还可以在文本输入中添加偶数，例如：

$("form input").bind("change paste keyup", function() {
   //but your code inside
});

根据表单输入长度触发事件

Trigger Event based on Form Input Length

forms

jquery

ruby-on-rails

jquery-events