AJAXový kontaktný formulár efektne

7. marca 2008 · Igor Kulman

Keď som pre svoj web vytváral kontaktný formulár, chcel som niečo bude pôsobiť moderne a efektne a zároveň ma ochráni pred spamom. Rozhodnutie teda padlo na AJAX, s tým, že na odosielanie formulára nebude slúžiť klasické tlačidlo (input type=“submit”), ale tlačidlo (input type=“button”) odosielajúce formulár pomocou AJAXu, čo zabráni odosielaniu formulára botmi.

Samotný formulár je veľmi jednoduchý:

<div class="my-form" id="kform">
<form action="" method="post" name="f" onsubmit="return validateForm()">
<div class="input">
<label>Meno:</label>
<input name="e_name" value="" id="e_name" onchange="validatePresent(document.forms.f.e_name,'e_name_i');" />
<span id="e_name_i" class="info">Povinné</span>
</div>
<div class="input">
<label>E-mail:</label>
<input name="e_email" value="" id="e_email" onchange="validatePresent(document.forms.f.e_email,'e_email_i');" />
<span id="e_email_i" class="info">Povinné</span>
</div>
<div class="input">
<label>Text:</label>
<textarea name="e_text" id="e_text" cols="25" rows="15"></textarea>
<span class="info" id="e_text_i">Povinné</span>
</div>
<div class="input">
<label> </label>
<input type="button" value="Odoslať »" class="submit" onclick="check_mail()"/>
</div>
<input type="hidden" name="action" value="send" />
</form>
</div>

Pri prňaci s AJAXom využívam knižnicu prototype. Za zmienku stojí až AJAXová funcia check_mail(), ktorá kontroluje vyplnenie požadovaných položiek:

function check_mail() {
  //odstránenie červených rámčekov z formulárových prvkov
  $("e_name").removeClassName("red");
  $("e_text").removeClassName("red");
  $("e_email").removeClassName("red");
  $("e_name_i").removeClassName("red");
  $("e_text_i").removeClassName("red");
  $("e_email_i").removeClassName("red");
  var error=0;
  //kontrola vyplnenie povinných prvkov
  //ak prvok nie je vyplnený, pridá sa červený rámček pomocou CSS
  if ($F("e_name")=="") {
    error++;
    $("e_name_i").addClassName("red");
    $("e_name").addClassName("red");
  }
  if ($F("e_email")=="") {
    error++;
    $("e_email_i").addClassName("red");
    $("e_email").addClassName("red");
  }
  if ($F("e_text")=="") {
    error++;
    $("e_text_i").addClassName("red");
    $("e_text").addClassName("red");
  }
  //ak sa vyskytli chyby, formulár sa neodošle k spracovaniu
  if (error>0)
    return false;
  else
    send_mail();
}

Samotné odoslanie formulára po jeho kontrole je už len obyčajný AJAX Request:

function send_mail() {
  new Ajax.Request(
  "/sk/kontakt",
    {
      method:   "post",
      parameters: {
      email:    $F("e_email"),
      name:     $F("e_name"),
      text:     $F("e_text")
    },
    onSuccess: function(transport) {
    //namiesto formulára sa zobrazí text  
      if (transport.responseText == "ok") {
        $("kform").innerHTML="<p>E-mail úspešne odoslaný.</p>";
      }
      }
    }
  );
}

Odoslanie formulára pomocou PHP je už myslím triviálne.