Demo - dva formuláře

Ukázka některých pokročilý funkcí Smartformu. Především je zde předvedeno použití dvou formulářů se Smartformem na jedné HTML stránce. Také je ukázáno několik úprav vzhledu Smartformu a volání callbacku.

Adresa zákazníka:

• změněný vzhled - barvy menu našeptávače
• na poli prvním poli je zvětšen našeptávač na 20 řádků

Dodací adresa

• na posledním poli je našeptávač vypnut
• po vložení adresy je zavolána callback funkce, která zobrazí vybrané části adresy

  
  <script type="text/javascript" src="http://smartform.cz/api/v1/smartform.js"></script>
  <script type="text/javascript">
    smartform.beforeInit = function () {
        smartform.setClientId('[zde doplňte klientské ID]');
    }
    smartform.afterInit = function () {
        // ziskani instance prvniho Smartform formulare
        var instanceZakaznik = smartform.getInstance('smartform-instance-zakaznik');

        // nastaveni elementu pro vystup defaultniho statusu    
        instanceZakaznik.setStatusBox('stavAdresyZakaznika');

        // nastaveni barvicek
       instanceZakaznik.setBackgroundColor('gray');
       instanceZakaznik.setForegroundColor('#009');
       instanceZakaznik.setSelectionBackgroundColor('#CC6699');
       instanceZakaznik.setBorderColor('rgb(100%,100%,0%)');

       // nastaveni velikosti naseptavace na max 20 radku
       instanceZakaznik.getBox('smartform-street-and-number').setLimit(20);

       // ziskani instance druheho Smartform formulare
       var instanceDodaci = smartform.getInstance('smartform-instance-dodaci');

       // dodani callbacku pro vlastni reseni vypisovani statusu
       instanceDodaci.addAnnounceCallback(function (validationType, addressArray) {
         var result = '<br/><div>výsledek validace: '+validationType+' &nbsp;(viz <a href="dokumentace-api.html#ValidationResultType">ValidationResultType</a>)</div>';
         if (validationType == smartform.ValidationResultType.HIT) {
           var address = addressArray[0];
           result += '<div>část obce: '+address[smartform.AddressFieldType.PART]+'</div>';
           result += '<div>okres: '+address[smartform.AddressFieldType.DISTRICT]+'</div>';
         }
         var element = document.getElementById('addressResultDodaci');
         element.innerHTML = result;
       }
       );
    }
  </script>
  

  
  <h2>Adresa zákazníka:</h2>
  <form>
	<div >
	    <label for="ulice_zakaznik">Ulice a číslo</label>
	    <input id="ulice_zakaznik" type="text" class="smartform-instance-zakaznik smartform-street-and-number" />
	    <span for="ulice_zakaznik">20 položek našeptávače</span>
	</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 id="stavAdresyZakaznika"></div>
  </form>
  </div>

  <h2>Dodací adresa</h2>
  <form>
	<div >
	    <label for="ulice_dodaci">Ulice</label>
	    <input id="ulice_dodaci" type="text" class="smartform-instance-dodaci smartform-street" />
	</div>
	<div >
	    <label for="ulice_dodaci">Číslo</label>
	    <input id="ulice_dodaci" type="text" class="smartform-instance-dodaci smartform-number" />
	</div>
	<div>
	    <label for="obec_dodaci">Obec</label>
	 	<input id="obec_dodaci" type="text" class="smartform-instance-dodaci smartform-city" />
	</div>
	<div>    
	    <label for="psc_dodaci">PSČ</label>
	   	<input id="psc_dodaci" type="text" class="smartform-instance-dodaci smartform-zip" />
	   	<span>našeptávač PSČ je vypnutý</span>
	</div>
	<div id="addressResultDodaci">
	</div>
  </form>