Demo - dynamický formulář

Použití Smartformu v dynamicky vytvořeném formuláři. Po stisku tlačítka bude do stránky pomocí Javascriptu přidán nový formulář pro dodací adreasu, a to i s aplikovaným Smartformem.

Adresa zákazníka:

  
  <script type="text/javascript" src="http://smartform.cz/api/v1/smartform.js"></script>
  <script type="text/javascript">
  
    function createForm(element) {
        element.innerHTML = '<div class="demo-form">\n\
          <h2>Dodací adresa</h2>\n\
          <form>\n\
        	<div >\n\
        	    <label for="ulice_dodaci">Ulice</label>\n\
        	    <input id="ulice_dodaci" type="text" class="smartform-instance-dodaci smartform-street" />\n\
        	</div>\n\
        	<div >\n\
        	    <label for="ulice_dodaci">Číslo</label>\n\
        	    <input id="ulice_dodaci" type="text" class="smartform-instance-dodaci smartform-number" />\n\
        	</div>\n\
        	<div>\n\
        	    <label for="obec_dodaci">Obec</label>\n\
        	 	<input id="obec_dodaci" type="text" class="smartform-instance-dodaci smartform-city" />\n\
        	</div>\n\
        	<div>\n\
        	    <label for="psc_dodaci">PSČ</label>\n\
        	   	<input id="psc_dodaci" type="text" class="smartform-instance-dodaci smartform-zip" />\n\
        	</div>\n\
        	<div id="stavAdresyDodaci">\n\
        	</div>\n\
          </form>\n\
          </div>\n\
        ';
        
        function afterRebind () {
            var instanceDodaci = smartform.getInstance('smartform-instance-dodaci');
            instanceDodaci.setFocusFieldId('ulice_zakaznik');
            instanceDodaci.setStatusBox('stavAdresyDodaci');
            smartform.afterInit();
        }
        
        smartform.rebindAllForms(true, afterRebind);
    }
  
    smartform.beforeInit = function () {
        smartform.setClientId('[zde doplňte klientské ID]');
    }
    smartform.afterInit = function () {
		var instanceZakaznik = smartform.getInstance('smartform-instance-zakaznik');
        instanceZakaznik.setStatusBox('stavAdresyZakaznika');
	}
  </script>
  

  
  <h2>Adresa zákazníka:</h2>
  <div>
  <form>
	<div >
	    <label for="ulice_zakaznik">Ulice a číslo</label>
	    <input id="ulice_zakaznik" type="text" class="smartform-instance-zakaznik smartform-street-and-number" />
	</div>
	<div>
	    <label for="obec_zakaznik">Obec</label>
	 	<input id="obec_zakaznik" type="text" class="smartform-instance-zakaznik smartform-city" />
	</div>
	<div>    
	    <label for="psc_zakaznik">PSČ</label>
	   	<input id="psc_zakaznik" type="text" class="smartform-instance-zakaznik smartform-zip" />
	</div>
	<div class="demo-status" id="stavAdresyZakaznika"></div>
  </form>
  </div>
  

  <div id="dodaci_adresa">
      <button onclick="createForm(this.parentNode);">Přidat dodací adresu</button>
  </div>