Allow multiple reCAPTCHAs per page

Fixes #192

qa-include/app/captcha.php

@@ -62,10 +62,11 @@
 	}
 
 
+	/**
+	 * Prepare $qa_content for showing a captcha, adding the element to $fields, given previous $errors, and a $note to display.
+	 * Returns JavaScript required to load CAPTCHA when field is shown by user (e.g. clicking comment button).
+	 */
 	function qa_set_up_captcha_field(&$qa_content, &$fields, $errors, $note=null)
-/*
-	Prepare $qa_content for showing a captcha, adding the element to $fields, given previous $errors, and a $note to display
-*/
 	{
 		if (qa_captcha_available()) {
 			$captcha=qa_load_module('captcha', qa_opt('captcha_module'));
@@ -73,7 +74,7 @@
 			$count=@++$qa_content['qa_captcha_count']; // work around fact that reCAPTCHA can only display per page
 
 			if ($count>1)
-				$html='[captcha placeholder]'; // single captcha will be moved about the page, to replace this
+				$html=''; // single captcha will be moved about the page, to replace this
 			else {
 				$qa_content['script_var']['qa_captcha_in']='qa_captcha_div_1';
 				$html=$captcha->form_html($qa_content, @$errors['captcha']);
@@ -87,7 +88,7 @@
 				'note' => $note,
 			);
 
-			return "if (qa_captcha_in!='qa_captcha_div_".$count."') { document.getElementById('qa_captcha_div_".$count."').innerHTML=document.getElementById(qa_captcha_in).innerHTML; document.getElementById(qa_captcha_in).innerHTML=''; qa_captcha_in='qa_captcha_div_".$count."'; }";
+			return "if (!document.getElementById('qa_captcha_div_".$count."').hasChildNodes()) { recaptcha_load('qa_captcha_div_".$count."'); }";
 		}
 
 		return '';

qa-plugin/recaptcha-captcha/qa-recaptcha-captcha.php

@@ -99,40 +99,30 @@ class qa_recaptcha_captcha
 	}
 
 	/**
-	 * Return HTML for reCAPTCHA, including non-JS fallback. New reCAPTCHA auto-detects the user's language.
+	 * reCAPTCHA HTML - we actually return nothing because the new reCAPTCHA requires 'explicit rendering'
+	 * via JavaScript when we have multiple Captchas per page. It also auto-detects the user's language.
 	 */
 	public function form_html(&$qa_content, $error)
 	{
 		$pub = qa_opt('recaptcha_public_key');
 
-		$htmlLines = array(
-			// currently we cannot add async/defer attributes via $qa_content so we insert script here
-			'<script src="https://www.google.com/recaptcha/api.js" async defer></script>',
-			'<div class="g-recaptcha" data-sitekey="'.$pub.'"></div>',
-
-			// non-JS falback
-			'<noscript>',
-			'  <div style="width: 302px; height: 352px;">',
-			'    <div style="width: 302px; height: 352px; position: relative;">',
-			'      <div style="width: 302px; height: 352px; position: absolute;">',
-			'        <iframe src="https://www.google.com/recaptcha/api/fallback?k='.$pub.'"',
-			'                frameborder="0" scrolling="no"',
-			'                style="width: 302px; height:352px; border-style: none;">',
-			'        </iframe>',
-			'      </div>',
-			'      <div style="width: 250px; height: 80px; position: absolute; border-style: none;',
-			'                  bottom: 21px; left: 25px; margin: 0px; padding: 0px; right: 25px;">',
-			'        <textarea id="g-recaptcha-response" name="g-recaptcha-response"',
-			'                  class="g-recaptcha-response"',
-			'                  style="width: 250px; height: 80px; border: 1px solid #c1c1c1;',
-			'                         margin: 0px; padding: 0px; resize: none;" value=""></textarea>',
-			'      </div>',
-			'    </div>',
-			'  </div>',
-			'</noscript>',
+		// onload handler
+		$qa_content['script_lines'][] = array(
+			'function recaptcha_load(elemId) {',
+			'  if (grecaptcha) {',
+			'    grecaptcha.render(elemId, {',
+			'      "sitekey": ' . qa_js($pub),
+			'    });',
+			'  }',
+			'}',
+			'function recaptcha_onload() {',
+			'  recaptcha_load("qa_captcha_div_1");',
+			'}',
 		);
 
-		return implode("\n", $htmlLines);
+		$qa_content['script_src'][] = 'https://www.google.com/recaptcha/api.js?onload=recaptcha_onload&render=explicit';
+
+		return '';
 	}
 
 	/**