Force the Country to be "Canada" Using the Online Join iPart

The other day a client asked for a fairly simple online "join" form, using the default Contact Account Creator iPart. The interesting part of the question though was that it should only be able to accept Canadian addresses.

There is no (simple) way to manage the country fields, there are methods that fire when you change the country (to show/hide the state/province field), and the iPart doesn't offer that option.

The solution was to add some script to the page that selected "Canada" as the default country, then triggered the change (which jQuery won't do by default) to update the province list. The final step is to disable all the other country options in the drop-down. They're still there but they aren't selectable, leaving Canada as the default country, and the state/province list having the valid list of available provinces.

A short timeout was also required as it appears that the list wasn't completely available even when the document.ready script was run. A 1/4 second delay seems to do the trick.

The end result is that the country field defaults to "Canada", can't be changed, and the state/province field consists of the available Canadian provinces.

Add this to the bottom of the page (Content_HTML iPart)

<script>
	jQuery(document).ready(function() {
		setTimeout(function(){ 
			if (jQuery("[id$='_SelectCountry']").val() != "CA") {
				jQuery("[id$='_SelectCountry']").val("CA");
				jQuery("[id$='_SelectCountry']").trigger("change");
			} else {
				jQuery("[id$='_SelectCountry'] option:not(:selected)").attr("disabled", true);
			}
		}, 250);
	});
</script>

Of course this led to a "we need the same thing for US members" request. Since the country list defaults to "United States" when it loads, all we needed to do was disable the other countries, no need to refresh.

<script>
	jQuery(document).ready(function() {
		setTimeout(function(){ 
			jQuery("[id$='_SelectCountry'] option:not(:selected)").attr("disabled", true);
		}, 250);
	});
</script>

This script makes good use of the jQuery "selector that ends with" concept. The IDs generated by RiSE are long and can change, to simplify which ID to update, use the "ends with" syntax to make it easier.

In this case the actual ID for the country field is 158 characters long. Refering to is using the "ends with" syntax is just a lot cleaner - assuming you only have 1 input on the page that ends with _SelectCountry.

jQuery("[id$='_SelectCountry']")

back
Categories
2459 Bridge Road
Oakville, ON
L6L 2G9
Canada
jake@k2andyou.com
support@k2andyou.zendesk.com
Office: (905) 901-3625
Mobile: (289) 795-3538