function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
snowMonkeysnowMonkey 

Enabling State and country picklist in Web2lead form

i am trying to get the state and country picklist to work in a Web2lead form and was wondering how to get the cascading picklists(country and its states)done by just changing the HTML.

I can resort to a dropdown of html and Javascript ajax calls to get it done the traditional way, but that is not thru salesforce. Any other ways that you know about to get this cascading thing done by using vf/apex?
AmitAmit (Salesforce Developers) 
Hello,

You can use following sample code for cascading picklist :

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Linked Dropdowns</title>
<script type="text/javascript">
var countryData = [
{country: "USA", areas: ["Texas", "California", "Arizona"]}, //Default country to show
{country: "UK", areas: ["Devon", "Staffordshire", "London"]}
]
function populateCountries()
{
var oList = getCountriesDropdown();
oList.options.length = 0;
for (var i = 0, l = countryData.length; i < l; i++)
{
var sText = countryData[i].country;
addOptionToList(oList, sText, sText);
}
}
function showAreas(country)
{
var oList = getAreasDropdown();
oList.options.length = 0;
var colAreas = getAreasForCountry(country)
if (colAreas)
{
for (var i = 0, l = colAreas.length; i < l; i++)
{
var sArea = colAreas[i];
addOptionToList(oList, sArea, sArea);
}
}
}
function getAreasForCountry(country)
{
for (var i = 0, l = countryData.length; i < l; i++)
{
if (countryData[i].country == country)
{
return countryData[i].areas;
}
}
returnnull;
}
function getCountriesDropdown()
{
return document.getElementById("lstCountries");
}
function getAreasDropdown()
{
return document.getElementById("lstAreas");
}
function addOptionToList(parent, value, text)
{
var oOption = new Option(text, value);
parent.options.add(oOption);
}
function init()
{
populateCountries();
var sCountry = getCountriesDropdown().options[0].value
showAreas(sCountry);
}
</script>
</head>
<body onload="init()">
<form action="">
<ul>
<li>
<label for="txtName">
Name:</label><input name="txtName"id="txtName"type="text"/></li>
<li>
<label for="txtEmail">
Email:</label><input name="txtEmail"id="TtxtEmail"type="text"/></li>
<li>
<label for="lstCountries">
Country:</label><select id="lstCountries"name="lstCountries"style="width: 150px;"onchange="showAreas(this.options[this.options.selectedIndex].value);">
</select></li>
<li>
<label for="lstAreas"> 
Area:</label><select name="lstAreas"id="lstAreas"style="width: 150px;"></select></li>
</ul>
</form>
</body>
</html>

Also refer following link for more information :

http://help.salesforce.com/HTViewHelpDoc?id=admin_state_country_picklists_overview.htm&language=en_US

Thanks,
Amit Bhardwaj
snowMonkeysnowMonkey
Thanks so much Amit!

Question: I was looking for more of a salesforce way of resolving this and not just by using JS. Do you know where this Country and State mappings are stored in SF so i can leverage that mapping in my ajax toolkit calls to sf api.

This way when someone changes the mapping then i dont have to change my code here..
AmitAmit (Salesforce Developers) 
Hello,

Please refer following links for state country picklist : 

http://help.salesforce.com/apex/HTViewHelpDoc?id=admin_state_country_picklists_configure.htm&language=en_US

http://help.salesforce.com/apex/HTViewHelpDoc?id=admin_state_country_picklists_edit_details.htm&language=en_US

Thanks,
Amit Bhardwaj
snowMonkeysnowMonkey
These docs do not detail how to programatically access the AJAX API toolkit(or any other methods) and get the list of states for a user, correct?