Demo – dynamicky vytvořený formulář

Smartform po načtení stránky vyhledává označená vstupní políčka (elementy input) a k nim připojuje našeptávače. Tak je to u prvního formuláře na této stránce.

Pokud formuláře vznikají dynamicky až po načtení stránky, je nutné Smartform inicializovat voláním metody smartform.rebindAllForms(). To ukazuje druhý formulář na této stránce.

Běžný formulář

Dynamicky vytvořený formulář

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('smartform');
    }

    /* Zapne zobrazování ikonek a validačních zpráv. */
    smartform.afterInit = function () {
        smartform.getInstance("smartform-instance-1").phoneControl.setShowValidationStateEnabled(true);
        smartform.getInstance("smartform-instance-1").phoneControl.setShowMessageEnabled(true);
    }


    //vytvoří dynamicky formulář a aplikuje na něj smartform
    function createForm(element) {
        element.innerHTML = '<form><input class="smartform-instance-2 smartform-phone-number" id="phone" placeholder="Zadejte celé telefonní číslo" required="" type="text" /><div id="result" style="display:none">&nbsp;</div></form>';

        //callback, který se zavolá po rebindu formulářů
        function afterRebind() {
            console.log("afterRebind")
            var dynamickaInstance = smartform.getInstance('smartform-instance-2');
            dynamickaInstance.setFocusFieldId('phone');
        }

        smartform.rebindAllForms(afterRebind);
    }
</script>

Zdrojový kód – HTML pro formulář

<form>
   <input class="smartform-phone-number" id="phone" placeholder="Zadejte celé telefonní číslo" required="" type="text" />
</form>

Zdrojový kód – HTML pro druhý formulář

Samotné tělo formuláře je definováno v JavaScriptu.

<form>
    <button onclick="createForm(this.parentNode);">Dynamicky vytvořit formulář</button>
</form>