Form_builder template field type

lhagemann · April 2013

I am using the form builder for a simple "contact us" form (nearly identical to the example from the 0.9.3 tutorial).

I want users to be able to add multiple phone numbers, so I am using the field type 'template' in order to create "add more" functionality to the phone field.

What i expect to happen:
The 'add another' link will create another fieldset of the phone field defined in the template, and will submit an array of fields with the data supplied in each phone field.

What I see:
Add Another button creates a 'remove' link, and creates another phone field with the value of the first field already populated, but there is no display of the first field anywhere associated with the 'remove' which is displayed.

(This behavior is present in the User Guide aslo where the template is field is documented)

My controller (snipped to relevant code)


function index()
{
	$this->load->library('form_builder');
	$this->form_builder->load_custom_fields(APPPATH.'config/custom_fields.php');

	if (!empty($_POST))
	{
		// put your processing code here... 
	}
	
	$fields = array();
	$fields['first_name'] = array('required' => false);
	$fields['last_name'] = array('required' => false);
	$fields['email'] = array('required' => false);
	$fields['state'] = array('type' => 'state'); 

	$fields['template_phone'] = array(
		'display_label' => false,
		'add_extra' => false,
                'init_display' => 'first',
                'dblclick' => 'toggle',
                'repeatable' => TRUE,
               'type' => 'template',
               'label' => 'Phone',
               'title_field' => 'title',
               'fields' => array(
                    'phone' => array('type' => 'phone'),
               ),
	);
	$this->form_builder->set_fields($fields);
	
	$this->form_builder->set_field_values($_POST);
	$this->form_builder->display_errors = TRUE;
	$this->form_builder->required_text = '<span class="required">*</span>required fields';

	$vars['form'] = $this->form_builder->render_divs(); 
	$this->fuel->pages->render('contact', $vars);
}

I have added the following javascript in my view file


<script>
<?php $this->load->module_view(FUEL_FOLDER, '_blocks/fuel_header_jqx'); ?>
</script>
<?php echo js('fuel/global', 'fuel')?>
<?php echo js('jquery/plugins/jquery-ui-1.8.17.custom.min', 'fuel'); ?>

when I submit the form after adding two phone numbers I have the following post parameters:


first_name: First
last_name: Last
email:email@example.com
state:NH
template_phone[0][phone]:789456
template_phone[1][phone]:

I would expect (even without the html display of the multiple fields) to have a value in the template_phone[1] post element.

admin · April 2013

After you hit "Add Another", if you use the DOM inspector on your browser, does the template_phone field input name look correct in that it shows a 0 index for the first row and a 1 for the second item?

lhagemann · April 2013

hmmm ... apparently I didn't dig deep enough into the DOM. I was going to say that the element was not even generated (which is what I thought was happening, and failed to expressly state).

So, digging further into the nested divs and tables ...


<div class="repeatable noclone" data-index="1">
	<h3 class="grabber" title=""></h3>
	<div class="repeatable_content" style="display: none;">
		<div class="form" id="form_515adef3d9ec1">
			<table><tbody>
				<tr>
					<td class="label"><label for="template_phone_1_phone" id="label_template_phone_0_phone">Phone</label></td>
					<td class="value"><input type="text" name="template_phone[1][phone]" value="" id="template_phone_1_phone" class="field_type_phone  field_depth_0" size="40" data-orig_name="template_phone" data-index="1" data-key="phone" data-field_name="template_phone"></td>
				</tr>
				<tr>
					<td></td>
					<td class="actions"><div class="actions_inner"></div></td>
				</tr>
			</tbody></table>
		</div>
	</div>
	<a href="#" class="remove" style="">Remove </a>
</div>

I see there is an inline 'style display: none' on the containing div. Is that something controlled via the 'init_display' option? I tried the three option values documented, but saw no change in behavior.

admin · April 2013

That looks like it is caused by the initDisplay value. Try setting that value to FALSE (which I see the documentation doesn't mention).

lhagemann · April 2013

Thank you for your timely response. I apologize for my delay, was only able to get back to this project.

Yes, the 'false' value for the 'init_display' solved the issue. Thank you.

I'll be adding a feature request that the template fields honor the 'render_divs()' method in form builder.

Thanks again for the excellent support!

admin · April 2013

No problem. For the render divs, try passing the following 'form_builder_params' parameter:

...
$fields['template_phone'] = array(
		'display_label' => false,
		'add_extra' => false,
                'init_display' => 'first',
                'dblclick' => 'toggle',
                'repeatable' => TRUE,
               'type' => 'template',
               'label' => 'Phone',
               'title_field' => 'title',
               'fields' => array(
                    'phone' => array('type' => 'phone'),
               ),
               'form_builder_params' => array('render_format' => 'divs')
	);

Howdy, Stranger!

Categories

Form_builder template field type

Comments