I have been trying to find out how to clear an HTML form in a Bootstrap modal I made, and I primarily use D3js for object manipulation. However, as I have been trying to reset the values of the form using D3 (such as d3.select('#my-text-input').attr('value', '') or d3.select('#my-text-input').attr('value', null)), the values still remain. I found that there is the .reset() function that comes default in HTML, but every time I try to use some variation of d3.select('#my-form').reset() I get an error saying that this is not a D3 function.
This leads me to my bigger question: is there a way to use the built-in HTML methods with a D3 selection?
As a side note, I discovered an answer to my own question, which I have posted in case some poor soul has the same problem as me. However, I am very open to other tips, comments, or suggestions that fall in this general topic.
Luckily, it looks like there is a work around.
If you add .node() after your D3 selection, you can use HTML built-in methods. For example, this was how I was able to use .reset() in my own code:
d3.select('#my-form').node().reset()
or also:
let form = d3.select('#my-form').node()
form.addEventListener('hidden.bs.modal', (e) => {
form.reset()
}
'hidden.bs.modal' is an event listener added by Bootstrap 5. There is not a lot of info in the Github docs on selection.node() from D3, but there is a little snippet on the d3-selection repository.
Any other pointers are welcome. I am always trying to be a better developer. I just thought this might help someone else out there.