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>