Jump to content
  • Advertisement
Sign in to follow this  
plywood

[web] Using DHTML to change forms

This topic is 3163 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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.

Share this post


Link to post
Share on other sites
Advertisement
Quote:
Original post by plywood


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.


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.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!