Demo – dva formuláře

Použití dvou formulářů se Smartformem na jedné HTML stránce. Každému formuláři můžeme nastavit, z jaké země se budou adresy našeptávat. Smartform lze použít pro našeptávání adres z těchto zemí:

  • Česká republika
  • Slovenská republika

Adresa zákazníka:

 

Dodací adresa:

 

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]');
   }
   
    smartform.afterInit = function () {
        smartform.getInstance('smartform-instance-zakaznik').addressControl.setCountry('CZ')
        smartform.getInstance('smartform-instance-dodaci').addressControl.setCountry('CZ')
    }

    /** Ve formulari nastavi naseptavanou zemi podle hodnoty v combu #country. */

    function changeCountry(instanceType){
        var country = document.getElementById("country-"+instanceType).value
        smartform.getInstance('smartform-instance-'+instanceType).addressControl.setCountry( country );
    }
                                                                                                                                                                                        
</script>

Zdrojový kód – HTML pro adresu zákazníka:

<form>
    <div>
        <div ><label for="smartform_ulice_zakaznik">Ulice a číslo</label> <input class="smartform-instance-zakaznik smartform-address-street-and-number" id="smartform_ulice_zakaznik" type="text" /></div>
        <div ><label for="smartform_obec_zakaznik">Obec</label> <input class="smartform-instance-zakaznik smartform-address-city" id="smartform_obec_zakaznik" type="text" /></div>
        <div><label for="smartform_psc_zakaznik ">PSČ</label> <input class="smartform-instance-zakaznik smartform-address-zip" id="smartform_psc_zakaznik " type="text" /></div>
        <div>
            <label for="country-zakaznik">Země</label>
            <select id="country-zakaznik" onchange="changeCountry('zakaznik')">
                <option selected="selected" value="CZ">Česká republika</option>
                <option value="SK">Slovenská republika</option>
            </select>
        </div>
    </div>
</form>

Zdrojový kód – HTML pro dodací adresu:

<form>
    <div>
        <div><label for="smartform_ulice_dodaci">Ulice a číslo</label> <input class="smartform-instance-dodaci smartform-address-street-and-number" id="smartform_ulice_dodaci" type="text" /></div>
        <div><label for="smartform_obec_dodaci">Obec</label> <input class="smartform-instance-dodaci smartform-address-city" id="smartform_obec_dodaci" type="text" /></div>
        <div><label for="smartform_psc_dodaci">PSČ</label> <input class="smartform-instance-dodaci smartform-address-zip" id="smartform_psc_dodaci" type="text" /></div>
        <div>
            <label for="country-dodaci">Země</label>
            <select id="country-dodaci" onchange="changeCountry('dodaci')">
                <option selected="selected" value="CZ">Česká republika</option>
                <option value="SK">Slovenská republika</option>
            </select>
        </div>
    </div>
</form>