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.