ÜGEnet.com » Script

javascript ile 2 farklı formdaki bir alandan diğerine değer atama

Bahadır ÜGE — Sat, 26 Jun 2010 19:28:30 +0000

Bazen iki farklı form üzerindeki değerlerin birbirine atanmasına ihtiyaç duyulabilir. Bunun için basit javascript kodu ile amacınıza ulaşabilirsiniz.

Formlarınızı oluştururken mutlaka forma ve form elementlerine ID atamayı unutmayın. Bu ID'lerin eşsiz (Unique) olmasına dikkat edin. Bir DOM kodunda ID'ler asla çakışmamalıdır. Ben genelde forma verilen name (Ad) ile ID alanını aynı değerde tutmayı tercih ederim.

"deneme1" adında bir form oluşturduk. 2 adet input mevcut bunlardan biri button diğeri text tipinde. text1 alanına girilen değeri onclick olayı ile bak() adlı bir javascript'e gönderip, bunun "deneme2" formundaki "text2" input'una değer olarak atanmasını sağlayacağız.

javascript ise ;

şeklinde olacak.

Sonuç :

Aynı işlemi aritmetik işlem uygulayarak örneklemenizi çoğaltabilirsiniz. Tüm Browser'larda çalıştığını göreceksiniz.

İyi projelerinizde kullanmanız dileğiyle,

Paylaş

PHP, Xajax kütüphanesi ile CSS ve Stillerle oynamak.

Bahadır ÜGE — Sat, 26 Jun 2010 19:27:22 +0000

XAJAX, PHP ile geliştirilmiş bir AJAX kütüphanesidir. Javascript ile neredeyse hiç boğuşmadan PHP foksiyonlarının yetenekleri ile eşsiz uygulamalar geliştirilebilen bu kütüphaneyihttp://xajaxproject.org/ adresinden indirebilirsiniz.

XAJAX Kütüphanesi ile CSS ve stillerde çalışmak adına aşağıdaki kodları incelemenizi tavsiye ediyorum.
Burada dikkat edilmesi gereken husus stilleri assign ederken, javascript syntaxlarında olduğu gibi "-" tire kullanmadan, 2. kelimenin baş harfi birinci kelimeye bitişik ve büyük harfle tanımlanmalıdır.

Bune göre aşağıdaki örneklere bakacak olursak;

bakcground-color – backgroundColor,
font-wieght – fontWeight şeklinde yazılmıştır.

// xajax kütüphanesini include ediyoruz. include("config/xajax/xajax_core/xajax.inc.php"); $xajaxDeneme = new xajax(); // $xajaxDeneme adında bir xajax objesi oluşturuyoruz.


/* Değişik olaylar için oluşturduğumuz xajax
*  fonksiyonlarını register ediyoruz. 
*/
$xajaxDeneme->registerFunction("arkaPlanRengiDegistir");
$xajaxDeneme->registerFunction("textYazi");
$xajaxDeneme->registerFunction("kalinYazi");
$xajaxDeneme->registerFunction("punto20Yap");
/*
* Xajax ile oluşalabilecek hata v.b. 
* gibi durumları izlemek için debug metodunu
* açıyoruz.
* false : pasif
* true    : aktif
*/
$xajaxDeneme->setFlag("debug",false);
// Fonsiyonlar işleme alacak olan metodu çağıralım.
$xajaxDeneme->processRequest();
echo '';
echo '';
/* Xajax javascript dosylarınının oluşturulmasını sağlayalım.
*  bu metodu  tag'i sonrasında veya 
*  tag'inden önce tanımlamak gerekir.
*/
$xajaxDeneme->printJavascript('config/xajax/'); 
echo '';
echo '';
// Üzerinde işlem yapacağımız bir tag yaratıp ona bir id verdik 
echo 'DENEME YAZISI';
echo '
';
echo '';
echo ' - ';
echo '';
echo ' - ';
echo '';
echo ' - ';
echo '';
echo '
';
echo '';
echo '';
/**
 * Çağrıldığı zaman DIV'in arkaplanını kırmızı yapar
 *
 * @return XML
 */
function arkaPlanRengiDegistir()
{
    $objResponse = new xajaxResponse(); // Xajax Response oluşturuyoruz.
    $objResponse->assign("degisecekYazi","style.backgroundColor","red"); 
    
    return $objResponse;
}
/**
 * Çağrıldığı zaman DIV'in içindeki text'i sar yapar
 *
 * @return XML
 */
function textYazi()
{
    $objResponse = new xajaxResponse(); // Xajax Response oluşturuyoruz.
    $objResponse->assign("degisecekYazi","style.color","yellow"); 
    
    return $objResponse;
}
/**
 * Çağrıldığı zaman DIV'in içindeki text'i kalın yazar
 *
 * @return XML
 */
function kalinYazi()
{
    $objResponse = new xajaxResponse(); // Xajax Response oluşturuyoruz.
    $objResponse->assign("degisecekYazi","style.fontWeight","bold"); 
    
    return $objResponse;
}
/**
 * Çağrıldığı zaman DIV'in içindeki text'i 20 punto yazar
 *
 * @return XML
 */
function punto20Yap()
{
    $objResponse = new xajaxResponse(); // Xajax Response oluşturuyoruz.

$objResponse->assign("degisecekYazi","style.fontSize","20pt"); return $objResponse; } ?>

şayet varolan bir css class'ını bir ID atamak gerekiyorsa bunun için

$objResponse->assign("degisecekYazi","className","denemesitili");

şeklinde bir tanım yapmak gerekir. Buradan da anlaşılacağı üzere attributeclass olarak değil className olarak tanımlanmıştır.

İyi kodlarda kullanmanız dileğiyle.

Paylaş

Xajax ile Form Validasyonu ( Xajax Form Validation)

Bahadır ÜGE — Sat, 26 Jun 2010 19:22:17 +0000

XAJAX ile PHP’nin tüm control structure’larını kullanıp form doğrulamak mümkün. Aşağıdaki kısa tanımlara bakarak bunu kolaylıkla yapabilirsiniz.

Daha önceki makaleleri inceleyerek XAJAX ile ilgili temel bilgileri edinip bu makaleyi ona göre kullanmanızı tavsiye ederim.


ini_set("display_errors","on");
error_reporting(6143);
include("xajax/xajax_core/xajax.inc.php");

$xajax = new xajax();
$xajax->setFlag("debug",true);
$xajax->registerFunction("formKontrol");
$xajax->processRequest();

$xajax->printJavascript("xajax/");
?>
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="tr" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XAJAX FORM VALIDATION BY A. BAHADIR UGEtitle>
head>

<body>

<form method="post" name="userLoginForm" id="userLoginForm">
    <fieldset>
    <legend>User Loginlegend><br/>
    <label>Username :label><br />
    <input name="username" id="username" type="text" /><br />
    <label>Password :label><br />
    <input name="password" id="password" type="password" /><br />
    <br />
    <input type="button" value="Giriş" onclick="xajax_formKontrol(xajax.getFormValues('userLoginForm')); return false;"/> fieldset>
form>
body>
html>

function formKontrol($formData)
{
    $objResponse = new xajaxResponse();

    if (isset($formData["username"])) // $formdata dizisinde "username" elemanı varmı kontrol ediliyor.
    {
        /* Gelen username içeriğinin boş yada sayısal olup olmadığı kontrol ediliyor.
        Siz burada gelen değerin varlığını veritabanından bile sorgulayabilir,
        bu kullanıcı adının var olup olmadığını öğrenebilirsiniz. Ya da
        istediğiniz koşulu, yani size uyan koşulu  yazabilirsiniz.
        */
        if (trim($formData["username"]) == '' || is_numeric($formData["username"]))
        {
            // Olumsuz durumda ekrana hata mesajı yazdırılıyor ve forma geri dönülüyor.
            $objResponse->alert("Username alanı boş yada sayısal değer içeremez !");
            $objResponse->script("document.forms['userLoginForm'].username.select();");
            return $objResponse;
        }
    }
    else
    {
        $objResponse->alert("Username değeri boş");
        return $objResponse;
    }

    if (isset($formData["password"])) // $formdata dizisinde "password" elemanı varmı kontrol ediliyor.
    {
        // Username için yapılan tanımların tamamı burası içinde geçerli.

        if (trim($formData["password"]) == '' || is_numeric($formData["password"]))
        {
            // Olumsuz durumda ekrana hata mesajı yazdırılıyor ve forma geri dönülüyor.
            $objResponse->alert("Password alanı boş yada sayısal değer içeremez !");
            $objResponse->script("document.forms['userLoginForm'].password.select();");
            return $objResponse;
        }
    }
    else
    {
        $objResponse->alert("Password değeri boş");
        return $objResponse;
    }

    /* Her iki koşulun karşılanması durumunda
    buraya istediğiniz değeri yazdırabilir, istediğiniz işlemi yaptırabilirsiniz.
    Loginin olumlu olması durumnda session değerlerini oluşturup,
    login istenen sayfaya $objResponse->redirect("URL"); methodu ile gönderim yapabilirsiniz.
    */

    $objResponse->alert("Değerler doğru olarak girildi");

    return $objResponse;
}
?>

Detaylı sorularınız için aşağıdaki formu doldurup, sorularınızı yöneltebilirsiniz. İyi günlerde kullanmanız dileğiyle

A. Bahadır ÜGE

Paylaş

XAJAX ile tek bir form alanındaki değeri gönderme

Bahadır ÜGE — Fri, 19 Mar 2010 09:59:44 +0000

XAJAX ile toplu olarak bir forma bağlı olan tüm input değerlerini, dizi değişken olarak gönderebildiğiniz gibi, bazen form içerisindeki tek bir alanın içindeki değere göre işlem yapmak gerekebilir.

Xajax kütüphanesini http://xajaxproject.org/ adresinden indirebilir ve bu adresten detaylı bilgi alabilirsiniz.

Örneğin, bir Combo-Box içinden gelen değer, diğer bir form alanındaki değeri veritabanından sorgulayarak oluşturacaksa, tüm form alanlarının bir fonksiyona gönderilmesinden ziyade, sadece sorguyu etkileyip, sonucu döndürecek olan alanın değerinin gönderilmesi rasyonel olan işlemdir.

Şimdi öncelikle aşağıda koda bakalım ve sonra satır satır açıklayalım.

ini_set("display_errors","on");// Ben her zaman hata kodlarının Development modunda olmasına dikkat ederim. include("xajax/xajax_core/xajax.inc.php");// Bir alt klasöre koyduğumuz XAJAX kütüphanesini include ediyoruz


$xajax = new xajax();//$xajax adında bir  xajax objesi oluşturuyoruz.
$xajax->setFlag("debug",true);// Bu method, pop-up debug penceresi açacak, bir hatanız var ise buradan takip edebileceksiniz
$xajax->registerFunction("secileniGoster");// Register edeceğimiz fonksiyonlar. Açıklamaları fonksiyon üzerinde
$xajax->registerFunction("sonucYaz");
$xajax->processRequest();// İstekleri bu method ile çağırıyoruz. Tüm fonksiyon tanımlamalarımızın arkasından, en son bu methodu çağırmalıyız.
echo '';
echo '';
$xajax->printJavascript('xajax/');  // HEAD tagi içerisinde XAJAX'ın javascript dinamiklerini oluşturuyoruz.
echo '';
echo '';
echo '';
echo 'Adınızı Yazınız : ';
echo '';// Combo-Box seçimini değiştiği an  secileniGoster fonksiyonu çalışacak. burada en önemli unsur xajax.$('secim').value tanımlaması, register edilmiş fonksiyon içerisinde onchange eventi ile sadece 'secim' combo-box'ındaki değeri gönderecektir.
echo 'SECIM YAPIN';
echo 'SECIM 1';
echo 'SECIM 2';
echo 'SECIM 3';
echo '';
echo '';
echo ';// Burada tanımladığımız onclick eventi ise tüm form değişkenlerini  .getFormValues methodu ile array olarak sonucYaz fonksiyonuna gönderir.
echo 'HENUZ SONUC YAZILMAMIS';
echo '';
echo '';
function secileniGoster($secilen)
{
    $objResponse = new xajaxResponse();//Dönüş yapacak XAJAX objesi oluşturuluyor.
    
    $objResponse->alert($secilen);// combo-box'dan gelen değer alert ile ekrana gönderiliyor. Siz bu bölüme bu değişken değeri ile yapmak istediğiniz fonksiyon zincirini tanımlayabilirsiniz.
    
    return $objResponse;
}
function sonucYaz($formData)
{
    $objResponse = new xajaxResponse();
    
    $objResponse->assign("sonuc","innerHTML",nl2br(print_r($formData,true)));// $formData bir array ve nl2br (New Line to 
 fonkisyonu ile sonuc adındaki div'e array'den gelen dataları yazdırıyoruz.

// Siz bu arada veritabanına yazdırma yapabilir ya da benzeri bir dolu işlevi çalıştırabilirsiniz. return $objResponse; } ?>

İyi günlerde kullanmanız dileğiyle,

A. Bahadır ÜGE

Paylaş