I have a webform for editing an Organization. This webform includes a field for "Country" and a field for "State/Province".

Users expect the list of State/Province to update when they select different country, but currently that does not happen.

I've compared the code of page with webform, and a contact editing page in CiviCRM, and I see that a code similar to

<script language="JavaScript" type="text/javascript">
cj(function()
{
        countryID       = "#address_1_country_id"
        stateProvinceID = "#address_1_state_province_id"
        callbackURL     = "/civicrm/ajax/jqState"

        cj(countryID).chainSelect(stateProvinceID, callbackURL, null );
});
</script>

is missing. Looking on the code of the webform, the javascript should look like (in case of 1 contact):

<script language="JavaScript" type="text/javascript">
cj(function()
{
        countryID       = "#edit-submitted-civicrm-1-contact-1-address-country-id"
        stateProvinceID = "#edit-submitted-civicrm-1-contact-1-address-state-province-id"
        callbackURL     = "/civicrm/ajax/jqState"

        cj(countryID).chainSelect(stateProvinceID, callbackURL, null );
});
</script>

I'm checking to see what's the best place to inject this code.

Comments

colemanw’s picture

colemanw commented

This is not currently implemented in this module, and doing so will be a bit tricky, especially now that we support any number of address field sets.
The best idea I've had is to use the hooks provided by Webform module to define a new type of field. Call it state/country, so both country select and state select would exist within the same field (sort of like how month, day and year dropdowns all exist within the same date field). This would take a bit of custom coding. Read the documentation in webform_hooks.php to get a better sense of what would be involved, and feel free to submit a patch.
I suspect that we want to use drupal's #ahah property rather than the cj stuff above, so we stay within the realm of FAPI and webform rather than trying to work against it with custom js injections.

colemanw’s picture

colemanw commented
Version: 6.x-2.x-dev » 7.x-2.x-dev
Status: Active » Postponed

If anyone wants to step up to contribute to this, feel free...

colemanw’s picture

colemanw commented
Title: chainSelect does not fire when a Country field and a State/Province field exists in the webform » Dynamically reload State/Province field based on chosen Country
Status: Postponed » Fixed

I'm happy to say I've found a way forward and have implemented this feature. It is now available in -dev and will be in the 2.1 release.

The complexity of drupal + webform made this task seem impossible, but after much searching I came across a simple and brilliant suggestion by another user with a similar problem. The solution is to make the form element a textbox and on document.ready() replace it with a select (this way non-js users can still just enter the state/prov abbr. in the textbox as normal).

This gracefully gets around the FAPI validation problem ("an illegal choice has been detected"), after all it's really a textbox, so any input is OK. It gets validated by the CiviCRM API.

jimurl’s picture

jimurl commented

This is a fantastic module, coleman.

I was looking to do the same thing: dynamically reload the state/province list based on the users selection of country. I was thrilled to see that this had just been added to the -dev version, and downloaded that; but, it's not completely working for me.

At first, the state/province field was correctly pre-populated with the U.S. states, but when I selected a different country, the State/province dropdown became disabled.

Then I thought I should probably remove and replace the State/ Province and Country fields- I did so under the 'civicrm' tab of the webform. Now, the state province field is disabled when the page is loaded, and changing the country does nothing.

I delved into the webform_civicrm_webforms.js file and saw the code where this is supposed to happen;but don't know enough to get it working.
This is on D6-perhaps that is the problem?

colemanw’s picture

colemanw commented

Have you run update.php and cleared your menu cache?

jimurl’s picture

jimurl commented

I have now, and it works great! Thanks again!

ouyang1512’s picture

ouyang1512 commented

I am actually having the same problem as jimurl had. I am using civicrm 4.0.7, drupal 7.8, and webform civicrm integration 7.x-2.2. The state/province field is disabled after the first view of the webform. When I click next step and then come back by clicking "previous step", it's then enabled as a textfield. But the state/province field is still disabled. I flushed all caches many times, and logged in/out, but nothing worked. Any ideas? Thank you!

colemanw’s picture

colemanw commented

After taking the steps in #5...
Look in your firebug console to see the result of the AJAX call. Its probably telling you that the callback failed for some reason. What does it say?

ouyang1512’s picture

ouyang1512 commented

Colemanw, here is what I got, but not sure if it is what you are asking for becuase I am not an experienced developer :(

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL /webform-civicrm/js/state_province/1228 was not found on this server.</p>
</body></html>
colemanw’s picture

colemanw commented

Yep, it couldn't find the callback url. The question is why.

Try creating a "tags" field for your webform and then go to edit that component. The tag autocomplete shares the same callback. Does the autocomplete work?

Are you sure you've cleared your menu cache?

ouyang1512’s picture

ouyang1512 commented

Here are what I just did:
go structure -> content type ->webform->manage fields, and add a field tags, choose term reference, auto complete, and save.
Go back to my webform (node 310), and edit.
The auto complete worked very well.

To make sure, I logged out and logged in again, ran the update.php (showed no pending updates ), and flushed all caches couple of times, still no luck.

colemanw’s picture

colemanw commented

no, it's civicrm tags that share the callback.

-go to your webform
-click the civicrm tag
-under contact 1, add a tags field
-save
-on the webform components tab, click to edit that newly created component.
-see if the autocomplete works

ouyang1512’s picture

ouyang1512 commented

Sorry for the wrong operation and thanks for your directions. I did what you just said (if I understood correctly), and the auto complete worked. And the most interesting thing is, the state/province field is working now!!! I did nothing, just restarted my computer in this morning. I did flush caches many times yesterday, it did not work.

Thanks for your quick responses and patience, colemanw! This is a great module, and I am using it for our organization's conference abstract submission form, almost there!!

colemanw’s picture

colemanw commented

Well, whoever said computers were logical? ;)
Glad it's working.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

jimurl’s picture

jimurl commented

This is so minor it barely counts as an issue, but...

If your civi-enabled webform has country and a dynamically-loaded state/province field , and the submission fails validation (e.g. - the user omits a required field), the form is reloaded with all previous entries intact, except the state field has 'gracefully degraded' from the dropdown list to a text field, and the users entry is not populated.

Like I said pretty minor; but would it be possible to enhance the module to cover this case?

colemanw’s picture

colemanw commented

I'm unable to reproduce that. I created a form with state/prov and country, and another required field. When I submitted, the page refreshed as expected with the required field highlighted in red, and the state and country fields just as I left them.

jimurl’s picture

jimurl commented

I just upgraded to 6.x 2.3, and you are correct, the field is populated with the users state/province selection; for me, though, it's a text field, and no longer a dropdown- is this consistent with what you are seeing?

colemanw’s picture

colemanw commented

No, I still see it as a dropdown even after failed validation.
Try clearing your js cache. (drush cc)