D3 select: submit form dynamically?

问题

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.

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

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

My HTML:

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

回答1:

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>

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.

来源：https://stackoverflow.com/questions/48401496/d3-select-submit-form-dynamically

标签

javascript

d3.js