[SOLVED] FormBuilder Dynamic Changing Form-Differing Options

[govicinity]

CMS Made Simple™ 1.11.5 “Puerto Ayora”
FormBuilder 0.7.3

I am intrigued to know if I can have a form that on the selection of an option from a pulldown menu, further down the form I can have differing questions appear depending on the choice of that first pulldown choice.

For example
Pulldown options:
• Book Us
• Join Us
• Other

If "book us" were chosen I'd like to have the date selector appear.

If "join us" were chosen then I'd like to have male/female pulldown selector appear.

And if "other" were chosen then I'd like to have a text area appear.

Does anyone know if this is possible as I have been unable to find a solution in the forum or online. If you know of a tutorial please feel free to post the URL.

[govicinity]

OK, been scratching my head on this for some time this morning, I have changed the dropdown to three radio buttons, and have put this javascript in on my form template, it's working... nearly, the sections of the forms I have put in fieldsets and have linked to the radio buttons appear, but currently don't disappear when you select one of the other radio buttons in the 3 button group.

I am no Javascript coder, so any help would be muchly appreciated.

Code: Select all

{literal}
<__script__ src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"> </__script>
	<__script__ type="text/javascript">
	$(function () {
	    $('fieldset.book-us').hide();
	    $('input[value="1"]').click(function () {
	        if (this.checked) {
	            $('fieldset.book-us').show();
	        } else {
	            $('fieldset.book-us').hide();
	        }
	    });
	});
	$(function () {
	    $('fieldset.join-us').hide();
	    $('input[value="2"]').click(function () {
	        if (this.checked) {
	            $('fieldset.join-us').show();
	        } else {
	            $('fieldset.join-us').hide();
	        }
	    });
	});
	$(function () {
	    $('fieldset.other').hide();
	    $('input[value="3"]').click(function () {
	        if (this.checked) {
	            $('fieldset.other').show();
	        } else {
	            $('fieldset.other').hide();
	        }
	    });
	});
	</__script>
{/literal}

[govicinity]

OK, after going slightly mad looking at this for 4 hours, and losing a little bit of hair I have done this.

I have set the sections I want to be hidden in separate fieldsets, i.e

Code: Select all

<fieldset  class="book-us">Content here...</fieldset>
<fieldset  class="join-us">More content here...</fieldset>
<fieldset  class="other">Even more content here...</fieldset>

Anything you want to be visible in the form constantly, do not put in a fieldset.

I then also have this CSS, i.e.

Code: Select all

<style>
fieldset {
    display:none;
}
</style>

And the script we've used is:

Code: Select all

{literal}
<__script__>
 $(function() {
          var $fieldset = $('fieldset');
          $('input[type=radio]').on('change',function() {
                  $fieldset.hide();
                  $fieldset.eq( $('input[type=radio]').index( this ) ).show();
           });
});
</__script>
{/literal}

Just checked in in Firefox, IE7, IE8, IE9, IE10, Chrome, Safari and Opera, all work, job done.