JQuery 提交函数的泛化

Question

在我的 Web 应用程序中，我有许多表单，当然每个表单都有不同的 id。然后在我的 JavaScript 文件中，我为 submit 事件编写了一个自定义处理程序：

$('#form-name').submit(function(event) {
    event.preventDefault();
    const formData = new FormData($('#form-name')[0]);
    const json = JSON.stringify(Object.fromEntries(formData));
    ws.send(json);
});

我想避免为 each 表单编写上面的代码。作为第一步，我可以将它包装在另一个函数中，如下所示：

function custom_submit(form, event) {
    event.preventDefault();
    const formData = new FormData($(form)[0]);
    const json = JSON.stringify(Object.fromEntries(formData));
    ws.send(json);
}

然后使用：

$('#form-name').submit(custom_submit('#form-name`, event));

但这不是有效的语法。在任何情况下，我仍然需要将每个表单“连接”到自定义函数，写入其名称的两倍。

有没有一种方法可以匹配所有具有特定前缀的表单，并将它们全部连接到我的自定义提交函数，同时传递上述表单 id 和 event 变量？前缀示例：

form-ws-*

Answer 1

$('form').on('submit', function(event) {
    event.preventDefault();
    const formData = new FormData(this);
    const json = JSON.stringify(Object.fromEntries(formData));
    ws.send(json);
});

将处理页面上的所有表单

Answer 2

最好的解决方案是创建一个 jQuery 插件，然后将其附加到所需的表单（在此您可以提供任何 jquery 选择器）。

用法：

$("<SELECTOR>").submitify();

(function($) {
  $.fn.submitify = function() {
    var $this = $(this);
    $this.on('submit', function(event) {
      event.preventDefault();
      const formData = new FormData(this);
      const json = JSON.stringify(Object.fromEntries(formData));
      console.log(json);
      //ws.send(json);
    });
    return this;
  };
}(jQuery));

$(document).ready(function() {
  $('[id^=form-ws-]').submitify();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <form id="form-ws-f1" class="col-md-4">
      <input type="text" class="form-control" name="t1" id="t1" />
      <input type="submit" value="submit" />
    </form>
    <form id="form-ws-f2" class="col-md-4">
      <input type="text" class="form-control" name="t2" id="t2" />
      <input type="submit" value="submit" />
    </form>
    <form id="form-ws-f3" class="frm col-md-4">
      <input type="text" class="form-control" name="t3" id="t4" />
      <input type="submit" value="submit" />
    </form>
  </div>
</div>

JsFiddle 在这里：https://jsfiddle.net/nitinjs/650guLhr/15/

JQuery 提交函数的泛化

Generalization of JQuery submit function

javascript

jquery

forms

form-submit