Cum sa faci un formular de contact cu PHP si Ajax – partea a doua

In prima parte v-am aratat cum sa creati formularul in fisierul index.html si cum sa faceti validarea in validare.php. In partea a doua va voi arata cum sa adaugati Ajax si desigur,vom stiliza putin formularul. In caz ca nu stiti, Ajax este prescurtarea de la Asynchronous Javascript And XML si face posibila comunicarea cu serverul/fisierul php fara a fi nevoie sa incarce o noua pagina.
In fisierul ajax.js vom adauga urmatoarea functie:

$(document).ready(function() {
	$('form').submit(function(event) {
             // aici veti adauga codul ce-l voi scrie mai departe
        });
});

Sa va explic ce fac acele functii. $(document).ready(function(){}) este folosita pentru a rula scriptul cand pagina s-a incarcat. Iar $(‘form’).submit(function(event) {}) este pentru a rula scriptul dupa ce s-a apasat butonul de submit ( Trimite ) al formularului.

In continuare vom adauga urmatoarele trei linii de cod:

$('.grup-formular').removeClass('eroare-input'); 
$('.alerta-ajutor').remove(); 
$('.alerta-eroare').remove();

Aceste metode ( .removeClass() si .remove() ) vor sterge din formular clasa ‘eroare-input’ si erorile aparute in urma apasarii butonului de submit. Poate va intrebati de ce este nevoie sa le sterg,va voi explica. Cand utilizatorul nu va completa formularul cum trebuie, erorile vor fi afisate unele sub altele ori de cate ori va fi apasat butonul de submit „Trimite”. Asa ca nu vrem ca pagina de contact sa fie plina de erori.

Acum sa preluam datele din formular pentru ca Ajax sa le proceseze:

var formData = {
	'nume' 		: $('input[name=nume]').val(),
	'email' 	: $('input[name=email]').val(),
	'subiect'	: $('input[name=subiect]').val(),
	'mesaj' 	: $('textarea[name=mesaj]').val()
};

Procesarea formularului

Mai departe vom scrie codul pentru procesarea formularului.

$.ajax({
	type 		: 'POST', 
	url 		: 'validare.php', 
	data 		: formData, 
	dataType 	: 'json', 
	encode 		: true
})

.done(function(data) {

	console.log(data); 
	
	//aici vom scrie scriptul pentru erori sau mesajul de succes

	
})

.fail(function(data) {

	// afiseaza orice eroare
	console.log(data);
});

In scriptul de mai sus am folosit metoda complexa JQuery.ajax() pentru a gestiona cererile Ajax cu urmatoarele argumente: type( metoda de transmitere a datelor catre fisierul php, in cazul nostru aceasta fiind „POST” ), url ( reprezinta linkul catre fisierul php care apeleaza AJAX ), data ( reprezinta datele preluate din formular ), dataType ( denota formatul informatiilor returnate ) si encode.

Este important de retinut ca apelurile Ajax sunt asincrone, adica se execută în fundal și nu opresc sau intarzie restul de instructiuni de la executare. Acest lucru este, de asemenea, cunoscut sub numele de cod „nonblocking”. Atunci când face o cerere Ajax , codul urmator după AJAX este rulat imediat, indiferent dacă cererea Ajax a obtinut un rezultat sau nu. Din aceasta cauza, durata executiei este arbitrara si atunci avem nevoie de o functie callback, care sa ruleze doar dupa primirea rezultatului. In cazul nostru, functiile callback sunt .done() si .fail() .

In interiorul functiei callback .done() vom adauga scriptul de mai jos pentru a afisa erorile sau mesajul de succes :

if ( ! data.success) {
	
	if (data.eroare.nume) {
		$('#grup-nume').addClass('eroare-input'); 				
		$('#grup-nume').append('<div class="alerta-ajutor">' + data.eroare.nume + '</div>'); 
		$('.alerta-ajutor').show("fast");
	}

	if (data.eroare.email) {
		$('#grup-email').addClass('eroare-input'); 
		$('#grup-email').append('<div class="alerta-ajutor">' + data.eroare.email + '</div>'); 
		$('.alerta-ajutor').show("fast");
	}

	if (data.eroare.mesaj) {
		$('#grup-mesaj').addClass('eroare-input'); 
		$('#grup-mesaj').append('<div class="alerta-ajutor">' + data.eroare.mesaj + '</div>'); 
		$('.alerta-ajutor').show("fast");
	}

	if(data.eroare.ok){
		$('form').append('<div class="alerta alerta-eroare">' + data.eroare.ok + '</div>');
		$('.alerta-eroare').fadeIn("fast");
	}

} else {

	$('form').append('<div class="alerta alerta-succes">' + data.message + '</div>');
	$('.alerta-succes').fadeIn("fast");
	$('#btn_submit').css('pointer-events', 'none');

}

Iar la urma vom adauga metoda ” event.preventDefault(); ” imediat dupa functia callback .fail() pentru a impiedica reincarcarea paginii.

Stilizarea formularului de contact

Mai jos aveti CSS-ul formularului de contact.

/* CSS style pentru contact form */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin,latin-ext);

body{
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: rgb(48, 48, 48);
    background-image:url(img/bg.jpg);
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.container{
    width: 600px;
    margin:auto;
    margin-top: 60px;
    background: white;
    padding: 10px 25px 25px 25px;
    border-radius:3px;
}

#contact-form input[type="text"], #contact-form textarea{
    width: 100%;
    padding: 11px 12px;
    border-radius: 4px;
    border: 1px solid rgb(179, 179, 179);
    margin-top: 10px;
    background-color: white;
}

#contact-form textarea{
    font-family: 'Open Sans', sans-serif;
    max-width: 100%;
    height: 70px;
}

#contact-form label{
    font-size: 14px;
    font-weight: 600;
}

.alerta-ajutor{
    margin-top: 10px;
    color: rgb(255, 53, 53);
}

#btn_submit{
    color: white;
    background: #16bfb4;
    padding: 8px 40px;
    border:1px solid #16bfb4;
    border-radius: 4px;
}

.eroare-input input[type="text"], .eroare-input textarea{
    border:1px solid rgb(255, 53, 53)!important;
}

.alerta-succes{
    font-weight: 600;
    background: rgb(189, 255, 189);
    padding: 14px;
    border-radius: 4px;
}

.alerta-eroare{
    background: rgb(255, 95, 95);
    padding: 14px;
    border-radius: 4px;
    color: white;
    font-weight: 600;
}

Sper ca ati inteles articolul si daca v-a placut,lasati un comentariu.

2 comentarii

Lasa un comentariu