User Profile Fields - Conditional fields

[marianoaran]

Hello,

I've done a search but can't seem to find any info about this.

We need to collect some information in the registration form according to the type of user registering.

To make registration easier (and shorter), we thought of including some conditional questions like:

1) Are you a health professional? YES ( ) NO( )
a) if YES - Then further questions
b) if NO - move on to next question.

(1) would be required
(a) and (b) would be required only if (1) is YES

Is there any mod that can do this?

thanks!

[ozzy47]

Not that I have seen, it would need to be custom coded.

[nerbert]

I made a little JavaScript script that can do this. I need a link to your forum and a description of the field with the Yes button and the fields you want to show upon clicking so I can get the element id's

[marianoaran]

Hey nerbert thanks so much for helping out!

Just PMed you :-)

[nerbert]

Here's the plugin I made for "register_form_complete" hook location

$customfields_profile .= "
	<script>
		fetch_object('cfield_5').parentNode.parentNode.style.display = 'none';
		YAHOO.util.Event.on(window, 'click', function(e) {
			var radio = YAHOO.util.Event.getTarget(e)
			if(radio.id == 'rb_cpf_field6_1') {
				fetch_object('cfield_5').parentNode.parentNode.style.display = 'block';
			}
			if(radio.id == 'rb_cpf_field6_2') {
				fetch_object('cfield_5').parentNode.parentNode.style.display = 'none';
			}
		});
	</script>
";

cfield_5 is the id of a text input field that appears only upon clicking the yes button

rb_cpf_field6_1 is the id of the Yes button

rb_cpf_field6_2 is the id of the No button


You can set several fields to change display

--------------- Added [DATE]1410533632[/DATE] at [TIME]1410533632[/TIME] ---------------

I just thought of something -- if you set all these fields to "required" the form won't submit with the conditional fields left blank. Here's code that will fill in the fields if they're hidden

$customfields_profile .= "
	<script>
		fetch_object('cfield_5').parentNode.parentNode.style.display = 'none';
		fetch_object('cfield_5').value = 'NOT APPLICABLE';
		YAHOO.util.Event.on(window, 'click', function(e) {
			var radio = YAHOO.util.Event.getTarget(e)
			if(radio.id == 'rb_cpf_field6_1') {
				fetch_object('cfield_5').parentNode.parentNode.style.display = 'block';
				fetch_object('cfield_5').value = '';
			}
			if(radio.id == 'rb_cpf_field6_2') {
				fetch_object('cfield_5').parentNode.parentNode.style.display = 'none';
				fetch_object('cfield_5').value = 'NOT APPLICABLE';
			}
		});
	</script>
";

[marianoaran]

Thanks so much for your help nebert! This works great in 'almost' all browsers.

In IE8 the hidden fields are not displaying. The strange thing is that console is not giving me any errors... it's just ignoring the selection of different options and not showing any hidden field.

Any ideas on what can this be?

I also tried with IE9 in IE8 compatibility mode and it behaves in the same way.

[nerbert]

Maybe you don't want IE8 types on your forum??????

Well I thought the whole point of all that YAHOO code was browser compatibility. So here's doing it the old fashioned way:

$customfields_profile .= "
	<script>
		fetch_object('cfield_5').parentNode.parentNode.style.display = 'none';
		fetch_object('cfield_5').value = 'NOT APPLICABLE';
                if(document.addEventListener)  document.addEventListener('click', openFields, true);
                else if(document.attachEvent)  document.attachEvent('onclick', openFields);

		function openFields(e) {
			var radio =  e.srcElement || e.target ;
			if(radio.id == 'rb_cpf_field6_1') {
				fetch_object('cfield_5').parentNode.parentNode.style.display = 'block';
				fetch_object('cfield_5').value = '';
			}
			if(radio.id == 'rb_cpf_field6_2') {
				fetch_object('cfield_5').parentNode.parentNode.style.display = 'none';
				fetch_object('cfield_5').value = 'NOT APPLICABLE';
			}
		}
	</script>
";

--------------- Added [DATE]1410966671[/DATE] at [TIME]1410966671[/TIME] ---------------

There's one thing you may wish to consider before changing the code. I think by default vBulletin gets its YUI (Yahoo! User Interface Library) remotely from Google or Yahoo servers. You can change that to local hosting in

Server Settings and Optimization Options > Use Remote YUI = "None"

Getting it remotely is supposed to save bandwidth but I've had trouble with connection failures before.

But the point here is that apparently remotely hosted YAHOO no longer supports IE8 (I think I heard jQuery quit too) but I'm sure your locally hosted vB version still does.