The requirements were fairly simple since this was just an experiment on my part. I wanted the form to submit via an AJAX call to a BIRT report server, display in the same page, and have the ability to remove the form, all using the DOM to manipulate the appearance on the page.
The form itself has two date input components. Rather than reinvent the wheel, I leveraged an existing HTML calendar component from here. This did everything I needed and more. Instructions for setting it up are available in the package itself.
As far as hiding the form, created a DIV tag surrounding the form element and labeled it reportForm. I then used the following function to remove the form:
var formElement = document.getElementById("reportForm");
var parentElement = formElement.parentNode;
I assigned this function to a HTML Button component on the onClick event. In the function I could have given the form a name, and used the function documents. GetElementsByTagName, however if there is more that I want to hide than just the form, a DIV tag will group these together, so this was the method that I chose.
This in itself, isn’t really exciting. However, when I cover the AJAX call, that will be a little bit more interesting.