Module Website/Utils/Form

Form Utilities

• Provides Country and State data for SELECT elements with automatic State update on Country change

Sample

HTML

 <form id="formId1">
     <input type="text" name="address_1" data-autocomplete-address-input data-default-country='AU'" data-autocomplete-address="street_number route premise locality sublocality">
     <select data-countries="AU,NZ" data-value="AU" id="c1" name="country" required>
         <option value="" >Select Country</option>
         <option data-placeholder="" selected="selected">Loading...</option>
     </select>
     <select data-country="AU" data-country-select-id="c1" data-states="NSW,VIC,Canterbury" data-value="VIC" name="state" required>
         <option value="">Select State</option>
         <option data-placeholder="" selected="selected">Loading...</option>
     </select>
 </form>
Copy

Sample

JavaScript

require(["Website/Utils/Form"], function(FormUtils){
     FormUtils.bind("#formId1" or document.getElementById(formId1) or $('#formId1'));
});
Copy

Data attributes for Country SELECT element:

data-countries

List of Countries to be loaded or empty but REQUIRED

data-value

Initial selected Country if valid

Data attributes for State SELECT element:

data-states

List of allowed states, could be from multiple countries but REQUIRED

data-country

Initial list of states will be loaded for specified Country, ignored if data-country-select-id is specified and element with provided ID exists

data-country-select-id

ID of Country Select element to link with

data-value

Initial selected State if valid

data-country-filter

List of Country codes for which we should load States (States will be loaded for any specified Country or for any if empty or not specified), for states not in list Select will be disabled

Data attributes for Address Autocomplete INPUT element:

data-autocomplete-address-input

indicates autocomplete to be used

data-default-country

Default Country, where adrress should be search at. If Fieldset or Form input with data-country is missing or empty.

data-autocomplete-address

Target address component. Contains address component type(s) see [[https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingAddressTypes]]

Events

Triggered on SELECT elements and also used for calbacks [[CountrySelect.on]] and [[StateSelect.on]]

• [[CountrySelect.Event]]
• [[StateSelect.Event]]

Requires

'jquery'