[Solved][Formbuilder] Add field by UDT

[vinyl]

Hi, I am trying to add a field to Formbuilder that comes from a UDT. This UDT contains some code that creates a dropdown with the next 8 fridays. This so people can pick a date to plan an appointment.

I selected a User Defined Tag Call as field type hoping this would add my code as a field inside the form, but it spits the result out above my form

Any way to accomplish what I am trying or am I not using something in the right way?

[velden]

Not really an answer to your question but an alternative approach

use jQuery UI to make a DatePicker from a normal input field

Couldn't tempt to make a proof of concept on temporary page:
http://tinyurl.com/ost54tl

Used code:

In head of template

NOTE that this forum adds underscores to the script tags. Obviously you should remove those.

Code: Select all

<__script__ src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></__script>
<__script__ src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></__script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>

In page content (wouldn't recommend putting this in all content but works for this proof of concept)

Code: Select all

{* Form has a text input field with CLASS customdatepicker as ID attribute is broken in Form Builder 0.7.4!!! *}
{FormBuilder form='contact'}

<__script__ type="text/javascript">
// array below should be build by your UDT or something 
var allowedDates = ["24/1/2014","31/1/2014","7/2/2014","14/2/2014"];

function checkAllowedDays(date) {
  //get string representation of date
  var day = date.getDate();
  var month  = date.getMonth() + 1;
  var year = date.getFullYear();
  var datestring = day + '/' + month +'/' + year;

  // check if date exists in array
  if (allowedDates.indexOf(datestring) == -1) { return [false,''] } else { return [true,''] }
} ;

 $(function() {
$( ".customdatepicker > input" ).datepicker(
{       minDate: 0,
        dateFormat: 'mm/dd/yy',
        inline: true,
        numberOfMonths: [1, 2],
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        beforeShowDay: checkAllowedDays
}
);
 } );
</__script>

Note that curly brackts {} are surrounded by at least one space (or newline). For older versions of cmsms use the {literal}{/literal} tags around the javascript code to prevent Smarty errors.

EDIT: I would recommend validating the user input on submission if needed. You can use a UDT for that.

[vinyl]

Thanks for your reply and example.

Though this is what I mean it is not what I would be using. If javascript is switched off it would break the form.

I also read something about using a module builder and trying it that way. Think I will give that a go.

If I find a working solution I will post it!

[velden]

You're right and not. It would change appearance but not break the form. The form would still display a text input.

You could for example show a div containing the allowed values (which you validate in UDT) and HIDE that div with JS.

But I understand that you want for another approach.

[vinyl]

I know, but for a clean interface with no frustration for a user I wouldn't choose this.

I now used the Module Call field to insert my UDT output. This sets the field in the right place and shows the right content.

The only thing I can't get to work is the field_id. The manual of course show how to use this is a template file. I want to use it in a UDT.
The field ID of Formbuilder is passed by using {$FBid}[] in the template file. I there a way to capture this and use it in a UDT which is made up out of PHP?

[vinyl]

Well I solved it

I made my form and used a "Module interface field" in Formbuilder.

I used the module "Module Generator" to create a module "Fridays" and made a summary template there with the following content:

Code: Select all

<label>Vrijdag: *</label>
<select name="{$FBid}">
{getFridays}
</select>

The UDT "getFridays" returns the form option fields with the fridays I want to show.

In the Formbuilder "Module interface field" you call this like:

{cms_module module='Fridays' summarytemplate="showfridays"}