D3选择:动态提交表单? [英] D3 select: submit form dynamically?

问题描述

我正在使用D3.我为输入提供了单击处理代码，以停止表单提交并进行一些验证.然后，如果验证成功，我要提交表单.

I'm using D3. I have click-handling code for an input to stop form submission and do some validation. Then if validation succeeds, I want to submit the form.

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

How do I submit the form programmatically, using D3 selectors? form.submit() says the submit method does not exist. (I'm confident that form is the form element.)

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

I'm also trying form.dispatch('submit') but that does not work either:

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>

推荐答案

在预定义的d3节点事件列表中，没有看到submit事件.这是一种通过使用node()函数选择DOM节点来触发Submit事件的方法. (顺便说一句，我不在这里使用导入)

I don't see a submit event in the predefined list of events for a d3 node. Here's an approach that fires the submit event by selecting the DOM node using node() function. (Btw I'm not using imports here)

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();
})

<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>

我现在可以想到的另一种方法是定义一个自定义事件监听器，以进行提交和调度，该事件监听器仍将在监听器中寻找DOM节点功能. (即，基本上调用<form>的内置submit()函数.

Another approach I can think of as of now is define a custom event listener for submit and dispatch it which would still look for the DOM node in the listener function. (i.e. basically calling <form>'s built-in submit() function.

这篇关于D3选择:动态提交表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！