best method of conditional form fields

884 Posts

sinbad Reply #1, 15 years, 1 month ago

Anyone mind sharing his way of making forms with conditional options, for example if user select option A the next input field will be input_a and so on.

I

☆ A M B ☆
2,475 Posts

Everett Reply #2, 15 years, 1 month ago

Man, that would be the holy grail... my experience with this is that these types of forms are always a lot of hard work, with lots of sweaty Javascript...

Hosting stuff: http://fireproofsocks.com/
Coding stuff: http://craftsmancoding.com/
Blog stuff: http://tipsfor.us/

884 Posts

sinbad Reply #3, 15 years, 1 month ago

yeah I thought so. I’m trying few things from Dynamic drive but each script has it limitations.
I was hoping there is a simple way such a mootools/jquery libs that willl make things easier.

☆ A M B ☆
2,475 Posts

Everett Reply #4, 15 years, 1 month ago

I’m sure there are libraries that make the journey easier... but of course, you have to sweat through learning the library. More power to the people out there who are good at this stuff, because I know it’s not easy.

Post back if you find something that helps you.

Hosting stuff: http://fireproofsocks.com/
Coding stuff: http://craftsmancoding.com/
Blog stuff: http://tipsfor.us/

1,611 Posts

ZAP Reply #5, 15 years, 1 month ago

You could use jQuery and Ajax to do this nicely:
http://plugins.jquery.com/project/selectchain

"Things are not what they appear to be; nor are they otherwise." - Buddha

"Well, gee, Buddha - that wasn't very helpful..." - ZAP

Useful MODx links: documentation | wiki | forum guidelines | bugs & requests | info you should include with your post | commercial support options

☆ A M B ☆
2,213 Posts

AMDbuilder Reply #6, 15 years, 1 month ago

Any ideas on how this could be done with mootools? I am trying to improve the speed of one of my larger sites by reducing external files (css, js, images, etc.). I have been using this: http://www.dynamicdrive.com/dynamicindex16/formdependency.htm but its very bulky ,but it adds another JS file and loads of additional code to get the forms working correctly.

Thanks
AMDbuilder

Patrick | Server Wrangler
About Me: Website | Tweets | MODX Hosting

884 Posts

sinbad Reply #7, 15 years, 1 month ago

yeah that’s the latest script I tried to. it’s working but it’s cumbersome. I wonder how phx will handle this

29 Posts

steveb2 Reply #8, 15 years, 1 month ago

I’ve had good success with just a simple onClick javascript event that finds an undisplayed div id and changes the display to block. Here the simple code I use for radio’s. I have the onclick show the div radio displaying the div and the other input hiding it again. I’m sure there’s a way to do this with select inputs too, but I’ve never been able to work it out.

 <div class="row">
			<label for="room_type">Type of Room</label>
			<input id="room_type" name="room_type" class="element radio" type="radio" value="indiv" checked="checked" onClick="if(this.checked){document.getElementById('sharing_hide').style.display='none';}" />
								<label class="choice">Individual</label>
			  <input id="room_type" name="room_type" class="element radio" type="radio" value="dbl" onClick="if(this.checked){document.getElementById('sharing_hide').style.display='block';}else{document.getElementById('sharing_hide').style.display='none';}">
			  <label class="choice" >Double</label>
			</div>

            <div id="sharing_hide" style="display:none"><div class="row">
			<label for="sharing">Sharing Room With:</label>
			<input type="text" class="text" name="sharing">
		</div>
</div>

Maybe there’s a better way? anyone else use anything else?

1 Posts

jmueller0823 Reply #9, 14 years, 10 months ago

What would similar code look like if using a List/Menu instead of Radio Buttons?

example:
Selecting a specific selection in the drop down would cause the div to display.

Thanks much.
Jim

884 Posts

sinbad Reply #10, 14 years, 10 months ago

I ended up using this
http://www.formassembly.com/wForms/

it’s pretty straight forward to config it but seems overload if you can use 4-5 lines of code instead.
anyway, it does what I need, like what jmueller0823 talking about.