Ana Sayfa HTML JQUERY Form Kontrolü

JQUERY Form Kontrolü

Yazar

01 Kasım 2016

3490

JQUERY Form Kontrolü :
Form verilerini JQUERY ile kontrol edeceğiz ve text kutuları boş ise, kırmızı oklarla belirtecek ve işlem yapmayacağız.

Eğer kutular dolu ise PHP dosyamıza verileri gönderecek ve cevabı alacağız…

Java Script KODLARI

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
<script type="text/javascript">
function kapat() {
    $('#bilgi').fadeOut(500);
}
function giris() {
    $('.hata1').hide();
    $('.hata2').hide();
    ktxt = $('#kullanici').val();
    stxt = $('#sifre').val();
    ktxt = jQuery.trim(ktxt);
    stxt = jQuery.trim(stxt);
 
    if(ktxt ==  "") {
        $('.hata1').fadeIn(100);
        $('#kullanici').val(ktxt);
    }
    if(stxt == "") {
        $('.hata2').fadeIn(100);
        $('#sifre').val(stxt);
    }
    if( ktxt != "" || stxt != "" ) {
       // isleme basla
       $('#bilgi').html('<span>Lütfen Bekleyiniz...</span>');
       $('#bilgi').show(300);
 
       $.ajax( {
        type: "POST",
        url: "login.php",
        data:$('#login').serialize(),
        success: function(cevap) {
            $('#bilgi').html(cevap+'<br /><input type="button" name="btnkapat" 
class="btn" value="Kapat" onclick="kapat()" />');
        }
       });
      }
}
 
</script>

function giris() Giriş butonuna tıklandığında fonksiyonu çağırılıyor…
var ktxt = $(‘#kullanici’).val();
var stxt = $(‘#sifre’).val();
text kutuları içerisindeki veriyi Jquery val() -Value- fonksiyonunu kullanarak değişkenlere atılıyor. Daha sonra, verilerin boş olup olmadığını kontrol ediliyor.. Eğer Kullanıcı Adı ve ya şifresinden herhangi birisi boş geçilmiş ise, oklarla uyarı veriyor ve işlemden çıkıyoruz(resimde kullanılabilir)…
Herhangi bir hata yok ise PHP dosyamıza form verilerini gönderiyor ve cevabı alınıyor… Normalde ise, PHP dosyamızda verileri kontrol edecekti, eğer kullanıcı adı ve şifre doğru girilmiş ise oturumu başlatıp javascript yönlendirmesi ile siteye yönlendirilecekti. Eğer kullanıcı adı ve şifre yanlış ise, login formundan çıkmadan hata uyarımızı göndilecekti…

CSS kodları


<style type="text/css">
body {
    background-color: #3F404B;
}
#main {
    position:absolute;
    top:100px;
    left:30%;
    height:120px;
    width:400px;
    background-color: #545364;
    border: 1px solid #5E616F;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align: center;
    padding-top:30px;
    padding-bottom:30px;
}
#bilgi {
    position:absolute;
    height:120px;
    width:400px;
    background-color: #006666;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align: center;
    padding-top:30px;
    padding-bottom:30px;
    top:0px;
    left:0px;
    z-index:1;
    display:none;
}
#bilgi span {
    background-color: #063;
    padding: 3px;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:3px;
    border: 1px solid #0F0;
    color: #FFF;
    display:block;
}
.txt {
    background-color: #EAE9E8;
    padding: 5px;
    border: 1px solid #686F8C;
    font-size: 14px;
}
label{
    cursor:pointer;
    background-color: #F00;
    width: 200px;
    height:20px;
    display:block;
    margin-left:auto;
    margin-right:auto;
}
label:hover {
    background-color: #900;
    color: #FFF;
}
.hata1 {
    font-weight: bold;
    color: #F00;
    display:none;
}
.hata2 {
    font-weight: bold;
    color: #F00;
    display:none;
}
.btn{
    color: #FFF;
    background-color: #0C3;
    border: 1px solid #0F0;
    margin-top:6px;
    padding-top: 6px;
    padding-right: 10px;
    padding-bottom: 6px;
    padding-left: 10px;
    cursor:pointer;
}
.btn:hover{
    color: #FFF;
    background-color: #0F0;
}
</style>

<html>
</head>
<body>
 
<div id="main"><div id="bilgi"></div>
    <form id="login" action="">
        <label for="kullanici">Kullanıcı Adı</label>
        <span class="hata1">&raquo;</span>
            <input type="text" id="kullanici" name="kullanici" class="txt" />
        <span class="hata1">&laquo;</span>
        <br clear="all" />
        <label for="sifre">Şifre</label>
        <span class="hata2">&raquo;</span>
        <input type="text" id="sifre" name="sifre" class="txt" />
        <span class="hata2">&laquo;</span>
        <div class="buton">
            <input type="button" class="btn" id="btn" value="Giriş" onclick="giris()" />
        </div>
</form>
</div>
</body>
</html>

php de

<?php
if(!($_POST)) die('Hacking Attemp');
$adi = trim($_POST['kullanici']);
$sifre = trim($_POST['sifre']);
if($adi == "" or $sifre == "")
    die("Hatalı Giriş Yaptınız...");
 
echo '<span>Kullanıcı Adı:'.$adi.'</span>  <span>Şifre:'.$sifre.'</span>';
?>