frycu.com

Ostatnio miałem więcej czasu, co zaowocowało tym, że drugi dzień z rzędu wrzucam tutorial. Dziś na pierwszy ogień idzie formularz kontaktowy w jQuery.
Zacznijmy od zbudowania zwykłej formy, załóżmy, że posiadać ona będzie 3 podstawowe pola:

1. Imię,
2. Adres e-mail,
3. Wiadomość,
4. Checkbox wymagany do zatwierdzenia warunków dotyczących prywatności składowanych danych.

Zakładamy, że wszystkie pola są wymagane do przesłania wiadomośći.

Cała procedura wysłania formularza wygląda mniej więcej tak:

1. Użytkownik wypełnia wymagane pola formularza.
2. Forma jest badana przez skrypt jQuery pod kątem prawidłowości wprowadzonych danych.
3. Jeśli nie ma błędów, przekaż zmienne z formularza do skryptu po stornie serwera.  W przeciwnym wypadku pokaż formę i wypunktuj błędy.
4. Skrypt po stronie serwera może dodatkowo walidować dane, jeśli nie ma błędów wysyłamy e-maila.

Dodanie JavaScript

Przejdźmy teraz do stworzenia wersji AJAX nadmienionego formularza.
Jedynymi rzeczami jakie będziemy zmuszeni dołączyć do strony to skrypt biblioteki jQuery, który jest do pobrania ze strony oficjalnej projektu:  http://jquery.com/ oraz nasz skrypt jQuery służący do walidacji danych i przesłania ich do skryptu po stronie serwera np. php

$(document).ready(function(){
//Tutaj znajduje się nasz kod, aktywny w chwili załadowania treści strony
});

Banalnie proste, podłączmy zatem akcję w chwili kliknięcia na opcję wyślij, u nas button o id=”submit”

$(document).ready(function(){
$(“#submit”).click(function(){
return false;
});
});

Banalnie proste spójrzmy zatem na całościowy kod opatrzony w komentarze.

$(document).ready(function(){

var errorColor   = ‘#F3D2D3′;
var correctColor = ‘#F2F2F2′;
var errorMarks   = ‘background-color';

$(“#reset”).click(function(){
// czyścimy wszystkie pola formularza
document.getElementById(‘form’

).reset();
});

$(“#submit”).click(function(){

// ustalamy kolory tła pól na nie wskazujące jakichkolwiek błędów
$(“#name”).css(errorMarks, correctColor);
$(“#email”).css(errorMarks, correctColor);
$(“#message”).css(errorMarks, correctColor);
$(“#agree”).css(errorMarks, correctColor);

// zmienna błędu głobalnego
var hasError = false;
// wyrażenie regularne służące do walidacji adresu e-mail
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

// pobieramy wartości odpowiednich pól
var nameVal    = $(“#name”).val();
var emailVal   = $(“#email”).val();
var messageVal = $(“#message”).val();
var agreeVal   = $(“#agree:checked”).val();

// sprawdzamy wartości wypełnionych pól formularza
if(nameVal == ”) {
$(“#name”).css(errorMarks, errorColor);
hasError = true;
}
if(emailVal == ”) {
$(“#email”).css(errorMarks, errorColor);
hasError = true;
} else if(!emailReg.test( emailVal )) {               $(“#email”).css(errorMarks, errorColor);
hasError = true;
}
if(messageVal == ”) {
$(“#message”).css(errorMarks, errorColor);
hasError = true;
}
if (agreeVal == null) {
hasError = true;
}

// jeśli globalna zmienna błędu jest ustawiona na false
if(hasError == false) {
// dynamiczne przejście transparencji formularza o numerze id=”form” do wartości 0.30
$(“#form”).fadeTo(“slow”, 0.30, function() {
// dorzucamy kod z obrazkiem sygnalizującym procedowanie danych przez skrypt
$(“#form”).after(‘<div class=”loader”><img src=”img/loading.gif” alt=”Loading…” /></div>’);
// moment kulminacyjny naszej aplikacji w jQuery – przesyłamy dane do skryptu php
$.ajax({
type: “POST”,
url:  “sendmail.php”,
data: { name: nameVal, company: companyVal, address: addressVal, phone: phoneVal, email: emailVal, message: messageVal },
// msg zawiera wartość zwróconą przez skrypt php w przypadku poprawnego zakończenia działania
success: function(msg) {
// zapiszmy wynik działania skryptu na stronie html w div o id=”content”
$(“#content”).html(msg);
// schowajmy fomę
$(“#form”).fadeOut(“slow”);
},
// wystąpiły błędy
error: function (XMLHttpRequest, textStatus, errorThrown) {
$(“#content”).html(‘Przepraszamy, wiadomość nie mogła zostać wysłana.’);
$(“#form”).fadeOut(“slow”);
}
});

});
}
else
return false;
});
});

<?php

// odbieramy zmienne przesłane przez AJAX metodą POST
$Name        = $_POST[‘name’];
$SenderEmail = $_POST[‘email’];
$MailContent = $_POST[‘message’];

$TargetEmail = ‘biuro@company.pl';

// Constant headers
$headers  = ‘MIME-Version: 1.0′ . “\r\n”;
$headers .= ‘Content-type: text/plain; charset=utf-8′ . “\r\n”;
$headers .= “From: “.$Name.” <“.$SenderEmail.”>\r\n”;

// wysyłamy wiadomość e-mail
if( @mail( $TargetEmail, ‘Wiadomość z formularza na stronie company.pl’, $MailContent, $headers ) ) {
$content = ‘Wiadomość została wysłana pomyślnie. Dziękujemy za zainteresowanie naszą ofertą.';
}
else
$content = ‘Przepraszamy, wiadomość nie mogła zostać wysłana.';

// ta wartosc w przypadku sukcesu odbierze nasz skrypt w klauzuli success w funkcji $.ajax()
echo $content;
?>

.