View Single Post
Sponsorlu Bağlantılar
Zoque.Forum
Advertisement
Old 04.05.2008   #1 (permalink)
darkfaceofmoon
 
Üyelik Tarihi: 11.02.2007
Yer: Ankara
Mesaj: 60
Ajax ile yüklenen içerikten form submit etmek

Merhaba arkadaşlar,

Bir formum var ve bu formun geldiği sayfayı yine ajax ile açıyorum. [ www.gulcemobilya.com.tr adresinde iletişime tıklayınca gelen sayfa]
Bu sayfada bir formum var ve ben bu formun kontrolleri ve sonrasında da action'ını jquery'nin post methodu ile yapmaya çalışyorum. Aslına bakılırsa daha önce birkaç kez kullandım bunu ama aradaki fark bu kez ajax ile gelen sayfa içinden post etmek olacak. Bu nedenle de id.leri alamıyor sanırım js.
Aynı soruna kodlar üzerinden gidecek olursak...

Bu formun olduğu sayfa:
HTML Code:
        <form method="post" action="JavaScript:;">
                <h2>Adınız:</h2>
                <input type="text" name="strName" id="Name" />
                <h2>Firma Adı:</h2>
                <input type="text" name="strFirm" id="Firm" />
                <h2>Telefon:</h2>
                <input type="text" name="strTel" id="Tel" />
                <h2>E-Posta:</h2>
                <input type="text" name="strEmail" id="Email" />
                <h2>Mesajınız</h2>
                <textarea name="strMessage" id="Message" rows="5" ></textarea>

                <div align="right" style="margin:5px 0" id="submitButtonContainer">
                     <input type="hidden" name="strCommand" value="sendForm" id="submitbutton" />
                </div>

            </form>
Bu da javascriptimizin özeti, aralara ben burada görülmesi için notlar düştüm bold olarak:
Kod:
$(document).ready(function(){
    $("#submitbutton").click(function(){     //Düğmeyi ve diğer field.ları "#id" ile yakaladım.
        $(".warning").hide();
        var hasError = false;
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        var FirmVal = $("#Firm").val();
        var TelVal = $("#Tel").val();
       
        var NameVal = $("#Name").val(); //Id ile yakaladık.
        if(NameVal == '') {
            $("#Name").after('<div class="warning">Lütfen adınızı giriniz!</div>');
            hasError = true;
        }
       
        var EmailVal = $("#Email").val();
        if(EmailVal == '') {
            $("#Email").after('<div class="warning">Lütfen geçerli bir e-posta adresi giriniz!</div>');
            hasError = true;
        } else if(!emailReg.test(EmailVal)) {   
            $("#Email").after('<div class="warning">Lütfen geçerli bir e-posta adresi giriniz!</div>');
            hasError = true;
        }
       
        var MessageVal = $("#Message").val();
        if(MessageVal == '') {
            $("#Message").after('<div class="warning">Lütfen mesaj alanını boş bırakmayınız!</div>');
            hasError = true;
        }
       
       
        if(hasError == false) {
            $(this).hide();
            $("#submitButtonContainer").append('<img src="img/loading.gif" alt="Yükleniyor" id="loading" />');
           
            $.post("action.ASP",
                   { strName:NameVal, strFirm: FirmVal, strEmail: EmailVal, strTel: TelVal, strMessage: MessageVal },
                       function(data){
                        $("#ContactForm").slideUp("normal", function() {                  
                           
                            $("#ContactForm").before('<div class="info">Bilgileriniz yetkililerimize ulaştırıldı. <br /> En kısa sürede size geri dönüş yapılacaktır.</div>');                                           
                        });
                       }
                 );
        }
       
        return false;
    });                          
});

Çalışan örnek: www.gulcemobilya.com.tr
Formun olduğu CSS'siz sayfa: www.gulcemobilya.com.tr/contact.asp


Şimdiden yardımcı olacak herkese teşekkürler
darkfaceofmoon şu an çevrimdışı   Mesajdan alıntı yaparak yeni bir cevap ekleyin