Demo – získání informací o zadané adrese
Každému formuláři můžeme nastavit, z jaké země se budou adresy našeptávat. Nastavení země se provádí metodou SmartformInstance.setCountry().
První formulář používá k zobrazení podrobností o zvalidované adrese validační callback. Druhý formulář využívá skrytá pole, do kterých jsou automaticky vyplněny podrobnosti o adrese. Více informací o skrytých polích zde.
Formulář s validačním callbackem:
Formulář se skrytými poli:
Zdrojový kód – JavaScript:
<script type="text/javascript" src="https://client.smartform.cz/v2/smartform.js" async></script>
<script type="text/javascript">
var smartform = smartform || {};
smartform.beforeInit = function () {
smartform.setClientId('[clientId]');
}
/* Nastaví validační callback pro první formulář. */
smartform.afterInit = function() {
smartform.getInstance('smartform-instance-1').addressControl.addValidationCallback(validationCallback);
}
/* Nastaví pro instanci zemi, pro kterou se má našeptávat. */
function changeCountry(instanceNumber){
var country = document.getElementById('country_select-'+instanceNumber).value;
smartform.getInstance('smartform-instance-' + instanceNumber).addressControl.setCountry(country);
}
/* Validační callback. Pokud je HIT, zobrazí popup s podrobnostmi o adrese. */
function validationCallback(response) {
let result = document.querySelector(".result");
if (response.result.type === smartform.AddressValidationResultType.HIT) {
result.innerHTML = "HIT: " + response.result.addressArray[0];
}
}
</script>
Zdrojový kód – HTML pro první formulář:
<form>
<input class="smartform-instance-1 smartform-address-street-and-number" id="smartform_ulice1" placeholder="Ulice a číslo" type="text" />
<input class="smartform-instance-1 smartform-address-city" id="smartform_obec1" placeholder="Obec" type="text" />
<input class="smartform-instance-1 smartform-address-zip" id="smartform_psc1" placeholder="PSČ" type="text" />
<select id="country_select-1" onchange="changeCountry(1)">
<option selected="selected" value="CZ">Česká republika</option>
<option value="SK">Slovenská republika</option>
</select>
<div class="result"></div>
</form>
Zdrojový kód – HTML pro druhý formulář se skrytými poli:
<form>
<input class="smartform-instance-2 smartform-address-street-and-number" id="smartform_ulice2" placeholder="Ulice a číslo" type="text" />
<input class="smartform-instance-2 smartform-address-city" id="smartform_obec2" placeholder="Obec" type="text" />
<input class="smartform-instance-2 smartform-address-zip" id="smartform_psc2" placeholder="PSČ" type="text" />
<select id="country_select-2" onchange="changeCountry(2)">
<option selected="selected" value="CZ">Česká republika</option>
<option value="SK">Slovenská republika</option>
</select>
<input class="smartform-instance-2 smartform-address-field-FORMATTED_ADDRESS_WHOLE" name="cela_adresa-2" type="hidden" />
<input class="smartform-instance-2 smartform-address-field-FORMATTED_ADDRESS_FIRST_LINE" name="prvni_radka-2" type="hidden" />
<input class="smartform-instance-2 smartform-address-field-FORMATTED_ADDRESS_SECOND_LINE" name="druha_radka-2" type="hidden" />
<input class="smartform-instance-2 smartform-address-field-DISTRICT" name="okres-2" type="hidden" />
<input class="smartform-instance-2 smartform-address-field-DISTRICT_CODE" name="okres_kod-2" type="hidden" />
<input class="smartform-instance-2 smartform-address-field-REGION" name="kraj-2" type="hidden" />
<input class="smartform-instance-2 smartform-address-field-REGION_CODE" name="kraj_kod-2" type="hidden" />
<input class="smartform-instance-2 smartform-address-field-CITY" name="mesto-2" type="hidden" />
<input class="smartform-instance-2 smartform-address-field-CITY_CODE" name="mesto_kod-2" type="hidden" />
<input class="smartform-instance-2 smartform-address-field-POST" name="posta-2" type="hidden" />
</form>