Bu dersimizde form elemanlarının değerlerini xajax kütüphanesini kullanarak nasıl gönderip alacağımızı öğreneceğiz.

İlk dersimizde (10 dakikada Xajax öğrenin) belirttiğim gibi bu örnekleri çalıştırabilmek için xajax kütüphanesini uygulamayla aynı dizine kopyalamanız gerekmektedir eğer bu kütüphaneniz yoksa buradan indirebilirsiniz.

Öncelikle giriş kodlarımızı ekliyor ve fonksiyonumuzun adını xajax'a tanıtıp form_gonder fonksiyounumuzu oluşturuyoruz.

<?php
require_once("xajax_core/xajax.inc.php");
$xajax = new xajax();

$xajax->registerFunction("form_gonder");
function form_gonder($deger)
{
extract($deger); // form değişkenlerini dışarı aktarır
$icerik = "<p>Adı Soyadı : ".$ad_soyad."<p/>";
$icerik.= "<p>Cinsiyet : ".$cinsiyet."<p/>";

$objResponse = new xajaxResponse();

$objResponse->assign("div_form","innerHTML",$icerik);
$objResponse->assign("div_form","style.color","#".$renk);

return $objResponse;
}
$xajax->processRequest();
?>

Buraya kadar yaptıklarımızı biraz inceleyelim. Daha önce yapmış olduğumuz örnekten farklı olarak bu fonksiyonumuzda iki ifade dikkatimizi çekmeli; bunlardan birincisi extract(); komutu. Bu komut formdan gönderdiğimiz değişkenleri fonksyon içerisinde aynı değişken adıyla kullanmamızı sağlar.

Örnek olarak; "id" yada "name" özelliği ad_soyad olan bir form elemanının değeri fonksiyon içerisine gönderildiği taktirde, extract(); komutuyla $ad_soyad değişkeni bu form elemanının değerini alır. Aşağıdaki kodlarda form elemanlarının isimleri ile yukarıdaki fonksiyonumuzda kullandığımız isimleri karşılaştırabilirsiniz.

Dikkatimizi çeken ikinci ifade ise $objResponse->assign() fonsiyonunun almış olduğu "innerHTML" ve "style.color" özelliği. Bu özelliklerden ilki; gönderilen verinin bir html içeriği olduğunu ikincisi ise bir stil bilgisi olduğunu belirtir.

Şimdi formumuzu ve form elemanlarımızı oluşturalım

<form id="bilgi_frm">
<p>Adı Soyadı : <input type="text" name="ad_soyad" /></p>
<p>
Cinsiyetiniz :
Erkek <input type="radio" name="cinsiyet" value="Erkek"/>
Kadın <input type="radio" name="cinsiyet" value="Kadın"/>
</p>
<p>
<label>Uğurlu Renginiz : </label>
<select name="renk">
<option value="FF0000">Kırmızı</option>
<option value="00FF00">Yeşil</option>
<option value="0000FF">Mavi</option>
<option value="FFFF00">Sarı</option>
</select>
</p>
</form>

Yukarıdaki formumuzda dikkatinizi çekmek istediğim iki nokta var ilki neden form "name" kullanmayıp "id" özelliğini kullandığım bunun sebebi firefox ve benzeri tarayıcılar "name" özelliğini form tagında tanımıyor. İkincisi ise form tagının içerisinde "method" özelliğini kullanmama gerek kalmaması. Onun sebebi ise gönderme işlemini kullandığımız komutun yapmasıdır.


Son olarak javascript kodlarımızı, formumuzu gönderecek butonu ve çağırılan verilerin gösterileceği "div" taglarını oluşturuyoruz.

<?php $xajax->printJavascript();?>
<input type="button" value="Gönder" onclick="xajax_form_gonder(xajax.getFormValues('bilgi_frm'));" />
<div id="div_form"></div>


Artık php fonksiyonlarımızı sayfa içerisinde çağırırken başına "xajax_" eklememiz gerektiğini anlamışsınızdır.

Son kodumuzda fonksyonumuzu çağırıyor ve içerisine xajax.getFormValues('bilgi_frm') bilgisini gönderiyoruz bu komut xajax sınıfı içerisinde form verilerini göndermede kullanılır ve değişkenler bir dizi içerisinde gönderilir, bu diziyi açmak ve form elemanlarını aynı isimde değişkenlere yerleştirmek için dersimizin başında belirttiğim extract(); komutunu kullanırız.

Ekran çıktısı şekildeki gibidir.



Yukarıda açıkladığımız kodlarımızın tamamı aşağıda verilmiştir.

<?php
require_once("xajax_core/xajax.inc.php");
$xajax = new xajax();

$xajax->registerFunction("form_gonder");
function form_gonder($deger)
{
extract($deger); // form değişkenlerini dışarı aktarır
$icerik = "<p>Adı Soyadı : ".$ad_soyad."<p/>";
$icerik.= "<p>Cinsiyet : ".$cinsiyet."<p/>";

$objResponse = new xajaxResponse();

$objResponse->assign("div_form","innerHTML",$icerik);
$objResponse->assign("div_form","style.color","#".$renk);

return $objResponse;
}
$xajax->processRequest();
?>

<form id="bilgi_frm" method="post">
<p>Adı Soyadı : <input type="text" name="ad_soyad" /></p>
<p>
Cinsiyetiniz :
Erkek <input type="radio" name="cinsiyet" value="Erkek"/>
Kadın <input type="radio" name="cinsiyet" value="Kadın"/>
</p>
<p>
<label>Uğurlu Renginiz : </label>
<select name="renk">
<option value="FF0000">Kırmızı</option>
<option value="00FF00">Yeşil</option>
<option value="0000FF">Mavi</option>
<option value="FFFF00">Sarı</option>
</select>
</p>
</form>

<?php $xajax->printJavascript();?>
<input type="button" value="Gönder" onclick="xajax_form_gonder(xajax.getFormValues('bilgi_frm'));" />
<div id="div_form"></div>