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ó.

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.

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"]=>
  string(6) "Lorand"
  ["email"]=>
  string(16) "***@gmail.com"
  ["telefonszam"]=>
  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.