Demo - kontaktní formulář

Toto je příklad použití Smartformu v e-shopu.

Kontaktní formulář:

Zdrojový kód - HTML:

  
  <h2>Kontaktní formulář:</h2>

		<div class="demo-form">                                                                          
        <form action="order.php" method="POST">                                                            
            <div>                                                                                          
                <label for="jmeno">Jméno a přijmení</label>                                                
                <input id="jmeno" type="text" name='jmeno' />                                              
            </div>                                                                                         
          	<div>                                                                                          
          	    <label for="smartform_ulice">Ulice a číslo</label>                                                   
          	    <input id="smartform_ulice" type="text" class="smartform-street-and-number" name='smartform_ulice' />          
          	</div>                                                                                         
          	<div>                                                                                          
          	    <label for="smartform_obec">Obec</label>                                                             
          	 	<input id="smartform_obec" type="text" class="smartform-city" name='smartform_obec'/>                            
          	</div>                                                                                         
          	<div>                                                                                          
          	    <label for="smartform_psc">PSČ</label>                                                               
          	   	<input id="smartform_psc" type="text" class="smartform-zip" name='smartform_psc'/>                             
          	</div>                                                                                         
            <div id="vysledek" style="margin-left: 110px; margin-top:6px;" class="invisible" ></div>        
            <div>                                                                                          
                <input id="odesli"  type="submit" value="Odešli objednávku"/>                              
            </div>                                                                                         
                                                                                                     
            <input type='hidden' name='validationType'  id='validationType'/>                              
                                                                                                     
        </form>                                                                                            
    </div>                                                                                                 
  

Zdrojový kód - JavaScript:

  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script type="text/javascript" src="https://secure.smartform.cz/api/v1/smartform.js" async></script>
  <script type="text/javascript">
    var smartform = smartform || {};
    
    smartform.beforeInit = function () {
        smartform.setClientId('smartform');
    }
    smartform.afterInit = function () {
        smartform.getInstance().addAnnounceCallback(announceCallback);
        $('#validationType').val("NOTHING");
    }
    function announceCallback(validationType, addressArray) {
        $('#validationType').val(validationResultTypeToString(validationType));
        validationAddress();
    }
    /** Prubezne validuje adresu*/
    function validationAddress(){
        $('#vysledek').empty();
        //server musi fungovat, vypise vysledek validace
        var result = '';
        var type = $('#validationType').val();
        		
            if (type == "HIT" || type == "MANY" || type == "TOOMANY"){
              result +='<img id="ico" src="../images/notification_done.png" /> ';
              result += "Adresa je v pořádku.";
              $('#vysledek').show();
            } 
            else if (type == "INSUFFICIENT_DATA") {
              result +='<img id="ico" src="../images/notification_error.png" /> ';
              result += "Neplatná/nekompletní adresa.";
            }
            else if (type == "NOTHING") {
              result +='<img id="ico" src="../images/notification_warning.png" /> ';
              result += 'Adresa nebyla nalezena.';
            }
            else{
              $('#vysledek').hide();
            }
            $('#vysledek').append(result);
            
    }

    $(document).ready(function(){
      $("#psc").blur(function(){
        setTimeout(showErrorresult, 10); 
      });
      $("#obec").blur(function(){
        setTimeout(showErrorresult, 10);
      });
      $("#ulice").blur(function(){
        setTimeout(showErrorresult, 10);
      });
    });

    function showErrorresult(){

      if (!smartformInputIsFocus()){ 
        $('#vysledek').show();
      }
    } 

    function smartformInputIsFocus(){
      if ( ($('#ulice').is( ":focus" ) || $('#obec').is( ":focus" ) || $('#psc').is( ":focus" )) )
        return true;
      else
        return false; 
    }

    // * Jeste nez se presmerujeme na vyrizovaci stranku, tak se do hidden pole vyplni hodnota, zda jsou jiz zvalidovana data 
    $("#odesli").click(function(){
      if ($('#validationType').val() == "NOTHING" || $('#validationType').val() == "INSUFFICIENT_DATA") {
        var r = confirm("Adresu se nám nepodařilo zvalidovat.
Pokud jste si jistí, že jste adresu zadali správně, pokračujte stisknutím tlačítka \"OK\"?");
        if (r) {
          return true;
        }
        else
          return false;
      }
      
    });

  /** Pri potvrzení formuláře enterem, zavolání kliknutí na button a zakaze refresh */
  $("#idForm").keypress(function(event) {
      if (event.which == 13) {
          event.preventDefault();
          $("#odesli").click();
      }
  });

  /** Převede enum SmartFormResultType na string */
  function validationResultTypeToString(resultType){
    switch (resultType){
      case smartform.ValidationResultType.HIT:
        return "HIT";
      case smartform.ValidationResultType.MANY:
        return "MANY";
      case smartform.ValidationResultType.TOOMANY:
        return "TOOMANY";
      case smartform.ValidationResultType.NOTHING:
        return "NOTHING";
      case smartform.ValidationResultType.INSUFFICIENT_DATA:
        return "INSUFFICIENT_DATA";
    }
  }
</script>

  

Hlavní navigace: