By Trappies on

Hi Guys,

I am having a problem with submitting forms. I used the FAPI to create the form and I am making use of Javascript to populate the next select box in the form. I need to use the #name field for the second and third select box. When I use this it breaks the submit process.

I can see all the submitted values in the "[clicked_button]" Array when I use the #name arrtibute for the select box but not in the "[values]" Array. What is the purpose of the "[clicked_button]" array?

Can anyone please point me in the right direction on this?

Thanks in advance,
Davin.

⋅ Categories: Drupal 6.x

Comments

yuriy.babenko’s picture

yuriy.babenko commented

Hi Davin,

It would help if you posted your form declaration, and what $form_values data you're getting in your submit handler (a print_r of that would be great).

---
Yuriy Babenko
www.yubastudios.com
My Drupal tutorials: http://yubastudios.com/blog/tag/tutorials

---
Yuriy Babenko | Technical Consultant & Senior Developer
http://yuriybabenko.com

Trappies’s picture

Trappies commented

Hi,

Thanks for the quick response. This is my basic FAPI post I have for a Country, Province and Town. What I do is use javascript to generate the full tree of entries. Now I need to have a name for the next level to be able to change it. 

	$form['e_details'] = array(
		'#type' => 'fieldset',
		'#title' => t('Resort Location'),
		'#collapsible' => TRUE,
		'#collapsed' => FALSE,
		'#tree' => TRUE,
	);
	
	$temp = array();
	
	$sql ="SELECT * FROM l_country ORDER BY cc_name";
	$result = mysql_query($sql) or die("Query failed : " . mysql_error());
	
	while ($line = mysql_fetch_array($result, MYSQL_ASSOC))
	{
		$cc_id = $line['cc_id'];
		$cc_name = $line['cc_name'];
		$temp[$cc_id] = $cc_name;
	}
	
	drupal_add_js(generate(),'inline');
	
	$form['e_details']['e_country'] = array(
		'#type' => 'select',
		'#title' => t('Country'),
		'#name' => 'e_country',
		'#id' => 'e_country',
		'#options' => $temp,
		'#attributes' => array('onchange' => "changeProvince(this.value, e_province)"),
	);
	
	$form['e_details']['e_province'] = array(
		'#type' => 'select',
		'#title' => t('Province'),
		'#name' => 'e_province',
		'#id' => 'e_province',
		'#disabled' => TRUE,
		'#options' => array(0 => 'Please select a province'),
		'#attributes' => array('onchange' => 'javascript:changeTown(this.value, e_town);',),
	);

Here is the output I get :

$form_state = array(
    [storage] => 
    [submitted] => 1
    [values] => Array
        (
            [e_details] => Array
                (
                    [e_name] => 
                    [e_country] => 
                    [e_province] => 
                )

            [op] => Commit
            [submit] => Commit
            [form_build_id] => form-fe56d3a4615f30243717a3731daa185d
            [form_token] => 96b1030df250fc7e0c8db1cc1de6bf01
            [form_id] => project_estab_add_form
        )

        [clicked_button] => Array
        (
            [#type] => submit
            [#value] => Commit
            [#post] => Array
                (
                    [e_details] => Array
                        (
                            [e_name] => 
                        )

                    [e_country] => 250
                    [e_province] => 8
                    [e_town] => 331
                    
                    [op] => Commit
                    [form_build_id] => form-9d49145334831d202d8e79af2d92283d
                    [form_token] => 96b1030df250fc7e0c8db1cc1de6bf01
                    [form_id] => project_estab_add_form
                )
            [#programmed] => 
            [#tree] => 
            [#parents] => Array
                (
                    [0] => submit
                )

            [#array_parents] => Array
                (
                    [0] => submit
                )

            [#weight] => 0.007
            [#processed] => 
            [#description] => 
            [#attributes] => Array
                (
                )

            [#required] => 
            [#input] => 1
            [#name] => op
            [#button_type] => submit
            [#executes_submit_callback] => 1
            [#process] => Array
                (
                    [0] => form_expand_ahah
                )

            [#id] => edit-submit
        )

    [redirect] => 
)

I need to use the #name field to describe the next select box that needs to be populated. If I put it in it goes to the submit stage but has nothing in the "[values]" array. Not sure if this explains a little better.

Thanks in advance,
Davin

yuriy.babenko’s picture

yuriy.babenko commented

Hmm, I've never actually used the #name property before... The API reference lists it as an "internal" property, so perhaps it's best not to mess with it.

Why do you need to set it anyways?

Each form element has a unique ID, if you're trying to target the element with JavaScript you should be able to use that.

---
Yuriy Babenko
www.yubastudios.com
My Drupal tutorials: http://yubastudios.com/blog/tag/tutorials

---
Yuriy Babenko | Technical Consultant & Senior Developer
http://yuriybabenko.com

Trappies’s picture

Trappies commented

Hi,

Thanks for the response. I have removed the #name field now and now it passes the values through correctly. I make use of the document.getElementById to made the list changes. This works now.

Here is a sample of the html it generates:

<div class="form-item" id="edit-e-details-e-country-wrapper">
 <label for="edit-e-details-e-country">Country: </label>

 <select name="e_details[e_country]" onchange="changeProvince(this.value, &#039;edit-e-details-e-province&#039;)" class="form-select" id="edit-e-details-e-country" ><option value="260"></option><option value="104">*Ireland</option><option value="3">Afghanistan^ Islamic State of</option></select>

</div>
<div class="form-item" id="edit-e-details-e-province-wrapper">
 <label for="edit-e-details-e-province">Province: </label>
 <select name="e_details[e_province]" onchange="changeTown(this.value, 'edit-e-details-e-town')" disabled="disabled" class="form-select" id="edit-e-details-e-province" ><option value="0">Please select a province</option></select>
</div>

I have now got the different fields to populate the next field correctly. This works, but when I select commit I get this error for each field:

"An illegal choice has been detected. Please contact the site administrator."

This error is stated for each select field and then also creates a red ring around each of the select fields.

We have made progress but now I am getting this error and there is no way, which I can see to, to find out what is causing it.

Kind Regards,
Davin

yuriy.babenko’s picture

yuriy.babenko commented

Hi Davin,

Instead of using document.getElementById to select an element, you should use jQuery's $ function. Check this out: http://www.learningjquery.com/2008/07/introduction-to-jquery-ui

The error you're getting is a validation error. What's happening is that when the form is generated, Drupal "saves" the options for all select fields and then compares the user-submitted data against those options. If Drupal sees that the user submitted an option which was not present in the original list, it flags that as an "illegal choice" and throws the error you're seeing.

There are two things you can do here:

1. You can rebuild the "internal" (saved) version of the form when you add your options via JavaScript. You would need to define a new menu callback, and make an AJAX call to it when you populate the form with new values for the select element. I don't remember the specifics of rebuilding the form this way, but I've seen it done before - fairly simple.

2. Use the AHAH Forms that are supported by Drupal 6. A few links that popped up in Google:
http://drupal.org/node/331941
http://www.nicklewis.org/node/967

---
Yuriy Babenko
www.yubastudios.com
My Drupal tutorials: http://yubastudios.com/blog/tag/tutorials

---
Yuriy Babenko | Technical Consultant & Senior Developer
http://yuriybabenko.com

Trappies’s picture

Trappies commented

Hi Yuriy,

Thanks a mill for all the help so far. I really appreciate it.

I have done a lot of reading and I have some of it figured out. Based on the above, I have a listing that I want to narrow down.

Country -> Province -> Town -> Suburb

So I have a select box for each level. What I did was to use #ahah to create the second level which works great. The only problem I have is how would I pass the changed value from the changed select box to the next level inorder to generate the next select box? So, if I select a country I want it to update the province select box with only the provinces for that country. If I then select a province I want it to generate the town select box and so on...

This is the code I have atm for the form:

        $form['e_country'] = array(
		'#type' => 'select',
		'#title' => t('Country'),
		'#options' => $temp,
		'#ahah' => array(
			'event' => 'change',
			'path' => 'aonline_estab/message_js',
			'wrapper' => 'target',
			'method' => 'append',
			'effect' => 'fade',
		),
	);

	$form['target'] = array(
		'#type' => 'markup',
		'#prefix' => "<div id='target'>",
		'#value' => 'erm....',
		'#suffix' => '</div>',
	);

       $form['target1'] = array(
		'#type' => 'markup',
		'#prefix' => "<div id='target1'>",
		'#value' => 'erm....',
		'#suffix' => '</div>',
	);

And this is for the menu callback:

        $items['aonline_estab/message_js'] = array(
		'page callback' => 'aonline_estab_message_js',
		'access arguments' => array('access content'),
		'type' => MENU_CALLBACK,
	);

This the javascript function:

function aonline_estab_message_js() {

	$temp = array();
	
	$sql ="SELECT * FROM l_province ORDER BY p_oname";
	$result = mysql_query($sql) or die("Query failed : " . mysql_error());
	
	while ($line = mysql_fetch_array($result, MYSQL_ASSOC))
	{
		$cc_id = $line['p_id'];
		$cc_name = $line['p_oname'];
		$temp[$cc_id] = $cc_name;
	}

	$form['e_province'] = array(
		'#type' => 'select',
		'#title' => t('Province'),
		'#options' => $temp,
		'#ahah' => array(
			'event' => 'change',
			'path' => 'aonline_estab/message_js',
			'wrapper' => 'target1',
			'method' => 'replace',
			'effect' => 'fade',
		),
	);
	return drupal_json(array('status' => TRUE, 'data' => drupal_render($form) ));;
}

So the first problem I have is passing the value down to the next level. The second is to make the newly created select box have a #ahah function inorder to generate the select box below that one.

I have gone through a lot of material and I can't find anything that will allow me to do this.

Thanks in advance,

Davin

Trappies’s picture

Trappies commented

friendly bump ;)

Trappies’s picture

Trappies commented

Anyone have any ideas about how to make a cascading select box system using #ahah?

Davin