How-to create Country / State drop list (!J2.5 and CFv4)?

Hello,

I would like to create a simple form with the often used Country & State code drop down boxes using ChronoForms v4 and Joomla 2.5.

I have been searching this site for a simple how to but many of the posts are very old and I haven’t found a solution yet.

I know this is a very basic form field so am not sure if there is already a ChronoForm element that does this and I just don’t see it or know how to use it properly?

I have been developing with Joomla for a few months and know some HTML and CSS but my PHP and JS are very limited, but I am learning.

Anyway, any links or suggestions on where to find some answers and or code samples would be very helpful.

Thank you in advance for any ideas.

Hi stoneraven,

You can either add your own lists to the options box in a couple of Select elements. Or if you expect to need this more than once you can save some of your time for $10 with my Custom Select [GH] action which has built in lists of countries, US states, . . . and quite a bit more.

Bob

Thanks for the nice custom elements. I purchased the "Custom Select GH" and a couple others.

Regarding your Custom Select, I have it working but seem to be unable to set the default value. I would like the "Country" select element to default to Unites States rather than Andora.

I opened the Select Box element and in the General tab found the "Selected" option which says, "The selected value by default if any." So I put in "United States" and saved but that didn't work so I put in a numeric value of "4" just to see if anything changed but Andora was still the selected value.

I am sure there is a simple solution that I am missing.

Thank you for your assistance.

Hi stoneraven,

Thanks for the purchase.

Each option is set up as value=text pair and it's the value part you need to set in the default box, in this case US. Here's a snippet from the options file.

. . .
UG=Uganda
UK=United Kingdom
UM=United States Minor Outlying Islands
US=United States
UY=Uruguay
UZ=Uzbekistan
VA=Vatican City State (Holy See)
VC=Saint Vincent and the Grenadines
. . .

If you don't want to have the short codes submitted then you can use the 'Use text as values' options. I think in that case the default would be United States.

You can edit the countries.options file (or a copy of it) if you wanted, for example, to move the USA to the top of the list.

Bob

Hi Bob,

Thanks for the helpful reply.

Before the initial post I looked around for the "*.option files after reading your Custom Select Action information but could not find any such files in my Joomla tree structure. I looked in the /components/com_chronoforms and all its sub folders to no avail.

If you can please point me in the right direction I will hopefully be off and running.

Thank you.

Brendon...

Hi Brendon,

They are in the action folder: administrator/components/com_chronoforms/form_actions/custom_select_gh/option_lists

I'll add this to the help in the next version.

Bob

Ahhh...the old Admin folder. I should have looked there.

So I have my basic form working with Country and State/Province drop down lists, thanks to your help and nice Custom Select Action element. Now I would like to take the next step and make the State/Province list dependent upon the selected country.

If US is selected only the US states would be shown in the State/Province list, if Canada is selected, only the provinces and I guess any other country would result in maybe a list with a single item, "N/A", as I don't have info for any other countries.

To help with this, I purchased your PDF on Using Ajax but haven't got to far yet. Is there a sample Form somewhere I can download to see it in action? I cannot copy any of the code from the PDF, as it is protected, so a sample Form with all the code in place would be tremendously helpful.

Lastly I was wondering since I am using your Custom Select Action to generate the drop-down lists, are there any special instructions on how to get the double-drop-down feature to work with your custom element?

Thank you.

Brendon...

Hi Brendon,

I haven't tried to use the Custom Select [GH] action with a double drop-down. I think it should be possible though, I'll try to find time to experiment.

The code in the PDF should be copiable - my mistake. I've updated the copy on the site and emailed a copy to you.

Bob

Hi Bob,

It would be great to be able to use your Custom Select Actions but not the end if I have to do it a different way. Also thanks for the copyable PDF.

I just found a link http://greyhead.net/chronoforms/creating-a-double-drop-down to one of your chapters in ChronoForms book and am trying to follow it.

Steps 1 went fine. I created a new form and pasted the HTML Code into the "Code" tab of the what I am calling the "non-wizard edit screen" which has "General/Code/JS Validation/Admin Actions/Data View across the top. Clicked Save/Close and then clicked the "Frontend View" link in the Link Column to have a look. There were the two lists and submit button just as shown in your article.

After step two the second list showed the Chapter 1 and 2 groupings as shown. Still on track.

Step 3&4 didn't go so well. It wasn't clear using ChronoForms v4 where to put the script. Step 4 says to "Add this script snippet to the Form JavaScript box, apply or save the form,..." There was no such place to put JS in the "non-wizard edit screen" so I went to the Wizard Edit->Events and pasted the script into the "On Load->Load JS" box, clicked Save and Close and then previewed again.

Unfortunately nothing seemed to change. All the items showed up in the second list not matter what happened to the first list. Obviously I am missing something, probably something simple, so I apologize for my ignorance, but I am continuing to learn so will not be ignorant in this matter for long.

Thanks,

Brendon...

Hi Brendon,

How did you configure the "Double dropdown" action ?

Regards,
Max

Hi stoneraven,

Since the double-dropdown article was written Max has added a Dynamic Dropdown action in ChronoForms v4. You'll find it in the Utilities action group. This lets you link two Select box elements in your form so that making a selection in the first one resets the option set for the second one.

You still need to have an extra Event to handle the option generation.

The syntax is similar to the article but the action requires an option list of value=text pairs to be returned rather than the select box HTML.

The recipe you linked to was from the book and written for CFv3. There is an updated AJAX how-to doc for CFv4 that includes both the AJAX for an Email 'look-up' and for the Double dropdown can be bought here.

While I'm writing there are a couple of other similar options.

There's a custom "AJAX Enabled Dropdown [P]" action here that was written by user petasis. This is similar to the Dynamic Dropdown except that the second element can be a <span> or <div> (rather than a Select element) and the returned code will be inserted in the second element. So it could be used to return a message, or a new input or a large chunk of HTML.

There's also a pair of actions - the AutoComplete Loader and AutoComplete Processor that can be used to do 'as you type' lookups. That is: when you type a few characters in an input box linked to the AutoComplete Loader action they are sent to a second event with the AutoComplete Processor in it which returns a list of options; type another character and the options list is refreshed. Because this uses a text input element rather than a select element the user is not limited to the specified selections but can add a 'free-text' value instead.

Bob