Announcement

Collapse
No announcement yet.

Javascript to display State/Province by Selected Country

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Javascript to display State/Province by Selected Country

    Greetings, Our organization is working on a form, and we are trying to determine how to set up some javascript to only display states or provinces whenever someone selects a certain country. For example if the US, only US states should only be displayed, if Canada only Canadian provinces, and if elsewhere only a text box for state/province should show. Code below, hope it helps.

    I have written my code like this

    JS
    <script language="JavaScript" type="text/javascript">
    function selectCountry(elem){
    if(elem.value == "United States" || elem.value == "Canada"){
    document.getElementById('BillingStateProvince').st yle.display = '';
    document.getElementById('BillingStateProvince').st yle.visibility = '';
    return false;
    }else{
    return true;
    }
    }
    </script>


    I have attached the html file.



    Attached Files

  • #2
    Good day!

    We typically do not provider programming assistance as that will be in violation of our internal policy. To provide programming assistance creates liability and it truly is a matter of your logic. In general other forums are better suited for this type of questions.

    Having said the above, one of our developers created the attached for your review. Please note that this is not, by any means, code that we suggest for use in your product or make any statement about its working in your environment. The code is for educational purposes and we hope it shows you one approach towards your answer. There are many similar ways to do what you wish to accomplish and all should be studied for use in your specific environment.

    Please see a sample code for your review:
    HTML Code:
    <html>
    <body>
      <script language="JavaScript" type="text/javascript">
    function selectCountry(){
    var sel = document.getElementById('BillingCountryCode');
    
    if(sel.value == 840 || sel.value == 124){
      document.getElementById('Other').style.display = 'none';
      if(sel.value == "840"){
        document.getElementById('US').style.display = 'block';
        document.getElementById('Canada').style.display = 'none';
      }
        if(sel.value == "124"){
          document.getElementById('Canada').style.display = 'block';
          document.getElementById('US').style.display = 'none';
        }
    }else{
      document.getElementById('Canada').style.display = 'none';
      document.getElementById('US').style.display = 'none';
      document.getElementById('Other').style.display = 'block';
    
    }
    
    }
    </script>
    
    <div class="row" id="US"> <radiolabel for="BillingStateProvince">State:</radiolabel><select id="BillingStateProvince" class="large" name="BillingStateProvince">
    <option value="" selected="selected">--Select--</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="DC">District of Columbia</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="HI">Hawaii</option>
    <option value="ID">Idaho</option>
    <option value="IL">Illinois</option>
    <option value="IN">Indiana</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NV">Nevada</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NM">New Mexico</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="ND">North Dakota</option>
    <option value="OH">Ohio</option>
    <option value="OK">Oklahoma</option>
    <option value="OR">Oregon</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="SD">South Dakota</option>
    <option value="TN">Tennessee</option>
    <option value="TX">Texas</option>
    <option value="UT">Utah</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WA">Washington</option>
    <option value="WV">West Virginia</option>
    <option value="WI">Wisconsin</option>
    <option value="WY">Wyoming</option>
    <option value="APO AE">APO AE</option>
    <option value="APO AP">APO AP</option>
    <option value="APO AA">APO AA</option>
    <option value="FPO AE">FPO AE</option>
    <option value="FPO AP">FPO AP</option>
    <option value="FPO AA">FPO AA</option>
    </select></div>
    <div class="row" id="Canada" style="display:none;"> <radiolabel for="BillingStateProvince">Province:</radiolabel><select id="BillingStateProvince" class="large" name="BillingStateProvince">
    <option value="" selected="selected">--Select--</option>
    <option value="AB">Alberta</option>
    <option value="BC">British Columbia</option>
    <option value="MB">Manitoba</option>
    <option value="NB">New Brunswick</option>
    <option value="NL">Newfoundland and Labrador</option>
    <option value="NT">Northwest Territories</option>
    <option value="NS">Nova Scotia</option>
    <option value="NU">Nunavut</option>
    <option value="ON">Ontario</option><option value="PE">Prince Edward Island</option>
    <option value="QC">Quebec</option><option value="SK">Saskatchewan</option>
    <option value="YT">Yukon Territories</option>
    </select></div>
    <div class="row" id="Other" style="display:none;"><radiolabel for="BillingStateProvince" class="fixed">State/Province:</radiolabel> 
      <input type="text" id="BillingStateProvince" class="xlarge" name="BillingStateProvince" value="" /></div>
     <span class="validateWrap"><radiolabel for="BillingStateProvince" class="fixed">Postal Code:</radiolabel> <input type="text" id="BillingPostalCode" class="large required" name="BillingPostalCode" value="" /></span> </div><div class="row"><radiolabel for="BillingCountryCode">Country:</radiolabel>
      <select id="BillingCountryCode" class="large required" name="BillingCountryCode" onchange="selectCountry();">
    <option value="840">United States</option>
    <option value="004">Afghanistan</option>
    <option value="008">Albania</option>
    <option value="012">Algeria</option>
    <option value="016">Western Samoa</option>
    <option value="020">Andorra</option>
    <option value="024">Angola</option>
    <option value="010">Antarctica</option>
    <option value="028">Antigua and Barbuda</option>
    <option value="032">Argentina</option>
    <option value="051">Armenia</option>
    <option value="533">Aruba</option>
    <option value="036">Australia</option>
    <option value="040">Austria</option>
    <option value="031">Azerbaijan Rep.</option>
    <option value="044">Bahamas</option>
    <option value="048">Bahrain</option>
    <option value="050">Bangladesh</option>
    <option value="052">Barbados</option>
    <option value="112">Belarus</option>
    <option value="056">Belgium</option>
    <option value="084">Belize</option>
    <option value="204">Benin</option>
    <option value="060">Bermuda</option>
    <option value="064">Bhutan</option>
    <option value="068">Bolivia</option>
    <option value="070">Bosnia</option>
    <option value="072">Botswana</option>
    <option value="076">Brazil</option>
    <option value="096">Brunei</option>
    <option value="100">Bulgaria</option>
    <option value="854">Burkina Faso</option>
    <option value="108">Burundi</option>
    <option value="116">Cambodia</option>
    <option value="120">Cameroon</option>
    <option value="124">Canada</option>
    <option value="132">Cape Verde Islands</option>
    <option value="136">Cayman Islands</option>
    <option value="140">Central African Republic</option>
    <option value="148">Chad</option>
    <option value="152">Chile</option>
    <option value="156">China People's Republic</option>
    <option value="170">Columbia</option>
    <option value="174">Comoros</option>
    <option value="178">Congo</option>
    <option value="184">Cook Islands</option>
    <option value="188">Costa Rica</option>
    <option value="191">Croatia</option>
    <option value="192">Cuba</option>
    <option value="196">Cyprus</option>
    <option value="203">Czech Republic</option>
    <option value="208">Denmark</option>
    <option value="262">Djibouti</option>
    <option value="214">Dominican Republic</option>
    <option value="218">Ecuador</option>
    <option value="818">Egypt</option>
    <option value="222">El Salvador</option>
    <option value="226">Equatorial Guinea Malabo</option>
    <option value="232">Eritrea</option>
    <option value="233">Estonia</option>
    <option value="231">Ethiopia</option>
    <option value="242">Fiji Islands</option>
    <option value="246">Finland</option>
    <option value="250">France</option>
    <option value="254">French Guiana</option>
    <option value="258">French Polynesia</option>
    <option value="266">Gabon</option>
    <option value="270">Gambia</option>
    <option value="268">Georgia</option>
    <option value="276">Germany</option>
    <option value="288">Ghana</option>
    <option value="292">Gibraltar</option>
    <option value="300">Greece</option>
    <option value="304">Greenland</option>
    <option value="308">Grenada</option>
    <option value="312">Guadeloupe</option>
    <option value="316">Guam</option>
    <option value="320">Guatemala</option>
    <option value="324">Guinea</option>
    <option value="328">Guyana</option>
    <option value="332">Haiti</option>
    <option value="340">Honduras</option>
    <option value="344">Hong Kong</option>
    <option value="348">Hungary</option>
    <option value="352">Iceland</option>
    <option value="356">India</option>
    <option value="360">Indonesia</option>
    <option value="364">Iran</option>
    <option value="368">Iraq</option>
    <option value="372">Ireland</option>
    <option value="376">Israel</option>
    <option value="380">Italy</option>
    <option value="388">Jamaica</option>
    <option value="392">Japan</option>
    <option value="400">Jordan</option>
    <option value="398">Kazakhstan</option>
    <option value="404">Kenya</option>
    <option value="296">Kiribati</option>
    <option value="410">Korea, Republic of</option>
    <option value="414">Kuwait</option>
    <option value="417">Kyrgystan</option>
    <option value="428">Latvia</option>
    <option value="422">Lebanon</option>
    <option value="426">Lesotho</option>
    <option value="430">Liberia</option>
    <option value="434">Libya</option>
    <option value="438">Liechtenstein</option>
    <option value="440">Lithuania</option>
    <option value="442">Luxembourg</option>
    <option value="446">Macao</option>
    <option value="807">Yugoslavia</option>
    <option value="450">Madagascar</option>
    <option value="454">Malawi</option>
    <option value="458">Malaysia</option>
    <option value="462">Maldives</option>
    <option value="466">Mali</option>
    <option value="470">Malta</option>
    <option value="584">Marshall Islands</option>
    <option value="474">Martinique</option>
    <option value="478">Mauritania</option>
    <option value="480">Mauritius</option>
    <option value="484">Mexico</option>
    <option value="583">Micronesia</option>
    <option value="498">Moldova</option>
    <option value="492">Monaco</option>
    <option value="496">Mongolia</option>
    <option value="499">Montenegro</option>
    <option value="500">Montserrat</option>
    <option value="504">Morocco</option>
    <option value="508">Mozambique</option>
    <option value="104">Myanmar</option>
    <option value="516">Namibia</option>
    <option value="520">Nauru</option>
    <option value="524">Nepal</option>
    <option value="528">Netherlands</option>
    <option value="530">Netherlands Antilles</option>
    <option value="540">New Caledonia</option>
    <option value="554">New Zealand</option>
    <option value="558">Nicaragua</option>
    <option value="562">Niger</option>
    <option value="566">Nigeria</option>
    <option value="570">Niue</option>
    <option value="580">Northern Mariana Islands</option>
    <option value="578">Norway</option>
    <option value="512">Oman</option>
    <option value="586">Pakistan</option>
    <option value="585">Palau</option>
    <option value="591">Panama</option>
    <option value="598">Papua New Guinea</option>
    <option value="600">Paraguay</option>
    <option value="604">Peru</option>
    <option value="608">Phillippines</option>
    <option value="616">Poland</option>
    <option value="620">Portugal</option>
    <option value="634">Qatar</option>
    <option value="642">Romania</option>
    <option value="643">Russian Federation</option>
    <option value="646">Rwanda</option>
    <option value="654">Saint Helena</option>
    <option value="659">Saint Kitts and Nevis</option>
    <option value="666">Saint Pierre and Miquelon</option>
    <option value="674">San Marino</option>
    <option value="678">Sao Tome and Principe</option>
    <option value="682">Saudi Arabia</option>
    <option value="686">Senegal</option>
    <option value="688">Serbia</option>
    <option value="690">Seychelles</option>
    <option value="694">Sierra Leone</option>
    <option value="702">Singapore</option>
    <option value="703">Slovakia</option>
    <option value="705">Slovenia</option>
    <option value="090">Solomon Islands</option>
    <option value="706">Somalia</option>
    <option value="710">South Africa</option>
    <option value="724">Spain</option>
    <option value="144">Sri Lanka</option>
    <option value="736">Sudan</option>
    <option value="740">Suriname</option>
    <option value="748">Swaziland</option>
    <option value="752">Sweden</option>
    <option value="756">Switzerland</option>
    <option value="760">Syria</option>
    <option value="158">Taiwan</option>
    <option value="762">Tajikistan</option>
    <option value="834">Tanzania</option>
    <option value="764">Thailand</option>
    <option value="772">Tokelau</option>
    <option value="768">Tonga</option>
    <option value="780">Trinidad and Tobago</option>
    <option value="788">Tunisia</option>
    <option value="792">Turkey</option>
    <option value="795">Turkmenistan</option>
    <option value="798">Tuvalu</option>
    <option value="800">Uganda</option>
    <option value="804">Ukraine</option>
    <option value="784">United Arab Emirates</option>
    <option value="826">United Kingdom</option>
    <option value="858">Uruguay</option>
    <option value="860">Uzbekistan</option>
    <option value="548">Vanuatu</option>
    <option value="336">Vatican City</option>
    <option value="862">Venzuela</option>
    <option value="704">Vietnam</option>
    <option value="876">Wallis and Futuna</option>
    <option value="887">Yemen, People's Demo. Rep. Of</option>
    <option value="894">Zambia</option>
    <option value="716">Zimbabwe</option>
    </select></div>
    </body>
    </html>
    Regards,
    Click & Pledge Support Department

    Join us @ the educational webinars: https://clickandpledge.com/webinars/
    Live Support- read more: https://support.clickandpledge.com/s/article/general-information-live-support/

    Comment

    Working...
    X