By nightlife2008 on

Hi everybody,

I've been searching and searching for almost 20 hours now without any result...

I have a website containing a Ctools form wizard with 3 steps. In one of the steps I need to replace 2 fields (language + extra field, in separate fieldsets), based on an AHAH enabled country-dropdown.
You can view the situation in this screenshot: http://dev.wenskaartenshop.be/shipping_form.png

I have other forms with AHAH functionality, using the Ahah-Helper module, but this module (and the core AHAH mechanisms) lets you only replace one "path" per AHAH field.

Question #1: Is there a way in Drupal so that I can replace 2 "elements" simultaneously on my page, based on a dropdown change?

Question #2: It seems that my AHAH register call is not setting the correct include path for my form-file include, because of the Ctools Wizard form-wrapper... Is there a way to fix this?

Thanks in advance!!!

/Kim

⋅ Categories: Drupal 6.x

Comments

tassaf’s picture

tassaf commented

Hi,

I am searching for the same thing to do..
is there any solution for that please?

nightlife2008’s picture

nightlife2008 commented

It seems it is not possible to replace 2 elements simultaneously, unless you put them in the same parent.

You can accomplish this by wrapping your form elements with a markup parent, using #prefix and #suffix, and using that ID as replacement path.

$form['user_info'] = array(
		'#weight' => 9,
		'#prefix' => '<div id="user-info-wrapper" class="clearfix">',
		'#suffix' => '</div>',
		'#tree' => FALSE,
  );

if ( $user_type == 'INDIVIDUAL' ) {
    $form['user_info']['individual'] = array(
			'#type' => 'fieldset',
			'#title' => t('Individual'),
			'#collapsible' => FAlSE,
			'#collapsed' => FALSE,
			'#weight' => 10,
    );
} else {
    $form['user_info']['business'] = array(
			'#type' => 'fieldset',
			'#title' => t('Business'),
			'#collapsible' => FAlSE,
			'#collapsed' => FALSE,
			'#weight' => 10,
    );
}

This will render your form fields as normal (because it's invisible markup, instead of a fieldset parent), submit them as they weren't in a parent (because of #tree = FALSE).

Another solution, which I used, was to create a JS function, which "filters" the second option field values, based on the first option field value.

This solution requires some different components:

1. Initially populate both select fields with all possible values in your Drupal MYFORM_form() function
2. Create some sort of array tree, which can be rendered to JSON, and injected into Drupal.settings.YourFormSettings

Values 1st dropdown:

BE
NL
FR

Values 2nd dropdown in JSON:

BE
- NL
- FR
NL
- NL
FR
- FR

Initial second dropdown values:

NL
FR

Create a function which hooks into the .change() event of the first dropdown, and reads the selected value:

PHP in your form function:

drupal_add_js(array(
  'c2c_languages' => _c2c_get_languages_grouped(),
  'c2c_selected_language' => $selected_lang
), 'setting');

JS in your form function:

//  add trigger on receiver_country_fk change event
$("#edit-receiver-country-fk", context).change(c2cCheckReceiverCountry);
$("#edit-receiver-country-fk", context).change();

function c2cCheckReceiverCountry() {
	var $receiver_country = $('#edit-receiver-country-fk');
	var $receiver_language = $('#edit-receiver-language-fk');
	var selected_country_val = $receiver_country.val();
	var languages = Drupal.settings.c2c_languages[selected_country_val];

	var options = '';
	options += '<option value="">' + Drupal.t('- Select -') + '</option>';
    jQuery.each(languages, function(index, value) { 
    	options += '<option value="' + index + '"';
    	if ( index == Drupal.settings.c2c_selected_language )
    		options += ' selected="selected"';
    	options += '>' + value.i18n_name + '</option>';
	});
    
    $receiver_language.html(options);
    
	return true;
}

This will automagically repopulate the second dropdown, based on the first dropdown, and make Drupal think it's a valid option none the less.