Form Kontrolü
-
arkadaşlar merhaba javascript yada ajax ile form kontrolü yaptırmak istiyorum netten bir sürü buldum ama editleyemedim bir türlü. Alanlarım şöyle ;
isim , soyisim , nick , cepno , şehir ( selectbox ) , eposta , şifre ve şifreonay
bu alanların hepsinin doldurulduktan sonra post ile baska bıryere gonderılmesını ıstıyorum. Yardımcı olursanız sevınırım
-
bu ajax olayını bende tam çözemedim biri sevabına döküman yazsa iyi olur.
-
LuCiFeR bunu yazdı:
-----------------------------
arkadaşlar merhaba javascript yada ajax ile form kontrolü yaptırmak istiyorum netten bir sürü buldum ama editleyemedim bir türlü. Alanlarım şöyle ;
isim , soyisim , nick , cepno , şehir ( selectbox ) , eposta , şifre ve şifreonay
bu alanların hepsinin doldurulduktan sonra post ile baska bıryere gonderılmesını ıstıyorum. Yardımcı olursanız sevınırım
-----------------------------şehiri neden doğrulatıyosun hoca zaten selectbox mış (:
-
Form nasıl doğrulatılır pek bi fikrim yoktu, kafamdan birşeyler yapmaya çalıştım, amelelik etmiş, boşuna 50 tane kontrol uygulamış olabilirim,
ciddi bi iş için kullanma amacın varsa, doğru düzgün bi tane bakman daha iyi olur.
Yok ben göz gezdiricem, öğrenmeye çalışıyorum dersen, kodlar aşağıda =)
Şunu da inceleyebilirsin.
Css
<style type="text/css">
div#uyelik
{
background-color:#FFC;
border: 1px solid;
-moz-border-radius: 10px;
width:300px;
padding:5px 10px;
}
input
{
float:right;
}
select
{
float:right;
}
.gecersiz
{
border-color:#F00;
}
.gecerli
{
border-color:#0F0;
}
</style>JS
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function()
{
$("#gonder").attr("disabled","disabled");
$("#gonder").click(function()
{
alert($('form').serialize());
});
$("input").change(function()
{
if($(this).val()!="")
{
$(this).removeClass('gecersiz');
$(this).addClass('gecerli');
}
else
{
$(this).removeClass('gecerli');
$(this).addClass('gecersiz');
}
if($('#ad').val()!="" && $('#sad').val()!="" && $('#nick').val()!="" && $('#tel').val()!="" && $('#email').val()!="" && $('#sifre').val() == $('#sifre_tekrar').val() && $('#sifre').val() != "" && $('#sifre_tekrar').val() != "")
{
$('#gonder').attr('disabled','');
$('#sifre').removeClass('gecersiz');
$('#sifre').addClass('gecerli');
$('#sifre_tekrar').removeClass('gecersiz');
$('#sifre_tekrar').addClass('gecerli');
}
else
{
$('#gonder').attr('disabled','disabled');
$('#sifre').removeClass('gecerli');
$('#sifre').addClass('gecersiz');
$('#sifre_tekrar').removeClass('gecerli');
$('#sifre_tekrar').addClass('gecersiz');
}
});
});
</script>Html
<body>
<div id="uyelik">
<form method="post">
<p>Ad:<input id="ad" type="text" name="ad" /></p>
<p>Soyad:<input id="sad" type="text" name="sad" /></p>
<p>Nick:<input id="nick" type="text" name="nick" /></p>
<p>Telefon:<input id="tel" type="text" name="tel" /></p>
<p>
<select name="sehir">
<option id="izmir" value="İzmir">İzmir</option>
<option id="istanbul" value="İstanbul">İstanbul</option>
<option id="ankara" value="Ankara">Ankara</option>
</select>
<br />
</p>
<p>Email:<input id="email" type="text" name="email" /></p>
<p>Şifre:<input id="sifre" type="text" name="sifre" /></p>
<p>Şifre Tekrar: <input id="sifre_tekrar" type="text" name="sifre_tekrar" /></p>
<p><input type="button" id="gonder" name="gonder" value="Gönder" /></p>
</form>
</div></body>
Verileri başka sayfaya göndermek istersen, alert($('form').serialize()); kısmını
$.post('sayfan.php',$('form').serialize()); olarak değiştir.
-
Ben calıstıramadım hocam bunu
-
Burdan jQuery'i indir hocam.
Sonra html sayfanın olduğu klasörün içine jquery.js ismiyle kaydet.
Sorun düzelecektir.
-
buton clickde "return fonk_adi" yaparsın. Altdaki koduda kendine göre uyarlarsın çözülür kanımca sorun.
@snnyk sanırım ilk değer "seçiniz" tarzı bişey onun için kontrol istiyodur arkadaş.
script;
if(document.getElementById('txtAdi').value == )
{
alert("boş geçmeyiniz");
return false;
}
return true;
-
uye kaydı ıcın kullandıgınız bir form kontrolunu paylasırsanız sevınırım textın boş olup olmadıgıını kontrol edecek bıde sıfrelerın bırbırıyle uyumlu olp olmadıgını
-
jQuery için basitçe göstermek gerekirse, şöyle açıklayayım:
$("input") //bu tırnak içindeki değeri yakalar
$("#deger") //bu da id'si değer olanı yakalar
.val() //value, yani değeri verir
Birleştirmek gerekirse, aşağıdaki gibi bi text alanımız var diyelim:
Ad:<input id="ad" type="text" name="ad" />
Bunu yakalamak için, aşağıdaki gibi bir kod yazabiliriz
if($('#ad').val() == "") //burda dedik ki, eğer ad id'sine sahip olan bölüm boşsa
{
//Boşsa burdaki işlemleri yap
}
else
{
//Değilse burdakileri
}
Aşağıdakilere uydurmak gerekirse, değişecek tek değer, id olucaktır.
Soyad:<input id="sad" type="text" name="sad" />
if($('#sad').val() == "")
Eşitlik durumunu kontrol etmek istersen de, yine aynı mantık
$('#sad').val() == $('#ad').val() //Bunu bir if döngüsü içine alırsan; eğer sad id'li bölümün değeri, ad id'li bölümün değerine eşitse anlamına gelir
Bu kodları nereye yazıcam dersen,
<script type="text/javascript">
$(function()
{
//Buraya yazıcaksın
});
</script>
