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:
- Imię,
- Adres e-mail,
- Wiadomość,
- 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:
- Użytkownik wypełnia wymagane pola formularza.
- Forma jest badana przez skrypt jQuery pod kątem prawidłowości wprowadzonych danych.
- 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.
- 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;
?>
Masz teraz w reku podstawę do budowania coraz to bardziej skomplikowanych formularzy, nie wahaj się eksperymentować z ustawieniami.
Gorąco zachęcam do przestudiowania dokumentacji jQuery.
Original post by frycu
nasze menu wygląda 