मैं एक ही पृष्ठ पर कई पुनरावृत्ति कैसे दिखाऊं?

Question

मेरे एक पृष्ठ पर 2 रूप हैं। सभी रूपों में से एक में हर समय एक प्रदर्शन होता है। दूसरे को एक निश्चित घटना के बाद ही पुनरावृत्ति प्रदर्शित करनी चाहिए जैसे लॉगिन प्रयास को अधिकतम करना। इसलिए ऐसे समय होते हैं जब मुझे एक ही पृष्ठ पर दिखाई देने के लिए 2 पुनरावृत्ति की आवश्यकता होती है। क्या यह संभव है? मुझे पता है कि मैं शायद दोनों के लिए एक ही का उपयोग कर सकता हूं, लेकिन जिस तरह से मेरे पास लेआउट है, मैं बहुत पसंद करूंगा 2. धन्यवाद।

अद्यतन: अच्छी तरह से मुझे लगता है कि यह संभव नहीं हो सकता है। क्या कोई और कैप्टन लाइब्रेरी को दोबारा से इस्तेमाल करने की सलाह दे सकता है? मैं वास्तव में एक ही पृष्ठ पर 2 कैप्चा रखने में सक्षम होना चाहता हूं।

अद्यतन 2: क्या होगा यदि प्रत्येक फॉर्म को एक आइफ्रेम में रखा जाए? क्या यह स्वीकार्य समाधान होगा?

Comments

क्या आप केवल एक ही बार दो बार प्रदर्शित नहीं कर सकते?

— टायलर कार्टर

मैंने कोशिश की कि..जब मैं कैप्चा कोड को डुप्लिकेट करने की कोशिश करूंगा तो यह सिर्फ कैप्चा को प्रदर्शित करेगा जो पहले आता है

— oym

किसी को भी नई recaptcha एपीआई के लिए इस पार आ रहा है, इस स्पष्ट लोड हो रहा है पर डॉक्स में उदाहरण के साथ वर्णित का उपयोग करके संभव है developers.google.com/recaptcha/docs/display#recaptcha_methods

— एल योबो

एक iframe संभव हो जाना चाहिए लेकिन समस्या के हल के लिए एक बुरा तरीका है, में की तरह जावास्क्रिप्ट के उपयोग की तुलना Hüseyin Yağlıकी जवाब । अधिकांश ब्राउज़र को जावास्क्रिप्ट का समर्थन करना चाहिए और डिफ़ॉल्ट reCAPTCHA वैसे भी जावास्क्रिप्ट का उपयोग करता है। मुझे नहीं पता, हालांकि जावास्क्रिप्ट समर्थन के बिना समस्या को हल करने के लिए क्या करना होगा, हालांकि।

— एडवर्ड

Answer 1

एक एएसपी पृष्ठ ( लिंक ) पर ऐसा करने के बारे में एक समान सवाल पूछा गया था और वहां पर आम सहमति यह थी कि सप्तच के साथ ऐसा करना संभव नहीं था। ऐसा लगता है कि एक पृष्ठ पर कई रूपों को कैप्चा को साझा करना होगा, जब तक कि आप एक अलग कैप्चा का उपयोग करने के लिए तैयार न हों। यदि आप ज़ेड फ्रेमवर्क Zend_Captcha घटक ( लिंक ) पर एक नज़र डालने के लिए एक अच्छे पुस्तकालय में पुनरावृत्ति करने के लिए बंद नहीं हैं । इसमें कुछ शामिल हैं

Comments

यह वास्तव में reCAPTCHA के साथ संभव है , बस जावास्क्रिप्ट के बिना करना संभव नहीं है । अधिकांश ब्राउज़र को जावास्क्रिप्ट का समर्थन करना चाहिए और डिफ़ॉल्ट रूप से ReCaptcha जावास्क्रिप्ट का उपयोग वैसे भी करता है इसलिए यह समाधान अच्छा है। Hüseyin Yağlıइसका उत्तर समाधान बताता है। इस समाधान के लिए reCAPTCHA दस्तावेज़ीकरण Developers.google.com/recaptcha/docs/display#explicit_endender पर है । मुझे नहीं पता, हालांकि जावास्क्रिप्ट समर्थन के बिना समस्या को हल करने के लिए क्या करना होगा, हालांकि।

— एडवर्ड

यह वास्तव में reCAPTCHA के साथ पूरी तरह से संभव है

— कार्लोस एस्पिनोजा

Answer 2

Recaptcha के वर्तमान संस्करण ( reCAPTCHA API संस्करण 2.0 ) के साथ, आपके पास एक पृष्ठ पर कई पुनरावृत्त हो सकते हैं।

पुनरावृत्ति को क्लोन करने की आवश्यकता नहीं है और न ही समस्या को हल करने का प्रयास करें। आपको बस रिकैप्स के लिए कई div एलिमेंट्स डालने होंगे और उनके अंदर रिकैप्स को स्पष्ट रूप से रेंडर करना होगा।

Google रिकैप्‍चा एप के साथ यह आसान है:
https://developers.google.com/recaptcha/docs/display#explicit_render

यहाँ उदाहरण HTML कोड है:

<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>

आपके जावास्क्रिप्ट कोड में, आपको पुनरावृत्ति के लिए कॉलबैक फ़ंक्शन को परिभाषित करना होगा:

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

इसके बाद, आपकी पुनरावृत्ति स्क्रिप्ट url इस तरह दिखनी चाहिए:

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

या अपने रिकैप्टा फ़ील्ड्स को आईडी देने के बजाय, आप एक क्लास नाम दे सकते हैं और इन तत्वों को अपने क्लास सिलेक्टर और कॉल .render () के साथ पा सकते हैं।

Comments

संयोग से, क्या आप जानते हैं कि प्रत्येक क्षेत्र के लिए jquery सत्यापन के लिए छिपे हुए recaptcha फ़ील्ड को कैसे जोड़ा जाए ?, वर्तमान में मेरे पास केवल 1 recaptchafield के साथ काम कर रहा है, लेकिन क्या यह दो recaptchas के साथ काम कर सकता है? <इनपुट प्रकार = "छिपा हुआ" वर्ग = "हिडनप्रकटापा" के लिए आवश्यक "नाम =" छिपीप्रकटापा "आईडी =" छिपीप्रकट्टा ">

— इवान जुआरेज

@IvanJuarez नए प्रश्न के रूप में पूछना एक अच्छा प्रश्न है।

— Hüseyin Yağlı

उन लोगों के लिए, जो कई उदाहरणों के साथ grecaptcha.getResponse () का उपयोग करना चाहते हैं, आप बस प्रत्येक रेंडर को 0,1,2, आदि के रूप में संदर्भित कर सकते हैं। उदाहरण के लिए पहले उदाहरण को grecaptcha.getResponse (0) के रूप में संदर्भित किया जाएगा।

— जीन केली

मेरा समय बचाएं इसका सही समाधान

— मिर्जा ओबैद

वाह! इस पर कुछ काम हुआ, लेकिन @ जेनकेली के नोट को जोड़ने grecaptcha.getResponse(0)और grecaptcha.getResponse(1)कई उदाहरणों को मान्य करने के लिए मैं यह जोड़ना चाहूंगा कि अनुक्रमण को grecaptcha.renderआदेश के साथ अनुरूप होना चाहिए । इस उदाहरण के लिए, के grecaptcha.render('RecaptchaField1'...साथ सत्यापित किया जाएगा grecaptcha.getResponse(0)और grecaptcha.render('RecaptchaField2'...इसके साथ सत्यापित किया जाएगा grecaptcha.getResponse(1), आदि ...

— कोडैकोपिया

Answer 3

सरल और सीधा:

1) इस के साथ सामान्य रूप से अपने पुनरावृत्ति फ़ील्ड बनाएँ:

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

2) इसके साथ स्क्रिप्ट लोड करें:

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

3) अब इसे खेतों पर पुनरावृति करने के लिए कॉल करें और पुनरावृत्ति बनाएँ:

<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>

Comments

यह सही तरीका है IMO, यह इसे गतिशील बनाता है कि मैं स्थिर आईडी को परिभाषित किए बिना असीमित उदाहरण दे सकता हूं

— ग्रेग अलेक्जेंडर

यदि आपको मैन्युअल रूप से कैप्चा कोड (जैसे अजाक्स अनुरोध) निकालने की जरूरत है, तो मेरा उत्तर देखें ।

— वनदिर

क्या आप कृपया मेरे प्रश्न पर एक नज़र डाल सकते हैं ? POST पैरामीटर खाली जा रहा है।

— मार्सिओ माजुकाटो

data-sitekey="YOUR_KEY_HERE"बेकार है और div से हटाया जा सकता है (यदि आपको कुंजी को बदलने की आवश्यकता है, तो संपादित करने के लिए कम स्थान)

— the_nuts

दरअसल आपके पास वहां एक टाइपो है। विशेषता डेटा-साइटकी ज़रूरत है और यदि आपके पास कभी-कभी एकाधिक साइटकी होती हैं, तो यह और भी अधिक गतिशील बनाता है। सही लाइन होगीgrecaptcha.render(el, {'sitekey' : $(el).attr('data-sitekey') });

— गोकोकन

Answer 4

यह jQuery के clone()फ़ंक्शन के साथ आसानी से पूरा होता है ।

तो आपको पुनरावृत्ति के लिए दो रैपर div बनाने चाहिए। मेरे पहले रूप की पुनरावृत्ति div:

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

दूसरे फॉर्म का div खाली (अलग आईडी) है। तो मेरा बस है:

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

तब जावास्क्रिप्ट काफी सरल है:

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

संभवतः दूसरे trueमान की clone()आवश्यकता नहीं है, लेकिन इसके साथ कोई मानदंड नहीं है, लेकिन इसका कोई नुकसान नहीं है ... इस पद्धति के साथ एकमात्र समस्या यह है कि यदि आप अपने फॉर्म को अजाक्स के माध्यम से जमा कर रहे हैं, तो समस्या यह है कि आपके पास दो तत्व हैं एक ही नाम और आप मुझे उस तत्व को पकड़ने के तरीके से थोड़ा और अधिक चतुर होना चाहिए जो सही तत्वों के मूल्यों ( #recaptcha_response_fieldreCaptcha तत्वों के लिए दो आईडी हैं और #recaptcha_challenge_field सिर्फ मामले में किसी को उनकी आवश्यकता है)

Comments

जब आप एक नई चुनौती के लिए अनुरोध करते हैं, तो आप मुद्दों का सामना करेंगे क्योंकि यह केवल एक

— पुनरावृत्ति

यह काम नहीं करता है ... इसका मतलब केवल मूल कैप्चा है (पहले वाला जिसे <div id = "myrecap"> यहाँ कहा जाता है) केवल ताज़ा होगा, और दूसरे को ताज़ा नहीं किया जाएगा

— Oxi

वास्तव में ऑक्सी, आपकी चिंता को मेरी पिछली टिप्पणी

— सर्ज सगन

आप शायद यह गलत कर रहे हैं ... jsfiddle.net में अपने कोड के लिंक के बारे में कैसे भी, अब इसमें से कोई भी करने की आवश्यकता नहीं है ... आपको Hüseyin Yağlı उत्तर का उपयोग करना चाहिए।

— सर्ज सगन

Answer 5

मुझे पता है कि यह सवाल पुराना है लेकिन अगर भविष्य में कोई इसकी तलाश करेगा तो यह होगा। एक पृष्ठ पर दो कैप्चा होना संभव है। गुलाबी करने के लिए प्रलेखन यहाँ है: https://developers.google.com/recaptcha/docs/display नीचे उदाहरण केवल एक प्रतिलिपि फ़ॉर्म है और आपको विभिन्न लेआउट निर्दिष्ट करने की आवश्यकता नहीं है।

<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>

Answer 6

यह जवाब देने के लिए एक विस्तार है @raphadko के जवाब ।

यदि आपको मैन्युअल रूप से कैप्चा कोड (जैसे अजाक्स अनुरोध) निकालने की आवश्यकता है, तो आपको कॉल करना होगा:

grecaptcha.getResponse(widget_id)

लेकिन आप विजेट आईडी पैरामीटर कैसे प्राप्त कर सकते हैं?

मैं CaptchaCallback की इस परिभाषा का उपयोग प्रत्येक g-recaptcha बॉक्स की विजेट आईडी (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);
    });
};

तब मैं कॉल कर सकता हूं:

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

कोड निकालने के लिए।

Comments

अरे, इसके लिए धन्यवाद। क्या है #your_recaptcha_box_id?

— लुकास बुस्टामांटे

Answer 7

मेरे पास फ़ूटर में संपर्क फ़ॉर्म है जो हमेशा प्रदर्शित होता है और कुछ पेज भी बनाते हैं, जैसे क्रिएट अकाउंट, का भी कैप्चा हो सकता है, इसलिए यह गतिशील रूप से है और मैं jQuery के साथ अगले तरीके का उपयोग कर रहा हूं:

एचटीएमएल:

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

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

जावास्क्रिप्ट

<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>

Answer 8

यह रेपहेडको और संज्ञा द्वारा प्रदान किए गए उत्तर का एक JQuery- मुक्त संस्करण है ।

1) इस के साथ सामान्य रूप से अपने पुनरावृत्ति फ़ील्ड बनाएँ:

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

2) इसके साथ स्क्रिप्ट लोड करें:

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

3) अब इसे खेतों पर पुनरावृति करने के लिए कॉल करें और पुनरावृत्ति बनाएँ:

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'});
    }
};

Answer 9

पृष्ठ के स्रोत कोड को देखकर मैंने reCaptcha भाग लिया और कोड को थोड़ा बदल दिया। यहाँ कोड है:

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>

मैं यहाँ सरल जावास्क्रिप्ट टैब कार्यक्षमता का उपयोग कर रहा हूँ। तो, उस कोड को शामिल नहीं किया।

जब उपयोगकर्ता "अनुरोध सूचना" पर क्लिक करेगा (#product_tabs_what)तो जेएस यह जांच करेगा कि recapExistक्या falseकुछ मूल्य है या नहीं। यदि इसका कोई मूल्य है, तो यह Recaptcha.destroy();पुराने लोड किए गए reCaptcha को नष्ट करने के लिए कॉल करेगा और इसे इस टैब के लिए फिर से बनाएगा। अन्यथा यह सिर्फ एक reCaptcha बना देगा और #more_info_recaptcha_boxdiv में जगह देगा । "ऑफ़र ऑफ़र" #product_tabs_whaटैब के समान।

Answer 10

var ReCaptchaCallback = function() {
    	 $('.g-recaptcha').each(function(){
    		var el = $(this);
    		grecaptcha.render(el.get(0), {'sitekey' : el.data("sitekey")});
    	 });  
        };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallback&render=explicit" async defer></script>


ReCaptcha 1
<div class="g-recaptcha" data-sitekey="6Lc8WQcUAAAAABQKSITdXbc6p9HISCQhZIJwm2Zw"></div>

ReCaptcha 2
<div class="g-recaptcha" data-sitekey="6Lc8WQcUAAAAABQKSITdXbc6p9HISCQhZIJwm2Zw"></div>

ReCaptcha 3
<div class="g-recaptcha" data-sitekey="6Lc8WQcUAAAAABQKSITdXbc6p9HISCQhZIJwm2Zw"></div>

Comments

2 भाग कहाँ है?

— MeSo2

क्षमा करें, आपको नहीं मिल रहा है

— surinder singh

<div class="g-recaptcha" data-sitekey="your_site_key"></div>जहां जरूरत हो, वहां बस फॉर्म /

— डिव में डालें

Answer 11

एक अच्छा विकल्प मक्खी पर प्रत्येक रूप के लिए एक पुनरावृत्ति इनपुट उत्पन्न करना है (मैंने इसे दो के साथ किया है लेकिन आप शायद तीन या तीन अन्य रूपों में कर सकते हैं)। मैं AJAX के माध्यम से फ़ॉर्म को पोस्ट करने के लिए jQuery, jQuery सत्यापन, और jQuery फॉर्म प्लगइन का उपयोग कर रहा हूँ, साथ ही साथ रेकपट्टा टैक्सटाइल -

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

जब उपयोगकर्ता किसी एक फॉर्म को सबमिट करता है:

1. अवरोधन प्रस्तुत करना - मैंने jQuery फॉर्म प्लग इन के पहले के संपत्ति का उपयोग किया
2. पृष्ठ पर मौजूद किसी भी पुनरावर्ती इनपुट को नष्ट करें - मैंने jQuery के $ .empty () पद्धति और Recaptcha.destroy () का उपयोग किया
3. विशिष्ट रूप के लिए एक पुनरावृत्ति फ़ील्ड बनाने के लिए Recaptcha.create () को कॉल करें
4. विवरण झूठा है।

फिर, वे पुनरावृत्ति को भर सकते हैं और फॉर्म को फिर से जमा कर सकते हैं। यदि वे इसके बजाय एक अलग रूप प्रस्तुत करने का निर्णय लेते हैं, तो ठीक है, आपके कोड मौजूदा रिकैप्ट के लिए जांचते हैं, इसलिए आपके पास एक समय में पृष्ठ पर केवल एक ही रिकैप्टा होगा।

Answer 12

रैपहेड्को के उत्तर में थोड़ा जोड़ने के लिए : चूंकि आपके पास कई कैप्चा हैं (एक पृष्ठ पर), आप (सार्वभौमिक) g-recaptcha-responsePOST पैरामीटर का उपयोग नहीं कर सकते (क्योंकि यह केवल एक कैप्चा की प्रतिक्रिया रखता है)। इसके बजाय, आपको grecaptcha.getResponse(opt_widget_id)प्रत्येक कैप्चा के लिए कॉल का उपयोग करना चाहिए । यहाँ मेरा कोड है (बशर्ते प्रत्येक कैप्चा इसके फॉर्म के अंदर हो):

HTML:

<form ... />

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

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

</form>

तथा

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

जावास्क्रिप्ट:

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) + "\"}"

         });
    });
};

ध्यान दें कि मैं सभी गतिशील रूप से संशोधित तत्वों के लिए ईवेंट प्रतिनिधिमंडल ( एपेंड तत्व के बाद ताज़ा डोम देखें ) को लागू करता हूं । यह प्रत्येक व्यक्ति कैप्चा की प्रतिक्रिया को उसके फॉर्म submitईवेंट में बांधता है ।

Comments

वाह, मैं इसके लिए घंटों खोज रहा था। धन्यवाद!!

— ब्लैक

Answer 13

यहाँ एक समाधान है जो कई उत्कृष्ट उत्तरों को बनाता है। यह विकल्प jQuery मुक्त और गतिशील है, विशेष रूप से आईडी द्वारा आपको तत्वों को लक्षित करने की आवश्यकता नहीं है।

1) सामान्य रूप से आपके reCAPTCHA मार्कअप को जोड़ें:

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

2) दस्तावेज़ में निम्नलिखित जोड़ें। यह किसी भी ब्राउज़र में काम करेगा जो querySelectorAll API का समर्थन करता है

<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>

Answer 14

grecaptcha.getResponse()विधि को स्वीकार करता है एक वैकल्पिक अगर अनिर्दिष्ट बनाया गया पहला विजेट को "WIDGET_ID" पैरामीटर, और चूक। एक विजेट_ड grecaptcha.render()बनाए गए प्रत्येक विजेट के लिए विधि से लौटा है , यह idreCAPTCHA कंटेनर की विशेषता से संबंधित नहीं है !!

प्रत्येक reCAPTCHA का अपना प्रतिक्रिया डेटा है। आपको reCAPTCHA div को एक ID देनी होगी और इसे getResponseविधि को पास करना होगा :

जैसे

<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>

---

पहुँच प्रतिक्रिया:

var reCaptchaResponse = grecaptcha.getResponse(0);

या

var reCaptchaResponse = grecaptcha.getResponse(1);

Answer 15

यह संभव है, बस रिकैप्टा अजाक्स कॉलबैक को अधिलेखित करें। वर्किंग jsfiddle: http://jsfiddle.net/Vanit/Qu6kn/

आपको एक प्रॉक्सी div की भी आवश्यकता नहीं है क्योंकि ओवरराइट के साथ DOM कोड निष्पादित नहीं होगा। जब भी आप कॉलबैक को फिर से ट्रिगर करना चाहते हैं, तब Recaptcha.reload () को कॉल करें।

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

Answer 16

यहाँ ठीक करने के लिए एक अच्छा गाइड है:

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

मूल रूप से आप एपीआई कॉल में कुछ पैरामीटर जोड़ते हैं और प्रत्येक रिकैप्टा को मैन्युअल रूप से प्रस्तुत करते हैं:

<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>

पुनश्च: "grecaptcha.render" विधि एक आईडी प्राप्त करती है

Answer 17

मैं अदृश्य पुनरावृत्ति का उपयोग करूंगा। फिर आपके बटन पर "फ़ॉर्मनाम = 'yourformname' जैसे टैग का उपयोग करें, यह निर्दिष्ट करने के लिए कि कौन सा फ़ॉर्म सबमिट किया जाना है और सबमिट फ़ॉर्म इनपुट छिपाएं।

इसका लाभ यह है कि यह आपके लिए HTML5 फॉर्म सत्यापन को बरकरार रखने की अनुमति देता है, एक पुनरावृत्ति, लेकिन कई बटन इंटरफेस। बस 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>

मुझे यह FAR सरल और प्रबंधित करने में आसान लगता है।