Nasıl tek bir sayfada birden recaptchas gösterebilirim?

6 Cevap php

Ben tek bir sayfada 2 formları var. Biçimlerinden biri her zaman gösteren bir recaptcha vardır. Diğer sadece bu oturum açma girişimleri maxing gibi belirli bir olaydan sonra bir recaptcha göstermelidir. Yani aynı sayfada görünmesini 2 recaptchas gerekir zamanlar vardır. Bu mümkün mü? Ben muhtemelen her ikisi için de tek bir tanesini kullanabilirsiniz biliyorum, ama ben düzen var yolu, ben çok 2. Teşekkür olmasını tercih ederim.

Update: de ben mümkün olmayabilir sanırım. Herkes reCAPTCHA ile yan yana kullanmak için başka bir yakalama kitaplık tavsiye edebilir misiniz? Gerçekten aynı sayfada 2 captcha'lar sahip olmak istiyorum.

Update 2: Ya bir iframe her formu koymak? Bu kabul edilebilir bir çözüm olurdu?

6 Cevap

Benzer bir soru, bir ASP sayfasında bunu hakkında sorular (link) ve orada fikir birliği Güvenlik kodu ile yapmak mümkün değildi oldu. Bu farklı bir CAPTCHA kullanmak için istekli olduğunuz sürece tek bir sayfada birden fazla form, captcha'yı paylaşması gerekir gibi görünüyor. Eğer bakmak için Güvenlik kodu içine iyi bir kitaplık kilitli değilse Zend Altyapıları Zend_Captcha bileşenidir (link). Birkaç içerir

Bu kolayca jQuery 'klon () fonksiyonu ile gerçekleştirilir

Yani Güvenlik kodu için iki sarıcı divs oluşturmanız gerekir. Benim ilk formun recaptcha div:

<div id="myrecap">
    <?php
        require_once('recaptchalib.php');
        $publickey = "XXXXXXXXXXX-XXXXXXXXXXX";
        echo recaptcha_get_html($publickey);
    ?>
</div>

İkinci formun div (farklı kimlik) boştur. Benimki sadece bir:

<div id="myraterecap"></div>

Sonra javascript oldukça basittir:

$(document).ready(function() {
    // Duplicate our reCapcha 
    $('#myraterecap').html($('#myrecap').clone(true,true));
});

Muhtemelen clone() ikinci gerçek gerekmez, ancak ajax form gönderiyorsunuz eğer ... Bu yöntem ile sadece sorun olması zarar vermez, sorun olması İki aynı ada sahip elemanları ve yapmanız gerekir bu doğru elemanın değerlerini (reCaptcha elemanları için iki kimlikleri sadece birisi onlara ihtiyacı durumunda içerisinde recaptcha_response_field ve recaptcha_challenge_field olan) yakalamak yolu ile bana biraz daha zeki

İyi bir seçenek anında her bir form için bir recaptcha girişi (iki kişiyle bunu yaptım ama muhtemelen üç veya daha fazla form yapabileceği) üretmektir. Ben Güvenlik Sorgulama AJAX API ile birlikte AJAX ile form göndermek için jQuery, jQuery doğrulama ve jQuery form eklentisi kullanıyorum -

https://developers.google.com/recaptcha/docs/display#recaptcha_methods

Kullanıcı biçimlerinden biri gönderdiğinde:

  1. sunulması kesmek - jQuery Form Plugin en beforeSubmit özelliği kullanılır
  2. sayfadaki herhangi bir mevcut recaptcha girişler yok - Ben jQuery'nin $ kullanılan boş () yöntemi ve Recaptcha.destroy ().
  3. belirli bir form için bir recaptcha alan oluşturmak için Recaptcha.create () çağrı
  4. return false.

Sonra onlar recaptcha doldurun ve formu yeniden gönderin. Bunun yerine farklı bir formu göndermek için karar verirseniz, iyi, bir seferde sadece sayfada bir recaptcha mevcut recaptchas için kod kontrolleri zorundasınız.

I http://www.enhancementresearch.com/contact.htm @ Serj Sagan en comment Yukarıda verilen sayfasını kontrol ettirin. Sayfanın kaynak koduna baktığımızda ben reCaptcha rol aldı ve kodu biraz değişti. İşte kod:

HTML:

<div class="tabs">
    <ul class="product-tabs">
        <li id="product_tabs_new" class="active"><a href="#">Detailed Description</a></li>
        <li id="product_tabs_what"><a href="#">Request Information</a></li>
        <li id="product_tabs_wha"><a href="#">Make Offer</a></li>
    </ul>
</div>

<div class="tab_content">
    <li class="wide">
        <div id="product_tabs_new_contents">
            <?php $_description = $this->getProduct()->getDescription(); ?>
            <?php if ($_description): ?>
                <div class="std">
                    <h2><?php echo $this->__('Details') ?></h2>
                    <?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), $_description, 'description') ?>
                </div>
            <?php endif; ?>
        </div>
    </li>

    <li class="wide">
        <label for="recaptcha">Captcha</label>
        <div id="more_info_recaptcha_box" class="input-box more_info_recaptcha_box"></div>
    </li>

    <li class="wide">
        <label for="recaptcha">Captcha</label>
        <div id="make_offer_recaptcha_box" class="input-box make_offer_recaptcha_box"></div>
    </li>
</div>

jQuery:

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        var recapExist = false;
      // Create our reCaptcha as needed
        jQuery('#product_tabs_what').click(function() {
            if(recapExist == false) {
                Recaptcha.create("<?php echo $publickey; ?>", "more_info_recaptcha_box");
                recapExist = "make_offer_recaptcha_box";
            } else if(recapExist == 'more_info_recaptcha_box') {
                Recaptcha.destroy(); // Don't really need this, but it's the proper way
                Recaptcha.create("<?php echo $publickey; ?>", "more_info_recaptcha_box");
                recapExist = "make_offer_recaptcha_box";
            }
        });
        jQuery('#product_tabs_wha').click(function() {
            if(recapExist == false) {
                Recaptcha.create("<?php echo $publickey; ?>", "make_offer_recaptcha_box");
                recapExist = "more_info_recaptcha_box";
            } else if(recapExist == 'make_offer_recaptcha_box') {
                Recaptcha.destroy(); // Don't really need this, but it's the proper way (I think :)
                Recaptcha.create("<?php echo $publickey; ?>", "make_offer_recaptcha_box");
                recapExist = "more_info_recaptcha_box";
            }
        });
    });
</script>

Ben burada basit javascript sekmeye işlevini kullanıyorum. Yani, bu kodu dahil etmedi.

Kullanıcı "Talep Bilgi" tıklıyorsunuz zaman recapExist false veya bazı değer varsa (#product_tabs_what) daha sonra JS kontrol edecektir. Bir değer varsa bu arayacak Recaptcha.destroy(); eski yüklü Recaptcha yok etmek ve bu sekme için yeniden olacaktır. Aksi takdirde bu sadece bir Recaptcha yaratacak ve #more_info_recaptcha_box div içine koyacaktır. "Teklif Yap" #product_tabs_wha sekmesi için aynıdır.

Sadece Güvenlik Sorgulama Ajax geri çağrıları üzerine yazmak mümkündür. Çalışma jsfiddle: http://jsfiddle.net/Vanit/Qu6kn/

Üzerine yazma ile DOM kod çalıştırmaz, çünkü bile bir proxy div gerekmez. Tekrar geri çağrıları tetiklemek istediğinizde () Recaptcha.reload arayın.

function doSomething(challenge){
    $(':input[name=recaptcha_challenge_field]').val(challenge);
    $('img.recaptcha').attr('src', '//www.google.com/recaptcha/api/image?c='+challenge);
}

//Called on Recaptcha.reload()
Recaptcha.finish_reload = function(challenge,b,c){
    doSomething(challenge);
}

//Called on page load
Recaptcha.challenge_callback = function(){
    doSomething(RecaptchaState.challenge)
}

Recaptcha.create("YOUR_PUBLIC_KEY");