[Solved] Playing with FormBuilder

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
Locked
Peciura

[Solved] Playing with FormBuilder

Post by Peciura »

My task was to build form with hidden part that shows up when particular check box is marked.
All you need is:

To create checkbox (unchecked by default) and in JavaScript field

Code: Select all

 onclick='show_on_checked("add_another_category_fb",this.id)'
Create "Static text" right before form part you want to hide. Div id ('add_another_category_fb') is the same as in javscript field

Code: Select all

</div><div id='add_another_category_fb' style='display:none'><div style='height:0px;'>
"Static text" after it

Code: Select all

</div>
In my case i hid fields:
1 Pulldown
4 Text Input
1 Text Area

EDIT: Here is missing JavaScript code

Code: Select all

function show_on_checked(div_id,check_box_id){
	if(document.getElementById(check_box_id).checked){
		document.getElementById(div_id).style.display="block";
	}
	else{
		document.getElementById(div_id).style.display="none";
	}
}
Last edited by Peciura on Sun Apr 15, 2012 4:04 pm, edited 3 times in total.
Peciura

Re: [Solved] Playing with FormBuilder

Post by Peciura »

Second interesting part was to generate dropdown like field with dynamic option list, which depends on responces to other field. I used it to register participants to 3rd part events that were being registered at the same time.
Here it goes:

1. you have some form (e.g. FORM_1) with at least one text filed in it with id lets say XXX. Responces to this field will generate option list in new form (FORM_2).

2. create UDT "data_from_other_form". It return an 2D array. values can be accessed $array[resp_id][field_id]

Code: Select all

/*$params['field_ids']*/   /*mandatory, comma separated field_id list, spaces will be trimmed*/
/*$params['assign']*/      /*mandatory*/


$assign = FALSE;
if (!empty($params['field_ids']) && !empty($params['assign'])){
	$db = cmsms()->GetDb();
	$smarty = cmsms()->GetSmarty();
	$field_ids = explode(',',$params['field_ids']);
	$query = 'SELECT resp_id, field_id, value FROM '.cms_db_prefix().'module_fb_resp_val WHERE ';
	foreach($field_ids as $key=>$field){
		$field_ids[$key] = trim($field);
		$query .= " field_id = ? or ";
	}
	$query = rtrim( $query, 'o r');
	$query .= ' ORDER BY resp_id,field_id;' ;
	$dbresult = $db->Execute($query,$field_ids);
	
	$assign = $oneset = array();
	$prev_resp_id = $temp_resp_id = $field = ' ';/* to make sure variables are initialized */
	while ($dbresult &&  ($row = $dbresult->FetchRow())){
		$value = $row['value'];
		if($temp_resp_id != $row['resp_id']){
			if($temp_resp_id != ' ') {
				$prev_resp_id = $temp_resp_id;
				$assign[$prev_resp_id] = $oneset;
			}
			$temp_resp_id = $row['resp_id'];
			$oneset = array();
		}
		$oneset[$row['field_id']] = $value;
	}
	if ($temp_resp_id != ' '){
		$assign[$temp_resp_id] = $oneset;
	}
	else{
		$assign = FALSE;
	}
}
$smarty->assign($params['assign'], $assign);

return;
3. In FORM_2 create "Static text" field listed below with smarty enabled. It will act as dummy dropdown list :). "m9d767fbrp__" can be copied from any other field in FORM_2. And digits are id of this field (344 in my example). In an example i combine one option of 5 fields from FORM_1.

EDIT: {$entry->input_id} == m9d767fbrp__344. No need to guess field name and id.

Code: Select all

<select name="m9d767fbrp__344" id="m9d767fbrp__344">

{data_from_other_form assign='temp' field_ids='231,236,237,235,248'}
{if $temp}
{foreach from=$temp item=item}
<option value="{$item[231]},{$item[236]},{$item[237]},{$item[235]},{$item[248]}  " >{$item[231]}, {$item[235]}</option>
{/foreach}
{/if}

<option value="Select one" selected="selected">Select one</option>
</select>
You can collect options from more forms - repeat part with coresponding field_ids "{data_from.............{/if}" as many times as there are different forms you want to include.

4. To save value selected in dummy list you have to create "Computed Field". In value to compute field write variable representing dummy field (in my case it was "$fld_344"). And select to interpret it as string.

Thats about it, you should have dynamic option list.
Last edited by Peciura on Sun Apr 15, 2012 4:06 pm, edited 2 times in total.
michaywood
Power Poster
Power Poster
Posts: 280
Joined: Thu Apr 15, 2010 12:27 am
Location: Georgia

Re: [Solved] Playing with FormBuilder

Post by michaywood »

I was shown this forum post and it is EXACTLY what I'm looking for!

When I try to do it, though, it doesn't work. I go back and check my code and (after turning off WYSIWYG) i see that my 's aren't exactly as they should be. I tried putting {literal}{/literal} tags around each static text code, but it still didn't work.

Is there something I'm doing wrong in my Static Text?
arstach
Forum Members
Forum Members
Posts: 27
Joined: Tue Jun 01, 2010 5:21 pm

Re: [Solved] Playing with FormBuilder

Post by arstach »

I'm trying to build a form with dropdown menu, which should display some info after decision have been made. Here is little js which should do the trick:

Code: Select all

function showDivs(prefix,chooser) {
        for(var i=0;i<chooser.options.length;i++) {
                var div = document.getElementById(prefix+chooser.options[i].value);
                div.style.display = 'none';
        }
        var div = document.getElementById(prefix+chooser.value);
        div.style.display = 'block';
}
used in:

Code: Select all

<div>
  <select id="select1" onchange="showDivs('div',this)">
    <option value="" selected="selected">choose one</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
    <option value="d">D</option>
  </select>
</div>
<div>
  <div id="diva" style="display:none;">info A</div>
  <div id="divb" style="display:none;">info B</div>
  <div id="divc" style="display:none;">info C</div>
  <div id="divd" style="display:none;">info D</div>
</div>
the problem is that CMS added first option to dropdown list with empty value.. maybe there is some way to make js detect empty value and assign e.g. "f" instead..

I will be grateful for any hints..
User avatar
noosphere
Forum Members
Forum Members
Posts: 51
Joined: Tue Feb 26, 2008 9:20 am

Re: [Solved] Playing with FormBuilder

Post by noosphere »

Peciura wrote: 2. create UDT "data_from_other_form". It return an 2D array. values can be accessed $array[resp_id][field_id]
Hello Peciura !
I was just looking for this UDT to get other forms data. Could you please confirm this is still working in cmsms 1.9.4.2 ? Since I can't get any result...

:-(
Peciura

Re: [Solved] Playing with FormBuilder

Post by Peciura »

Here is an example to show/hide optional fields depending on selected value.
I have tested it on old FormBuilder 0.5.12 and CMSMS 1.8.2, but it should work on later versions too.
Pay attention on values FormBuilder creates on actual form: "", "1", "2" , ... If visitor selects option with empty value ("") all optional fields will be hidden if selected value is 2 - two fields will appear and so on.

1. Include this function to your template

Code: Select all

function show_on_selected(div_prefix,select_box_id){
		
	var oList = document.getElementById(select_box_id);
	var all_values = [];
	var div_id = '';
	var selected_value = parseInt(oList.value);
	
	if(oList.value.length == 0){
		selected_value = 0;
	}
	
   for(var i = 1; i < oList.options.length; i++){
      all_values.push(oList.options[i].value);
   }

	all_values.sort();
	var max_value = parseInt(all_values[all_values.length-1]);
	
   if(selected_value != 0){
   	for(i = 1; i <= selected_value; i++){
   		div_id = div_prefix + i;
	      document.getElementById(div_id).style.display="block";
	   }
	   
   }
	for(i = 1 + selected_value; i <= max_value; i++){
   	div_id = div_prefix + i;
   	if (document.getElementById(div_id) != null){
	      document.getElementById(div_id).style.display="none";
	   }
   }
}
2. create your own field of type "Pulldown" and include this JS. The first argument should match prefix of div ID on section 3.a

Code: Select all

 onchange='show_on_selected("show_category",this.id);' 
3. For each optional field (or field group if you like) create 2 "Static Text" fields.
3.a. move it above optional field (field group if you like). Div ID prefix should match the first function argument on section 2. Numeric suffix should be valid value of field on section 2.

Code: Select all

</div>
<div id='show_category1' style='display:none'>
<div style='height:0px;'>
3.b. move it bellow optional field

Code: Select all

</div>
Attachments

[The extension txt has been deactivated and can no longer be displayed.]

Last edited by Peciura on Sun Apr 15, 2012 4:26 pm, edited 2 times in total.
applejack
Power Poster
Power Poster
Posts: 1015
Joined: Fri Mar 30, 2007 2:28 am
Location: London

Re: [Solved] Playing with FormBuilder

Post by applejack »

The same effect is easier to achieve using jQuery. See the contact form here http://www.c-h-w.com/contact/ and choose different options for the drop down.
User avatar
Nettie
Forum Members
Forum Members
Posts: 53
Joined: Tue Oct 03, 2006 11:42 pm

Re: [Solved] Playing with FormBuilder

Post by Nettie »

Can you show an example of how to achieve that with jquery appeljack - is it combined with formbuilder?
applejack
Power Poster
Power Poster
Posts: 1015
Joined: Fri Mar 30, 2007 2:28 am
Location: London

Re: [Solved] Playing with FormBuilder

Post by applejack »

Look at the code in the link above
laurens66
New Member
New Member
Posts: 3
Joined: Sat Apr 07, 2012 4:50 pm

Re: [Solved] Playing with FormBuilder

Post by laurens66 »

Hello,

I´ll did what Peciura said in his post but it doesn´t work for me.

I uploaded a picture where you can see what I did.

Can someone tell me what I did wrong?

CMSms 1.10.3
Formbuilder 0.7.2
Attachments
Picture
Picture
Peciura

Re: [Solved] Playing with FormBuilder

Post by Peciura »

Update JS for pulldown field and both "Static Text" fields. JS was working on FF 11, new version works on IE 9, Opera 11.62 and Chrome 14 too. Tested with contact form of Form Builder 0.7.1.

Uploaded XML file of whole form (just in case).

Optional fields should be hidden on page load because of hidden div, unless you have uncommon Form template.
laurens66
New Member
New Member
Posts: 3
Joined: Sat Apr 07, 2012 4:50 pm

Re: [Solved] Playing with FormBuilder

Post by laurens66 »

Thanks for answer!

But it still doesn't work for me.
All your changes I have changed and I try to upload your template but it says:
"DTD Version mismatch, cannot import (Troubleshooting)"

My CMSMS is a fresh installation of CMSMS 1.10.3 with NCleanBlue
link: http://www.hidding.nu/laurenstest
my browser: IE9 and FF11
Maybe can I send you an e-mail or Private message with admin login?
my e-mail: laurens66 [at] gmail [.] com
Locked

Return to “Tips and Tricks”