D3选择:动态提交表格?

时间:2018-01-23 12:15:09

标签: javascript d3.js

我正在使用D3。我有一个输入的点击处理代码来停止表单提交并进行一些验证。然后,如果验证成功,我想提交表单。

如何使用D3选择器以编程方式提交表单? form.submit()表示提交方法不存在。 (我确信form是表单元素。)

我也在尝试form.dispatch('submit'),但这也不起作用:

import { select as $, event as d3_event } from "d3";
$(el).on("click", function() {
  // prevent form submission
  d3_event.stopPropagation();
  d3_event.preventDefault();
  // later, submit form?
  var form = $(this.parentNode);
  form.dispatch('submit');
}

我的HTML:

<form method="post" action="myaction">
   <button class="create-new btn popup"><i class="fa fa-external-link"></i> Submit</button>
</form>

1 个答案:

答案 0 :(得分:2)

我在submit节点的预定义事件列表中看不到d3事件。这是一种通过使用node()函数选择DOM节点来触发提交事件的方法。 (顺便说一句,我这里没有使用进口商品)

&#13;
&#13;
d3.select('#submit').on('click', function() {
  // prevent form submission
  d3.event.stopPropagation();
  d3.event.preventDefault();
  // later, submit form?
  var form = d3.select(this.parentNode).node();
  form.submit();
})
&#13;
<script src="https://d3js.org/d3.v4.js"></script>

<form id="myform" action="submit-form.php">
Search: <input type='text' name='query'>
<a href="#" id="submit">Submit</a>
</form>
&#13;
&#13;
&#13;

我现在可以想到的另一种方法是为提交和调度定义一个自定义事件监听器,它仍然会查找DOM节点监听器功能。 (即基本上调用<form>的内置submit()函数。