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">
   var smartform = smartform || {};

   smartform.beforeInit = function () {
       smartform.setClientId('[clientId]');
   }

   smartform.afterInit = function() {
   }

    //vytvoří dynamicky formulář a aplikuje na něj smartform
    function createForm(element) {
        element.innerHTML = '<form>' +
            '<div>' +
            '<div><label for="smartform_nazev_2">Název firmy</label> <input class="smartform-instance-2 smartform-company-name" id="smartform_nazev_2" type="text" /></div> ' +
            '<div><label for="smartform_ico_2">IČO</label> <input class="smartform-instance-2 smartform-company-registration-number" id="smartform_ico_2" type="text" /></div>' +
            '<div><label for="smartform_dic_2">DIČ</label> <input class="smartform-instance-2 smartform-company-vat-number" id="smartform_dic_2" type="text" /></div>' +
            '</div>' +
            '</form>';

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

        }

        //provede reinicializaci všech objektů Smartformu na stránce
        smartform.rebindAllForms(afterRebind);

   }
</script>

Zdrojový kód – HTML pro první formulář

<form>
    <input class="smartform-instance-1 smartform-company-name" id="smartform_nazev_1" placeholder="Název firmy" type="text"/>
    <input class="smartform-instance-1 smartform-company-registration-number" id="smartform_ico_1" placeholder="IČO" type="text"/> 
    <input class="smartform-instance-1 smartform-company-vat-number" id="smartform_dic_1" placeholder="DIČ" 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>