<![CDATA[ best method of conditional form fields - My Forums]]> https://forums.modx.com/thread/?thread=19284 <![CDATA[Re: best method of conditional form fields]]> https://forums.modx.com/thread/19284/best-method-of-conditional-form-fields?page=2#dis-post-106807
jQuery makes it a breeze to show/hide fields selectively based on user input. If your form markup is well-written with lots of hooks it’s actually pretty fun to see just how much flexibility you have.

Here’s a sample from a previous project (I’ve just inlined the jQuery and simplified the form but you get the idea).

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
	$(document).ready(function() {
		$("#location").change(function() {
			if($("#yes-location").is(":checked")) {
				$("#for-state").show();
			} else {
				$("#for-state").hide();
			}
		});
		
		// only fires when state is visible (can't click otherwise)
		$("#state").change(function() {
			// show/hide other fields as needed
		});
	});
/* ]]> */
</script>

<form id="location-form" action="#" method="post">
	<fieldset>
		<dl id="location" class="yes-or-no-question">
			<dt>Do you live in the US? <span class="required">*</span></dt>
				<dd id="for-yes-location" class="has-input-type-radio">
					<label for="yes-location">
						<span class="label-title">Yes<span class="accessibility">, I live in the US.</span></span>
						<input type="radio" class="type-radio" name="location" value="YES" id="yes-location" />
					</label>
				</dd><!-- /#for-yes-location.has-input-type-radio -->
				<dd id="for-no-location" class="has-input-type-radio">
					<label for="no-location">
						<span class="label-title">No<span class="accessibility">, I do not live in the US.</span></span>
						<input type="radio" class="type-radio" name="location" value="NO" id="no-location" />
					</label>
				</dd><!-- /#for-no-location.has-input-type-radio -->
		</dl><!-- /#location -->
		
		<label for="state" id="for-state" class="has-select">
			<span class="label-title">State: <span class="required">*</span></span>
			<select name="state" id="state">
				<option value="">Select your state</option>
				<option value="AL">Alabama</option>
			</select><!-- /#state -->
		</label><!-- /#for-state.has-select -->
	</fieldset>
	
	<ul class="actions">
		<li><input type="submit" class="type-submit" value="Submit" name="submit" /></li>
		<li class="loading"></li>
	</ul><!-- /.actions -->
<form><!-- /#location-form -->


... as you can see I really get granular with class names (since IE doesn’t support attribute selectors) but it also lets me really hook into a lot of stuff with my jQuery. Fortunately TextMate bundles make it easy to get so picky. smiley]]>
markhurd Jun 10, 2009, 10:46 AM https://forums.modx.com/thread/19284/best-method-of-conditional-form-fields?page=2#dis-post-106807
<![CDATA[Re: best method of conditional form fields]]> https://forums.modx.com/thread/19284/best-method-of-conditional-form-fields?page=2#dis-post-106806
All you would need to do is add a single line of Javascript to the select element and set the value of the option elements to the id of the elements you would like to display when the option is selected.

	
<!-- Set the value of the option elements to the id of the corresponding elements you want to show when selected -->
<select name="test" onchange="for(x in this.childNodes){ if( this.childNodes[x].value != null ){document.getElementById(this.childNodes[x].value).style.display = 'none';}} document.getElementById(this.value).style.display = 'block';">
	<option value="div_1">Test Option 1</option>
	<option value="div_2">Test Option 2</option>
	<option value="div_3">Test Option 3</option>
	<option value="div_4">Test Option 4</option>
	<option value="div_5">Test Option 5</option>
</select>
	<br />
<!-- Set up the elements you want to toggle based upon your selection, style="display: none;" by default -->
<div id="div_1" style="display: none">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore... </div>
<div id="div_2" style="display: none">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="div_3" style="display: none">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
<div id="div_4" style="display: none">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="div_5" style="display: none">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium...</div>



Steven]]>
swsnow Jun 10, 2009, 08:00 AM https://forums.modx.com/thread/19284/best-method-of-conditional-form-fields?page=2#dis-post-106806
<![CDATA[Re: best method of conditional form fields]]> https://forums.modx.com/thread/19284/best-method-of-conditional-form-fields#dis-post-106805 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.

]]>
sinbad Jun 08, 2009, 03:22 PM https://forums.modx.com/thread/19284/best-method-of-conditional-form-fields#dis-post-106805
<![CDATA[Re: best method of conditional form fields]]> https://forums.modx.com/thread/19284/best-method-of-conditional-form-fields#dis-post-106804
example:
Selecting a specific selection in the drop down would cause the div to display.

Thanks much.
Jim]]>
jmueller0823 Jun 08, 2009, 11:21 AM https://forums.modx.com/thread/19284/best-method-of-conditional-form-fields#dis-post-106804
<![CDATA[Re: best method of conditional form fields]]> https://forums.modx.com/thread/19284/best-method-of-conditional-form-fields#dis-post-106803
 <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?]]>
steveb2 Mar 20, 2009, 05:01 PM https://forums.modx.com/thread/19284/best-method-of-conditional-form-fields#dis-post-106803
<![CDATA[Re: best method of conditional form fields]]> https://forums.modx.com/thread/19284/best-method-of-conditional-form-fields#dis-post-106802 ]]> sinbad Feb 24, 2009, 03:40 PM https://forums.modx.com/thread/19284/best-method-of-conditional-form-fields#dis-post-106802 <![CDATA[Re: best method of conditional form fields]]> https://forums.modx.com/thread/19284/best-method-of-conditional-form-fields#dis-post-106801 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]]>
AMDbuilder Feb 24, 2009, 01:51 PM https://forums.modx.com/thread/19284/best-method-of-conditional-form-fields#dis-post-106801
<![CDATA[Re: best method of conditional form fields]]> https://forums.modx.com/thread/19284/best-method-of-conditional-form-fields#dis-post-106800 http://plugins.jquery.com/project/selectchain
]]>
ZAP Feb 24, 2009, 11:30 AM https://forums.modx.com/thread/19284/best-method-of-conditional-form-fields#dis-post-106800
<![CDATA[Re: best method of conditional form fields]]> https://forums.modx.com/thread/19284/best-method-of-conditional-form-fields#dis-post-106799
Post back if you find something that helps you.]]>
Everettg_99 Feb 24, 2009, 10:40 AM https://forums.modx.com/thread/19284/best-method-of-conditional-form-fields#dis-post-106799
<![CDATA[Re: best method of conditional form fields]]> https://forums.modx.com/thread/19284/best-method-of-conditional-form-fields#dis-post-106798 I was hoping there is a simple way such a mootools/jquery libs that willl make things easier.
]]>
sinbad Feb 24, 2009, 06:40 AM https://forums.modx.com/thread/19284/best-method-of-conditional-form-fields#dis-post-106798