Form serializálása és továbbküldése jQuery segítségével

Ez a kis tutorial, rendkívül könnyen megérthető, egyszerűen replikálható, és hihetetlenül hasznos lesz.

A leírásban egy rendkívül egyszerű contact formot fogok használni. A mezők: név, email és telefonszám lesznek. A form adatai úgy jutnak el a szerverhez, hogy ez nem ismeri a hozza jutó adatokat, és ami ennél is fontosabb, a javascript ami küldi az sem ismeri a form tartalmát

Bizonyára már számtalanszor megtörtént, hogy egy formot ajax-szal szerettünk volna elküldeni a szerver oldalnak. Ez szép és jó, de a gond akkor kezdődik, mikor a formunk nagy, akár több, mint 100 eleme van. Ebben az esetben a régi jó megoldás, mikor egyenként vesszük át az értékeket nem elfogadható.

JQuery logó
var elem1 = $('#elem1').val();
var elem1 = $('#elem1').val();
...
var elemn = $('#elemn').val();

De mondhatjuk, hogy ez még a jobbik eset, hisz ebben az esetben tudjuk hogy a formnak egy véges számú eleme van. A rosszabbik eset az, ha a formunk egy generált form. Ebben az esetben a form elemei nem ismertek, csak a generálás végén jönnek létre.

Természetesen léteznek megoldások, melyeket alkalmazhatunk (pl. checkboxok esetén az elemek neve egy tömb lesz), de ezek egyike sem igazán kényelmes.

A következőkben épp az ilyen esetekben alkalmazott egyszerű megoldást szeretném bemutatni a jQuery keretrendszer segítségével.
Az egész leírás lényege, hogy a nézetet teljesen elvonatkoztassuk a szerveroldaltól, illetve a javascriptől. Így vegül is teljesen mindegy, hogy hogyan néz ki a formunk, a szerver egy tömböt fog kapni, ezt bejárva értelmezi a kapott adatokat.

1. lépés: Form felépítése

Mint már fentebb is említettem a formunk rendkívül egyszerű lesz.

<script src="jquery-1.3.2.js" type="text/javascript"><!--mce:0--></script>
<script src="test.js" type="text/javascript"><!--mce:1--></script>
<script type="text/javascript"><!--mce:2--></script>
<form id="frm">
	<label for="nev">Nev:</label>
<input id="nev" name="nev" type="text" />
 
	<label for="email">E-mail:</label>
<input id="email" name="email" type="text" />
 
	<label for="telefonszam">Telefonszam:</label>
<input id="telefonszam" name="telefonszam" type="text" />
 
	<a id="send" href="#">SEND</a></form>
<div id="response" style="display: none;">
	Response:</div>
<div id="status" style="display: none;">
	Status:</div>

A form melett van kettő div elemünk is. Ezekre szükségünk van hisz valahogy a visszatérített választ is szeretnénk látni.

Most hogy meglennénk a formunkkal, lássuk, hogy jön be a képbe a jQuery, azaz a JavaScript.

2. lépés: test.js – form adatainak serializálása és továbbküldése

$(document).ready(function() {
	Editor.initEventHandlers();
});
var Editor = {
     initEventHandlers: function () {
          $("#send").click(function(e){
          Editor.formsubmit();
          return false;
     });
},
     formsubmit: function () {
          var url = "process.php";
          $.post(
               url,
               $('#frm').serialize(),
               Editor.onsubmitcomplete
          );
     },
     onsubmitcomplete : function(data,textStatus){
          $('#response').show();
          $('#status').show();
          $('#response').append(data);
          $('#status').append(textStatus);
    }
}

Talán az egész leírás leglényegesebb részlete a fenti kódrészlet. Láthatjuk, hogy először is inicializáljuk az Editor objektum initEventHandlers metódusát. Ez viszonylag egyszerű dolgot végez. A „send” id link click eseményét felülírja az Editor.formsubmit metódussal.

A formsubmit serializálja a form elemeit és ezt továbbküldi POST-tal a process.php-nak. A szervertől kapott választ az „onsubmitcomplete” metódus dolgozza fel. Első lépésben láthatóvá teszi a „response” es a „status” diveket, majd kitölti őket a szervertől kapott válasszal. Az „onsubmitcomplete” függveny egy callback fügveny mely akkor kerül meghívásra, amikor a szervertől válasz érkezik. Ez egy jQuery függvény, természetesen neve lehet bármi. Három paramétere van, a „data”, „textStatus” es az „XMLHttpRequest”. Mi ebből az első kettőt használjuk. A data a visszatérített válasszöveg lesz. Ez amit effektív válaszol a szerver. A második paraméter a request státusza, ezt a „status” divben tároljuk.

3 lépás: process.php – szerver oldal.

PHP logó

A szerver oldalon példánkban rendkívül egyszerű dolgot végzünk. Kiíratjuk a $_POST változó tartalmát, hisz mi erre vagyunk kíváncsiak, hogy a jQuery miképpen küldi el a form elemeit.

Nagyjából meg is lennénk. A test.php lefuttatása után ha mindent jól végeztünk a következőt kellene lássuk:

 
Response:
 
array(3) {
  ["nev"]=&gt;
  string(6) "Lorand"
  ["email"]=&gt;
  string(16) "***@gmail.com"
  ["telefonszam"]=&gt;
  string(10) "0742356789"
}
 
Status:success

Remélem sikerült szemléltetnem, hogy a form serializálása milyen egyszerűvé teszi a nagyobb formok feldolgozását, de én mindenképpen kisebb formoknál is tudnám ajánlani. Sokan amiatt sírnak, hogy nem tudják validálni a formjukat. Erre én azt szoktam mondani, hogy egy form elemeinek az eggyenkénti validálása már amúgy is kiment a divatbol, hisz sokszor nem is tudjuk, hogy is néz ki a formunk. Erre is megvannak mara a technikák: Livevalidation, jQuery validation plugin. Mindenkinek tudom őket ajánlani, rendkívül egyszerűen testreszabhatóak, és könnyen implementálhatóak.

Tehát még egyszer a leírás lényege: a nézetet teljesen, vagy legalábbis lehetőleg a legjobban elvonatkoztatni a szerver oldaltol (controller), így a jövőbeni módosításoknál nem kell a js állományunkat is módosítsuk.

Hasznos linkek:

  1. jQuery
  2. jQuery ajax
  3. Live validation
  4. jQuery validation plugin

További jó kódolást.


Szerkesztve: BlackY. Helyesírási hibák és ékezetek javítása, e-mail cím eltávolítása.

9 HOZZÁSZÓLÁS

  1. Sziasztok.

    Egy gondom lenne,a checkbox state nem checked nem hozza át a serializált tömbbe.

  2. Szia,
    Hat ez nem nagy gond – hatul megnezed ha letezik, ha nem akkor ewzt jelenti nincs becjekkolva.

  3. Nem mai tutorial, de hasznos !
    Viszont nekem nem működik.

    Mint a segitőkész leírásoknál általában az a baja, hogy vagy nem az elején kezdi, vagy nem ér a végére.
    A php file pl. nincs itt megírva.
    Én megírtam, a $_POST -ot foreachel, de ay a hiba-yit adja hogy:

    Parse error: syntax error, unexpected T_DOUBLE_ARROW, expecting ‘,’ or ‘;’ in process.php on line 8
    Status:success

  4. A nyolcadik sorban hianyzik egy pontosvesszo, valoszinusitheto a sor vegerol. Ezt latatlanban irom, de valoszinu ott a hiba. Amugy nem nagy kunszt, foreachel bejarod a postot s minden lepesben kiiratod az illeto erteket vagy akarmi mast.

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét