Form Kontrolü

  1. KısayolKısayol reportŞikayet pmÖzel Mesaj
    LuCiFeR
    LuCiFeR's avatar
    Kayıt Tarihi: 25/Eylül/2005
    Erkek

    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

  2. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Media
    Media's avatar
    Kayıt Tarihi: 08/Mayıs/2007
    Erkek

    bu ajax olayını bende tam çözemedim biri sevabına döküman yazsa iyi olur.


    ....
  3. KısayolKısayol reportŞikayet pmÖzel Mesaj
    snnyk
    snnyk's avatar
    Kayıt Tarihi: 28/Mayıs/2007
    Erkek

    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ış (:


    snnyk.com - code is poetry all that i know...
  4. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Mc_cO_By
    Mc_cO_By's avatar
    Kayıt Tarihi: 30/Nisan/2006
    Erkek

    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.

  5. KısayolKısayol reportŞikayet pmÖzel Mesaj
    LuCiFeR
    LuCiFeR's avatar
    Kayıt Tarihi: 25/Eylül/2005
    Erkek

    Ben calıstıramadım hocam bunu

  6. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Mc_cO_By
    Mc_cO_By's avatar
    Kayıt Tarihi: 30/Nisan/2006
    Erkek

    Burdan jQuery'i indir hocam.

    Sonra html sayfanın olduğu klasörün içine jquery.js ismiyle kaydet.

    Sorun düzelecektir.

  7. KısayolKısayol reportŞikayet pmÖzel Mesaj
    cemnet
    cemnet's avatar
    Kayıt Tarihi: 18/Eylül/2007
    Erkek

    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;

  8. KısayolKısayol reportŞikayet pmÖzel Mesaj
    LuCiFeR
    LuCiFeR's avatar
    Kayıt Tarihi: 25/Eylül/2005
    Erkek

    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ı

  9. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Mc_cO_By
    Mc_cO_By's avatar
    Kayıt Tarihi: 30/Nisan/2006
    Erkek

    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>

     

Toplam Hit: 1867 Toplam Mesaj: 9