   [web] Using DHTML to change forms
  I'm trying to make a fancy forms section on my contact page. Basically (and I am summarizing for simplicity), the user first chooses the reason why they are contacting me (e.g. Request a Quote, General Inquiry, Previous Sale, etc.).Then, depending on their choice from that <select> control/listbox, I want the underlying form to change, because (and the reasons are complicated), I want to collect and require different information from them depending on why they're trying to contact me.The easiest way I can think to do this is to start with something that looks like this:<div id="contact-form-section"><form name="contact-form" method="" etc...></form>... and leave the internals of the form empty/blank. Then, via DHTML, depending on what the user selects as the "contact reason", I can use innerHTML to change the controls inside the "contact-form" form.The problem is that the set method for innerHTML expects a string. If one of my forms is huge (and they all are!), then I'm going to have to translate all my form HTML into a JS string, which just seems like bad business and feels like I'm asking for trouble.It would be nice to be able to, say, place each form in a separate div and basically make it disabled/hidden until the user selects it. The forms could maybe overlap so they are all located in the same area, so which ever form is enabled/visible is the one the user can interact with.But seeing that this must be a common problem, I wanted to pose this here and see if there was a better way of doing things.   
Quote:Original post by plywoodIt would be nice to be able to, say, place each form in a separate div and basically make it disabled/hidden until the user selects it. The forms could maybe overlap so they are all located in the same area, so which ever form is enabled/visible is the one the user can interact with.This is the most common solution to the type of problem you're having. You can modify the visibility of div elements via the elements' style property.If you manipulate the "display" attribute, you don't even need to overlap the divs; they will automatically collapse as if they weren't actually there. In contrast, the "visibility" attribute will still preserve the space of the element if you use it to hide said element.   ;  Thanks Nik02! Worked like a charm!   