jquery - 如果字段已填写，则调用表单提交事件

Question

我网站的几页边栏中有一个表格

<form id="test1" name="test1">
 <label for="fname">First Name:</label>
 <input type="text" name="fname" id="fname" />

 <label for="lname">Last Name:</label>
 <input type="text" name="lname" id="lname" />

 <label for="comment">Comment:</label>
 <textarea name="comment" id="comment"><textarea/>

 <input type="submit" />
</form>

我的要求有点奇怪。如果有人填写了表单（即使是部分填写）然后离开当前页面（通过转到其他页面或关闭浏览器选项卡/窗口），则应提交表单。

我正在使用以下 jQuery 代码来实现以下目标：

<script>
$(window).bind('beforeunload', function(){
    $('form').each(function(index) {
    var filled = false;
    $(this).find("input").each(function() {
        if ($(this).val() != "") {
            filled = true;
        }
    });
    if (filled) { this.submit(); }
});
return confirm('test');
});

上面的代码不能正常工作，表单没有被提交。请帮忙。

Answer 1

1. 我认为您应该在提交时使用 $(this) 而不是 this。
2. 也许您还应该检查值比较（例如使用 jQuery 检查输入是否为空）

@amtanay：据我所知，嵌套是正确的......

新代码（未经测试）：

$(window).bind('beforeunload', function(){
  $('form').each(function(index) {
    var filled = false;
    $(this).find("input").each(function() {
      if ($(this).val() != "") {
        filled = true;
      }
    });
    if (filled) { $(this).submit(); }
  });
  return confirm('test');
});

您也可以考虑在找到非空字段后立即提交表单。无需检查所有字段，即使仅部分填写表格也应提交。

Answer 2

变量填充在 $(form).each 内部声明并在其外部使用