Cu toate acestea, în ultimul articol am fost, probabil, dezavantajul este că a fost dificil să se conecteze mai multe forme, și anume, script-ul ar trebui să duplica care se ocupă de forma, care nu este foarte frumos. În acest articol, vom corecta acest punct. În plus, formularul va funcționa fără fereastra modală.
Da, voi pune părinții și clasele pentru a face mai ușor să înțeleg ce și de ce. Modificați designul formularului, atât de interesant. Într-un articol viitor, se poate conecta la această formă reCapthsa de la Google, și a stabilit un obiectiv, „eveniment“ pe succes, așa că se pregătește o serie de articole.
Cum se face formularul de feedback în fereastra modală
Să mergem. Deoarece fereastra modală va fi apelată folosind jQuery din pluginul Remodal. apoi înainte de eticheta de închidere
conectați jQuery însuși și pluginul Remodal. Mai jos vom adăuga un script care va fi responsabil pentru trimiterea formularului fără a reîncărca pagina. Se pare ca aceasta:
Fiți atenți la calea către fișiere. Am decis să punem aproape toate fișierele în dosarul modform pentru a facilita conectarea la proiect.
Înainte de a trece la marcarea formularului, conectăm fișierele css ale ferestrei modale. Fac acest lucru între capul etichetelor:
Pentru a face mai interesant:
Deci, acum mergeți la aspectul formei și al butonului care o numește. Să începem cu butonul.
Deși codul, la prima vedere, o mulțime, de fapt, totul nu este atât de dificil. Întreaga formă este înfășurată într-un div cu o clasă de remodală. Are un id de date-remodal cu același parametru ca și butonul. Acesta este primul formular. Este datorită lor, când faceți clic pe buton, se deschide fereastra necesară, în cazul în care există mai multe pe pagină.
În interiorul formei în sine cu seturi de câmpuri. Este important să acordați atenție paragrafului cu clasa "msgs". Aici este afișat mesajul de trimitere sau eroare de succes. Anterior, mesajul a fost afișat direct în interiorul formularului, înlocuind tot conținutul din interior.
Un lucru mai mult. Un câmp ascuns cu clasa formInfo. Este necesar pentru a distinge aplicațiile și pentru a înțelege ce formă a fost completat de utilizator, în cazul în care acestea sunt diferite. Trebuie doar să completați valoarea textului dorită.
La sfârșitul articolului, vă voi arăta cum să faceți o fereastră din diferite locuri de pe site și să înțelegeți ce buton a făcut clic pe utilizator.
Acum, să analizăm un script care ne va ajuta să trimitem formularul fără să reîncărcați pagina. L-am numit form.js:
În scenariu, spunem că în momentul afișării unui mesaj despre trimiterea reușită sau nereușită, ascundem antetul. Și în 3 secunde vom returna totul la loc și vom curăța câmpurile formularului împreună cu mesajul.
Fișierul care va trimite datele primite este mail.php. Iată codul său:
Există mai multe verificări în el:
Dacă datele provin de la metoda POST, dacă da, verificați dacă câmpurile principale sunt goale sau goale, apoi scrieți la variabile și trimiteți.
În cazul în care datele nu este atins de un POST, aruncarea la domiciliu (de exemplu, utilizatorul, cumva am ajuns chiar pe pagina mail.php), și nu avem nevoie de ea, deoarece acesta poate trimite un e-mail gol.
Aceasta completează prima parte.
Nu uitați să specificați cutiile poștale. Apropo, scrisorile mail.ru nu pot veni de pe ip-ul tău. Ei bine și în mod corect, utilizatorii mail.ru și IE ar trebui să sufere.
Și scrieți un mic script care, atunci când faceți clic pe butonul nostru (link), va înlocui informațiile din câmpul ascuns din titlu:
Adică, noi spunem că, atunci când faceți clic pe un element cu linkButton de clasă, să ia textul din titlul și locul său în intrare cu parametrul nume formInfo, în cazul în care:
linkButton - clasa butonului nostru;
formInfo - valoarea numelui câmpului ascuns;
Acest lucru este foarte convenabil atunci când împrumutul este făcut de tipul de magazin online și există mai multe produse pe el. Pentru a nu face mai multe forme, trebuie doar să atribuiți un titlu butonului și să aflați cu ușurință ce produs, tarif sau serviciu comandat de utilizator.
Dacă apare eroarea "nu a fost găsită", verificați mai întâi calea către mail.php din fișierul form.js