Napisane przez W tym poradniku pokażę jak stworzyć prosty formularz kontaktowy, obsługiwany ajaxem, czyli bez konieczności przeładowywania strony.
Zaczniemy od htmla, przedstawiam najprostszy formularz chyba z możliwych:
HTML (index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX FORM</title>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js.js"></script>
<style>
.error{color:#f00;border:1px solid #f00;}
</style>
</head>
<body>
<form id="actionForm" action="send.php" method="post">
Imię: <input type="text" name="name" id="name" placeholder="Podaj swoje imię" /><br />
Temat: <input type="text" name="subject" id="subject" placeholder="Podaj temat kontaktu" /><br />
Wiadomość: <textarea name="message" placeholder="Wpisz wiadomość"></textarea><br />
Czy lew jest psem czy kotem? <input type="text" name="question" placeholder="Odpowiedz na pytanie" /><br />
<button type="submit">Wyślij</button>
</form>
</body>
</html>
Teraz w php odbierzemy informacje przesłane z formularza:
PHP (send.php)
<?php
//zapisujemy otrzymane wartości do zmiennych
$name = isset($_POST['name']) ? $_POST['name'] : '';
$subject = isset($_POST['subject']) ? $_POST['subject'] : '';
$message = isset($_POST['message']) ? $_POST['message'] : '';
$question= isset($_POST['question']) ? $_POST['question'] : '';
//na wstepie sprawdzamy czy formularz nie zostal wypelniony przez bota:
if( !in_array(strtolower($question),array('kot','kotem') ) ){
echo json_encode(array('status'=>false,'errors'=>array('question'),'msg'=>"Ty bocie ty!"));
exit;
}
//przygotowujemy sobie zmienne do zwrocenia
$status = true;
$error = array();
$msg = 'Dziękujemy zapraszamy ponownie';
//tutaj robimy walidację jaką chcemy, ja upewniam się że pole 'name' składa się z przynajmniej 3 znaków i składa się jedynie z liter, liczb, spacji oraz '-'
if( !preg_match("/^([a-zA-z0-9 -]{3,})$/",$name) ){
//w przypadku niepoprawnego pola ustawiamy status na false i do tablicy $error dodajemy name pola z bledem
$status = false;
$error[] = 'name';
}
//tutaj upewniam się ze tytul nie jest pusty
if( !preg_match("/^(.+)$/",$subject) ){
//w przypadku niepoprawnego pola ustawiamy status na false i do tablicy $error dodajemy name pola z bledem
$status = false;
$error[] = 'subject';
}
//tutaj upewniam się ze wiadomosc ma przynajmniej 10 znaków
if( !preg_match("/^((.*){10,})$/",$message) ){
//w przypadku niepoprawnego pola ustawiamy status na false i do tablicy $error dodajemy name pola z bledem
$status = false;
$error[] = 'message';
}
//jeżeli wystąpił jakiś błąd zmieniamy komunikat
if( !$status ){
$msg = "Proszę wypełnić formularz poprawnie";
}else{
//tutaj robimy co chcemy robić w przypadku poprawnych danych, np zapisujemy do bazy, wysyłamy maila, etc.
//możemy tu też sprawdzać czy docelowa akcja się powiedzie i jeżeli nie to zmieniamy status na false i msg na konkretną informacę
}
//wyświetlamy wynik całej operacji jako json
echo json_encode(array('status'=>$status,'errors'=>$error,'msg'=>$msg));
exit;
Jeżeli teraz wysłalibyśmy taki formularz to strona by się przeładowała do pliku send.php i otrzymalibyśmy goły json z wynikami operacji. Żeby to zmienić potrzebny nam jest odpowiedni skrypt JavaScript (musimy mieć załączoną bibliotekę jquery).
JAVASCRIPT (js.js)
$(document).ready(function(){
$("form#actionForm").submit(function(e){
e.preventDefault(); //
var form = $(this);
$.post(
form.attr('action'),
form.serialize(),
function(r){
if( r.status ){
form.html(r.msg);
}else{
alert(r.msg);
form.find('.error').removeClass('error');
for( var i=0;i<r.errors.length;i++ ){
var name = r.errors[i];
form.find('input[name="'+name+'"],textarea[name="'+name+'"]').addClass('error');
}
}
return;
},
'json'
);
});
});
Przeanalizujmy źródło js:
3: e.preventDefault() - dzięki tej linijce formularz się nie wyśle standardową akcją
5: $.post - wysyłamy formularz za pomocą AJAXA, requestem POST (można użyć $.get)
6: form.attr('action') - ustawiamy cel wysłania formularza na taki jaki jest w htmlu ustawiony action
7: form.serialize() - przetwarzamy wartosci wszystkich pol formularza na stringa i przekazujemy je do skryptu php
8: function® - jako parametr callback-u (funkcji wywołanej po otrzymaniu odpowiedzi od serwera) podajemy odpowiedź serwera
9: if( r.status ) - sprawdzamy czy w ospowiedzi jest ustawiona wartość status na true
10: form.html(r.msg) - jeżeli powyższe tak to wyświetlamy w miejsce formularza podziękowanie
jeżeli powyższe nie to:
12: alert(r.msg) - wyświetlamy błąd
13: form.find('.error').removeClass('error') - usuwamy wszystkim elementom formularza klasę 'error'
14-17: for(...){ ... } - przelatujemy przez wszystkie błedy i błędnym polom ustawiamy klasę error - za mocą css wyrózniamy te pola
22: 'json' - jako ostatni parametr funkcji post podajemy typ danych jakie otrzmyamy od serwera
DEMO: http://web-talk.pl/demo/933-formularz/
DOWNLOAD: 
formularz.zip 4,45 KB
0 Ilość pobrań
Jeżeli masz jakieś propozycje zmian lub rozbudowy, czekam na informację.
Poradnik jest własnością autora zgodnie z ustawą z dnia 4 lutego 1994 roku o prawie autorskim i prawach pokrewnych. Publikowanie ich na innych forach i serwisach internetowych bez wiedzy i zgody autorów jest surowo zabronione.
Napisane przez 
Napisane przez 
Napisane przez 
Napisane przez 
Napisane przez 
Napisane przez 
Napisane przez 
Napisane przez 
Napisane przez 
