Demo – dynamicky vytvořený formulář

První formulář je běžný formulář. Druhý formulář je vytvářen dynamicky stisknutím tlačítka. Pro dynamické vytvoření formuláře je nutno použít metodu smartform.rebindAllForms().

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() {
        smartform.getInstance('smartform-instance-1').all.suggestBox.setBackgroundColor('gray');
   }

    //vytvoří dynamicky formulář a aplikuje na něj smartform
    function createForm(element) {
        element.innerHTML = `
            <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" />
            </form>`;

        //callback, který se zavolá po rebindu formulářů
        function afterRebind () {
            var dynamickaInstance = smartform.getInstance('smartform-instance-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-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" />
</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>