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>