gistfile1.txt

$(document).ready(function(){
  
  $('div#inputwarning').hide();
 
  $('.submit').click(function(){
 
    var empty = 0;
    $(':input.required').each(function(){
      var field = $(this);
      if($(this).val().length == 0) {
        field.addClass('mustfill')
        $('div#inputwarning').fadeIn(300);
        empty = 1;
      }
      else field.removeClass('mustfill');
    });
    
    if(empty) return false;
    $('div#inputwarning').hide();
    
    // Haetaan formin inputtien valuet
    var name = $('input[name="name"]').val();
    var email = $('input[name="email"]').val();
    var url = $('input[name="url"]').val();
    var msg = $('textarea[name="msg"]').val();
 
    // Luodaan datastringi, tyyliin name=nimi&email=jotain@jotain.com&url=jotain jne...
    var dataString = 'name=' + name + '&email=' + email + '&url=' + url + '&msg=' + msg;
 
    // Lahetetaan ajax-pyynto process.php:lle, sisaltaen formin inputtien valuet
    // Ja kun process.php on valmis, luodaan ajaxilla refreshaamatta sivua uus divi, ja fade siihen
 
    $.ajax({
      type: "POST",
      url: "process.php",
      data: dataString,        
      success: function(data) {
        $('input[name="name"]').val('');
        $('input[name="email"]').val('');
        $('input[name="url"]').val('');
        $('textarea[name="msg"]').val('');
          var new_div = $('<div/>').addClass('comment');
          new_div.append('<span class="name">' + name + '</span> <span class="email">' + email + '</span> <span class="url">' + url + '</span> <span class="msg">' + msg + '</span> <span class="timestamp">' + data + '</span>');
        new_div.hide();
        $('div#kommenttiboksi').prepend(new_div);
        new_div.fadeIn(300);
      }
    });
    return false;
  });
});