Làm cách nào để hiển thị nhiều bản ghi lại trên một trang?

Tôi có 2 biểu mẫu trên một trang. Một trong những biểu mẫu có recaptcha hiển thị mọi lúc. Cái kia sẽ chỉ hiển thị recaptcha sau một sự kiện nhất định chẳng hạn như tối đa các lần đăng nhập. Vì vậy, đôi khi tôi sẽ cần 2 recaptchas để xuất hiện trên cùng một trang. Điều này có khả thi không? Tôi biết tôi có thể sử dụng một cái duy nhất cho cả hai, nhưng theo cách tôi có bố cục, tôi muốn có 2. Cảm ơn.

Cập nhật: tôi đoán nó có thể không được. Ai có thể giới thiệu một thư viện chụp khác để sử dụng song song với reCaptcha không? Tôi thực sự muốn có thể có 2 hình ảnh xác thực trên cùng một trang.

Cập nhật 2: Điều gì sẽ xảy ra nếu đặt từng biểu mẫu trong iframe? Đây có phải là một giải pháp chấp nhận được không?

Một câu hỏi tương tự đã được hỏi về việc thực hiện điều này trên một trang ASP ( liên kết ) và sự đồng thuận ở đó là không thể thực hiện với recaptcha. Có vẻ như nhiều biểu mẫu trên một trang phải chia sẻ hình ảnh xác thực, trừ khi bạn sẵn sàng sử dụng một hình ảnh xác thực khác. Nếu bạn không bị khóa vào recaptcha, một thư viện tốt để xem là thành phần Zend_Captcha của Zend Frameworks ( liên kết ). Nó chứa một vài

Với phiên bản Recaptcha hiện tại ( API reCAPTCHA phiên bản 2.0 ), bạn có thể có nhiều recaptcha trên một trang.

Không cần sao chép recaptcha cũng như cố gắng giải quyết vấn đề. Bạn chỉ cần đặt nhiều phần tử div cho recaptchas và hiển thị recaptchas bên trong chúng một cách rõ ràng.

Điều này thật dễ dàng với api google recaptcha:
https://developers.google.com/recaptcha/docs/display#explicit_render

Đây là mã html ví dụ:

<form>
    <h1>Form 1</h1>
    <div><input type="text" name="field1" placeholder="field1"></div>
    <div><input type="text" name="field2" placeholder="field2"></div>
    <div id="RecaptchaField1"></div>
    <div><input type="submit"></div>
</form>

<form>
    <h1>Form 2</h1>
    <div><input type="text" name="field3" placeholder="field3"></div>
    <div><input type="text" name="field4" placeholder="field4"></div>
    <div id="RecaptchaField2"></div>
    <div><input type="submit"></div>
</form>

Trong mã javascript của bạn, bạn phải xác định một hàm gọi lại cho recaptcha:

<script type="text/javascript">
    var CaptchaCallback = function() {
        grecaptcha.render('RecaptchaField1', {'sitekey' : '6Lc_your_site_key'});
        grecaptcha.render('RecaptchaField2', {'sitekey' : '6Lc_your_site_key'});
    };
</script>

Sau đó, url tập lệnh recaptcha của bạn sẽ giống như sau:

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>

Hoặc thay vì cung cấp ID cho các trường recaptcha của bạn, bạn có thể đặt tên lớp và lặp lại các phần tử này với bộ chọn lớp của bạn và gọi .render ()

Đơn giản và dễ hiểu:

1) Tạo các trường recaptcha của bạn bình thường bằng cách này:

<div class="g-recaptcha" data-sitekey="YOUR_KEY_HERE"></div>

2) Tải tập lệnh với cái này:

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>

3) Bây giờ gọi điều này để lặp lại các trường và tạo các bản ghi lại:

<script type="text/javascript">
  var CaptchaCallback = function() {
    jQuery('.g-recaptcha').each(function(index, el) {
        grecaptcha.render(el, {
            'sitekey' : jQuery(el).attr('data-sitekey')
            ,'theme' : jQuery(el).attr('data-theme')
            ,'size' : jQuery(el).attr('data-size')
            ,'tabindex' : jQuery(el).attr('data-tabindex')
            ,'callback' : jQuery(el).attr('data-callback')
            ,'expired-callback' : jQuery(el).attr('data-expired-callback')
            ,'error-callback' : jQuery(el).attr('data-error-callback')
        });
    });
  };
</script>

Điều này có thể dễ dàng thực hiện với clone()hàm của jQuery .

Vì vậy, bạn phải tạo hai div wrapper cho recaptcha. Div recaptcha của biểu mẫu đầu tiên của tôi:

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

Div của biểu mẫu thứ hai trống (ID khác). Vì vậy, của tôi chỉ là:

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

Sau đó, javascript khá đơn giản:

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

Có thể không cần tham số thứ hai có truegiá trị trong clone(), nhưng không hại gì khi có nó ... Vấn đề duy nhất với phương pháp này là nếu bạn đang gửi biểu mẫu của mình qua ajax, vấn đề là bạn có hai phần tử có cùng tên và bạn phải thông minh hơn một chút với cách bạn nắm bắt các giá trị của phần tử chính xác đó (hai id cho phần tử reCaptcha là #recaptcha_response_fieldvà #recaptcha_challenge_field đề phòng ai đó cần chúng)

Tôi biết câu hỏi này đã cũ nhưng trong trường hợp nếu có ai đó sẽ tìm nó trong tương lai. Có thể có hai hình ảnh xác thực trên một trang. Tài liệu màu hồng ở đây: https://developers.google.com/recaptcha/docs/display Ví dụ dưới đây chỉ là tài liệu biểu mẫu sao chép và bạn không phải chỉ định các bố cục khác nhau.

<script type="text/javascript">
  var verifyCallback = function(response) {
    alert(response);
  };
  var widgetId1;
  var widgetId2;
  var onloadCallback = function() {
    // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
    // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
    widgetId1 = grecaptcha.render('example1', {
      'sitekey' : 'your_site_key',
      'theme' : 'light'
    });
    widgetId2 = grecaptcha.render(document.getElementById('example2'), {
      'sitekey' : 'your_site_key'
    });
    grecaptcha.render('example3', {
      'sitekey' : 'your_site_key',
      'callback' : verifyCallback,
      'theme' : 'dark'
    });
  };
</script>

Câu trả lời này là một phần mở rộng cho câu trả lời của @raphadko .

Nếu bạn cần trích xuất thủ công mã captcha (như trong yêu cầu ajax), bạn phải gọi:

grecaptcha.getResponse(widget_id)

Nhưng làm thế nào bạn có thể truy xuất tham số id widget?

Tôi sử dụng định nghĩa CaptchaCallback này để lưu trữ id tiện ích của mỗi hộp g-recaptcha (dưới dạng thuộc tính dữ liệu HTML):

var CaptchaCallback = function() {
    jQuery('.g-recaptcha').each(function(index, el) {
        var widgetId = grecaptcha.render(el, {'sitekey' : 'your code'});
        jQuery(this).attr('data-widget-id', widgetId);
    });
};

Sau đó, tôi có thể gọi:

grecaptcha.getResponse(jQuery('#your_recaptcha_box_id').attr('data-widget-id'));

để giải nén mã.

Tôi có biểu mẫu liên hệ ở chân trang luôn hiển thị và một số trang, chẳng hạn như Tạo tài khoản, cũng có thể có hình ảnh xác thực, vì vậy nó động và tôi đang sử dụng cách tiếp theo với jQuery:

html:

<div class="g-recaptcha" id="g-recaptcha"></div>

<div class="g-recaptcha" id="g-recaptcha-footer"></div>

javascript

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit&hl=en"></script>
<script type="text/javascript">
  var CaptchaCallback = function(){        
      $('.g-recaptcha').each(function(){
        grecaptcha.render(this,{'sitekey' : 'your_site_key'});
      })
  };
</script>

Đây là phiên bản không có JQuery của câu trả lời được cung cấp bởi raphadko và noun .

1) Tạo các trường recaptcha của bạn bình thường bằng cách này:

<div class="g-recaptcha"></div>

2) Tải tập lệnh với cái này:

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>

3) Bây giờ gọi điều này để lặp lại các trường và tạo các bản ghi lại:

var CaptchaCallback = function() {
    var captchas = document.getElementsByClassName("g-recaptcha");
    for(var i = 0; i < captchas.length; i++) {
        grecaptcha.render(captchas[i], {'sitekey' : 'YOUR_KEY_HERE'});
    }
};

Nhìn vào mã nguồn của trang, tôi đã lấy phần reCaptcha và thay đổi mã một chút. Đây là mã:

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>

Tôi đang sử dụng chức năng tab javascript đơn giản ở đây. Vì vậy, không bao gồm mã đó.

Khi người dùng nhấp vào "Yêu cầu thông tin" (#product_tabs_what)thì JS sẽ kiểm tra xem recapExistcó falsehoặc có một số giá trị hay không. Nếu nó có một giá trị thì nó sẽ gọi Recaptcha.destroy();để hủy reCaptcha đã tải cũ và sẽ tạo lại nó cho tab này. Nếu không, điều này sẽ chỉ tạo một reCaptcha và sẽ đặt vào #more_info_recaptcha_boxdiv. Tương tự như đối với #product_tabs_whatab "Thực hiện Ưu đãi" .

Một tùy chọn tốt là tạo đầu vào recaptcha cho từng biểu mẫu một cách nhanh chóng (Tôi đã làm điều đó với hai biểu mẫu nhưng bạn có thể làm ba biểu mẫu trở lên). Tôi đang sử dụng jQuery, xác thực jQuery và plugin biểu mẫu jQuery để đăng biểu mẫu qua AJAX, cùng với API Recaptcha AJAX -

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

Khi người dùng gửi một trong các biểu mẫu:

1. chặn gửi - Tôi đã sử dụng thuộc tính beforeSubmit của jQuery Form Plugin
2. hủy mọi đầu vào recaptcha hiện có trên trang - Tôi đã sử dụng phương thức $ .empty () của jQuery và Recaptcha.destroy ()
3. gọi Recaptcha.create () để tạo trường recaptcha cho biểu mẫu cụ thể
4. trả về false.

Sau đó, họ có thể điền vào recaptcha và gửi lại biểu mẫu. Nếu họ quyết định gửi một biểu mẫu khác thay vào đó, mã của bạn sẽ kiểm tra các bản ghi lại hiện có, do đó bạn sẽ chỉ có một bản ghi lại trên trang mỗi lần.

Để thêm một chút vào câu trả lời của raphadko : vì bạn có nhiều captcha (trên một trang), bạn không thể sử dụng g-recaptcha-responsetham số POST (phổ quát) (vì nó chỉ chứa một phản hồi của captcha). Thay vào đó, bạn nên sử dụng grecaptcha.getResponse(opt_widget_id)lệnh gọi cho mỗi hình ảnh xác thực. Đây là mã của tôi (miễn là mỗi hình ảnh xác thực đều ở bên trong biểu mẫu của nó):

HTML:

<form ... />

<div id="RecaptchaField1"></div>

<div class="field">
  <input type="hidden" name="grecaptcha" id="grecaptcha" />
</div>

</form>

và

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>

JavaScript:

var CaptchaCallback = function(){
    var widgetId;

    $('[id^=RecaptchaField]').each(function(index, el) {

         widgetId = grecaptcha.render(el.id, {'sitekey' : 'your_site_key'});

         $(el).closest("form").submit(function( event ) {

            this.grecaptcha.value = "{\"" + index + "\" => \"" + grecaptcha.getResponse(widgetId) + "\"}"

         });
    });
};

Lưu ý rằng tôi áp dụng ủy quyền sự kiện (xem làm mới DOM sau khi nối phần tử ) cho tất cả các phần tử được sửa đổi động. Điều này liên kết mọi phản hồi của captha cá nhân với submitsự kiện biểu mẫu của nó .

Đây là một giải pháp dựa trên nhiều câu trả lời tuyệt vời. Tùy chọn này miễn phí jQuery và động, không yêu cầu bạn nhắm mục tiêu cụ thể các phần tử theo id.

1) Thêm đánh dấu reCAPTCHA của bạn như bạn thường làm:

<div class="g-recaptcha" data-sitekey="YOUR_KEY_HERE"></div>

2) Thêm phần sau vào tài liệu. Nó sẽ hoạt động trong bất kỳ trình duyệt nào hỗ trợ API querySelectorAll

<script src="https://www.google.com/recaptcha/api.js?onload=renderRecaptchas&render=explicit" async defer></script>
<script>
    window.renderRecaptchas = function() {
        var recaptchas = document.querySelectorAll('.g-recaptcha');
        for (var i = 0; i < recaptchas.length; i++) {
            grecaptcha.render(recaptchas[i], {
                sitekey: recaptchas[i].getAttribute('data-sitekey')
            });
        }
    }
</script>

Các grecaptcha.getResponse()phương pháp chấp nhận một tùy chọn "WIDGET_ID" tham số, và mặc định để các phụ tùng đầu tiên được tạo ra nếu không xác định. Một widget_id được trả về từ grecaptcha.render()phương thức cho mỗi widget được tạo, nó không liên quan đến thuộc tính idcủa vùng chứa reCAPTCHA !!

Mỗi reCAPTCHA có dữ liệu phản hồi riêng. Bạn phải cung cấp cho div reCAPTCHA một ID và chuyển nó vào getResponsephương thức:

ví dụ

<div id="reCaptchaLogin"
     class="g-recaptcha required-entry"
     data-sitekey="<?php echo $this->helper('recaptcha')->getKey(); ?>"
     data-theme="<?php echo($this->helper('recaptcha')->getTheme()); ?>"
     style="transform:scale(0.82);-webkit-transform:scale(0.82);transform-origin:0 0;-webkit-transform-origin:0 0;">
</div>


<script type="text/javascript">
  var CaptchaCallback = function() {
    jQuery('.g-recaptcha').each(function(index, el) {
        grecaptcha.render(el, {
            'sitekey' : jQuery(el).attr('data-sitekey')
            ,'theme' : jQuery(el).attr('data-theme')
            ,'size' : jQuery(el).attr('data-size')
            ,'tabindex' : jQuery(el).attr('data-tabindex')
            ,'callback' : jQuery(el).attr('data-callback')
            ,'expired-callback' : jQuery(el).attr('data-expired-callback')
            ,'error-callback' : jQuery(el).attr('data-error-callback')
        });
    });
  };
</script>

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>

Truy cập phản hồi:

var reCaptchaResponse = grecaptcha.getResponse(0);

hoặc là

var reCaptchaResponse = grecaptcha.getResponse(1);

Có thể, chỉ cần ghi đè các lệnh gọi lại Recaptcha Ajax. Làm việc jsfiddle: http://jsfiddle.net/Vanit/Qu6kn/

Bạn thậm chí không cần một div proxy vì khi ghi đè, mã DOM sẽ không thực thi. Gọi Recaptcha.reload () bất cứ khi nào bạn muốn kích hoạt các lệnh gọi lại.

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");

Đây là một hướng dẫn tuyệt vời để thực hiện chính xác điều đó:

http://mycodde.blogspot.com.ar/2014/12/multiple-recaptcha-demo-same-page.html

Về cơ bản, bạn thêm một số tham số vào lệnh gọi api và hiển thị thủ công từng recaptcha:

<script src="https://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit" async defer></script>
<script>
        var recaptcha1;
        var recaptcha2;
        var myCallBack = function() {
            //Render the recaptcha1 on the element with ID "recaptcha1"
            recaptcha1 = grecaptcha.render('recaptcha1', {
                'sitekey' : '6Lc_0f4SAAAAAF9ZA', //Replace this with your Site key
                'theme' : 'light'
            });

            //Render the recaptcha2 on the element with ID "recaptcha2"
            recaptcha2 = grecaptcha.render('recaptcha2', {
                'sitekey' : '6Lc_0f4SAAAAAF9ZA', //Replace this with your Site key
                'theme' : 'dark'
            });
        };
</script>

Tái bút: Phương thức "grecaptcha.render" nhận được một ID

Tôi sẽ sử dụng recaptcha vô hình. Sau đó, trên nút của bạn, hãy sử dụng một thẻ như "formname = 'yourformname'" để chỉ định biểu mẫu nào sẽ được gửi và ẩn đầu vào biểu mẫu gửi.

Ưu điểm của điều này là nó cho phép bạn giữ nguyên xác thực biểu mẫu html5, một recaptcha, nhưng nhiều giao diện nút. Chỉ cần nắm bắt giá trị đầu vào "captcha" cho khóa mã thông báo được tạo bởi recaptcha.

<script src="https://www.google.com/recaptcha/api.js" async defer ></script>

<div class="g-recaptcha" data-sitekey="yours" data-callback="onSubmit" data-size="invisible"></div>
<script>
var formanme = ''
$('button').on('click', function () { formname = '#'+$(this).attr('formname');
    if ( $(formname)[0].checkValidity() == true) { grecaptcha.execute(); }
    else { $(formname).find('input[type="submit"]').click() }
    });

var onSubmit = function(token) {
    $(formname).append("<input type='hidden' name='captcha' value='"+token+"' />");
    $(formname).find('input[type="submit"]').click()
    };
</script>

Tôi thấy FAR này đơn giản hơn và dễ quản lý hơn.