Forums

Hello,
I'd like to add a custom select pulldown. Do you have examples on how to add the elements parameter-values to the form?

Hi malles,

You can edit them as much as you like in the Form HTML box in the Form Editor | Form Code tab.

Bob

Hi Bob,
Thanks for your reply.
I want to make a template pulldownlist for integration with VirtueMart. Therefore I need some extra info from the parameters of the form wizard. How can I add the values in the element template? I see Chronoform uses {cf_paramname} in the templates, but that doesn't work in the custom element code.
And how can I add a special parameter like the options textarea?

Hope you can help me.

Malles

Hi Malles,

I'm not sure that I fully understand . . . but can you use the 'Insert New Parameter' box at the bottom of the Wizard Custom Elements page?

Bob

Yes, but that button just adds a simple text-input, not a textarea for select-options.
And how can I call the values of the parameter in the element code?

Hi Malles,

Oh I understand - I've no idea if you can add a textarea with options selection there. I'd have to go dig into the code.

Bob

That would be great! Perhaps you could point me to the right code?
I'm really interested in how to read the values of the parameters too..

Hi Malles & Bob,
To me, it sounds like you are trying to add the multiple='yes' property to a <SELECT> input. I'm unfortunately not that accustomed with the Wizard, but you should be able to edit the Form code manually and add the needed property as desired. Perhaps Bob can be of better help as to adding this property from within the Wizard?

/Fredrik

It's not important to me to add the property via the wizard. i can inset it in the database if needed. i just need the formats, and more important: the way to read their values in the code block.

Hi malles,

Not sure if this is helpful or not but here goes . . .

The Wizard template elements are in administrator/com_chronocontact/js/CFElements.js The Wizard Placeholder elements are pulled in by the last but one code block in the page. (The drag and drop cod eis in wizard.js but I don't think it has much use to you here.

The info for a Placeholder is stored in the jos_chrono_contact_elements table (one line per element).

I'm sure that there is more but I've never really looked at Max's code here and it's not easy to work out how it all works :-(

Bob

Hi Malles,
Assuming we created a simple dropdown in the wizard, the generated HTML-code would look something like this:

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Click Me to Edit</label>
    <select class="cf_inputbox" id="select_1" size="1" title=""  name="select_1">
      <option value="option 1">option 1</option>
<option value="option 2">option 2</option>
<option value="option 3">option 3</option>

    </select>
    
  </div>
  <div class="cfclear"> </div>
</div>

First order of business; we'll have to alter the name of the input in order to tell PHP that there might be more than one value selected (make it an array). This is done by adding [] to the name property value:

...
    <select class="cf_inputbox" id="select_1" size="1" title=""  name="select_1[]">
...

Next, we need to add the multiple="yes" property:

...
    <select class="cf_inputbox" id="select_1" size="1" title=""  name="select_1[]" multiple="yes">
...

Finally, we also need to alter the size property, so we can see all items in the set; since we got three items in our set, we'll have to set this to 3:

...
    <select class="cf_inputbox" id="select_1" size="3" title=""  name="select_1[]" multiple="yes">
...

As such, the completed block would now look like this:

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Click Me to Edit</label>
    <select class="cf_inputbox" id="select_1" size="3" title=""  name="select_1[]" multiple="yes">
      <option value="option 1">option 1</option>
<option value="option 2">option 2</option>
<option value="option 3">option 3</option>

    </select>
    
  </div>
  <div class="cfclear"> </div>
</div>

All changes are done using the Form Edit (not Wizard Edit), under the Form Code tab, Form HTML box.
Also keep in mind, that if you use the Wizard Edit afterwards, all the manual changes will be lost and have to be re-done afterwards (limitation in the Wizard editor).

/Fredrik

Hi Malles & Bob,
Actually, as I dug through the CF-code...
It's as simple as setting the size property in the Wizard to anything larger than 1, and the Wizard will then add the multiple="yes" property automatically (and adjust the name accordingly).

/Fredrik

Hi Guys,

Thanks for all the great input. But I'm afraid you don't excactly understand what I mean.

What I'm trying to achieve is the possibility for the Chronoform user to add an element to his form that produces a pulldown with different values as option-text. So the value that is sent with the form, differs from the text that is displayed in the dropdown. In html it should end like this:

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Click Me to Edit</label>
    <select class="cf_inputbox" id="select_1" size="1" title=""  name="select_1">
      <option value="value 1">option 1</option>
<option value="value 2">option 2</option>
<option value="value 3">option 3</option>
    </select>
  </div>
  <div class="cfclear"> </div>
</div>

In fact, it's as simple as that.

As I see in the templates in components\com_chronocontact\themes\default\elements.php, I assumed something like this should be put in the code box of Custom Element select Wizard.

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="{cf_label}" {cf_labeloptions}>{cf_labeltext}</label>
    <select class="{cf_class}" id="{cf_id}" size="{cf_size}" title="{cf_title}" name="{cf_name}">
      <option value="">Choose Option</option>
      <cf_theoptions><option value="{value}">{title}</option></cf_theoptions>
    </select>
    {cf_tooltip}
  </div>
  <div class="cfclear"> </div>
</div>

The {}-tags are not replaced in the form when I try that.

How can I get this to work? Or could a plugin fix this?

Malles

Hi Malles,
Ahh, then I understand. The elements.php would suggest that you could have different names and values for each option, though I'm not sure how to acheve that using the Wizard. From what I can read in admin.chronocontact.php around line 2181, both the title and value placeholders get replaced with the very same value.

You would still have the option of manually editing the generated form afterwards, though these changes would not last if you were to use the Wizard Edit at any later time.

/Fredrik

So if I understand it right, you can't add dynamic form elements with the custum element wizard. Than I don't understand the paramater option, when you can't use the values of the parameters in your element.

Think I'm getting a bit lost here..

Using the Dropdown control in the Wizard, you can only create dropdowns with option-text equal to it's value. The "Options" parameter for this control holds the various options (one option per line). The "Choose Option" parameter is the text for the optional "empty" option.

Creating a Wizard Custom Element allows you to inject any valid HTML-code into your form. You can add one or more properties to your Custom Element, which would be injected into the custom HTML-code using {}-substitution {myproperty} would be replaced with the value of the myproperty property.
This could be used to create a custom dropdown input, though it would be with a fixed number of options. A three-entry dropdown would look like this:
Wizard Title: select3
Placeholder: select3
Description: Shows a custom 3-option select input
Code:

    <label class="cf_label" style="width: 150px;" for="{id}">{label}</label>
    <select class="cf_inputbox" id="{id}" size="1" title=""  name="{name}">
      <option value="{value1}">{label1}</option>
      <option value="{value2}">{label2}</option>
      <option value="{value3}">{label3}</option>
    </select>

Parameters: (add each parameter name on it's own in the box next to the "Insert New Parameter" button, and click the button)
id
name
label
label1
value1
label2
value2
label3
value3

When used in the Wizard, this will create a dropdown menu with three items. The control will have 9 parameters (id, name, label, label1-3, and value1-3), which should be given values accordingly. Unfortunately, if you then need a dropdown with 4 options, you'll have to create a new Custom Element in a similar fashion.

Am I getting somewhat closer to what you are thinking of?

/Fredrik
PS. Personally, I think you should've been able to have label/value pairs in the option-list of the dropdown, unfortunately, that's not how Max' code works at the moment. DS.

Fredrik,
Thank you, that's excactly what I mean.
I'll study on this some more.