Google recaptcha in repeat region on web page

Question

I have a page that has several database generated buttons that open up a form in a fancybox lightbox on the page when clicked. The form is always asking for the same information, but each button has hidden code to differentiate (code below)

Everything works great, but the Google recaptcha only appears on the first button. It works perfectly. The second button on the page does not show the recaptcha, and will not let the user click the button to send their details without it.

Have I done something wrong, or is this simply not possible to do. I am using MySQLi and php.

<div class="container g-pt-20 g-pb-70">
                    <?php
while(!$Recordset1->atEnd()) {
?>
 <div class="row g-bg-gray-light-v4 g-pa-30 g-mb-30" style="border: thin #1A0203; border-radius: 5px"> 

                      <div class="col-md-7">
                        <h2><?php echo($Recordset1->getColumnVal("TITLE")); ?></h2>
      <?php echo($Recordset1->getColumnVal("DESCRIPTION")); ?>
                      </div>

                      <div class="col-md-3">
                        <?php if($Recordset1->getColumnVal("IMAGE") != "") {         
?>
 <img src="images/<?php echo($Recordset1->getColumnVal("IMAGE")); ?>" class="img-fluid mx-auto d-block" alt=""/>  <?php } 
?>
                      </div>
                        <div class="col-md-2 g-color-black">
                          <?php echo($Recordset1->getColumnVal("TIMESPAN")); ?> | $<?php echo($Recordset1->getColumnVal("COST")); ?><br><br>
                          <a href="#fancybox-form<?php echo($Recordset1->getColumnVal("ID")); ?>" data-fancybox-speed="350" class="js-fancybox btn btn-md u-btn-indigo g-mr-10 g-mb-15">BOOK NOW</a>

                        </div>
                      </div>

<div id="fancybox-form<?php echo($Recordset1->getColumnVal("ID")); ?>" 
class="clearfix rounded-0 g-pa-30 w-50" 
style="display: none; min-width:400px;">
<form class="form-horizontal" method="post" name="fancybox-form">
<fieldset>

<!-- Form Name -->
<legend>Request A Day and Time - <?php echo($Recordset1->getColumnVal("TITLE")); ?></legend>
<input type="hidden" id="ID" name="ID" value="<?php echo rand(111,999999); ?>">
<input type="hidden" id="TITLE" name="TITLE" value="<?php echo($Recordset1->getColumnVal("TITLE")); ?>">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="NAME">Your Name</label>  
<div class="col-md-7">
<input id="NAME" name="NAME" type="text" placeholder="" class="form-control input-md" required oninvalid="this.setCustomValidity('Please enter your name')"
 oninput="setCustomValidity('')">  
</div>
</div>

<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="EMAIL">Your Email</label>  
<div class="col-md-7">
<input id="EMAIL" name="EMAIL" type="email" placeholder="" class="form-control input-md" required oninvalid="this.setCustomValidity('Please enter a valid email address')"
 oninput="setCustomValidity('')">

</div>
</div>

<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="PHONE">Your Phone</label>  
  <div class="col-md-7">
  <input id="PHONE" name="PHONE" type="text" placeholder="" class="form-control input-md" required oninvalid="this.setCustomValidity('Please enter your phone number')"
 oninput="setCustomValidity('')">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="DATE_REQ">Date Requested</label>  
  <div class="col-md-7">
  <input id="DATE_REQ" name="DATE_REQ" type="text" placeholder="" class="form-control input-md" required oninvalid="this.setCustomValidity('Please enter the date you would like to visit')"
 oninput="setCustomValidity('')">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="TIME_REQ">Time Requested</label>  
  <div class="col-md-7">
  <input id="TIME_REQ" name="TIME_REQ" type="text" placeholder="" class="form-control input-md" required oninvalid="this.setCustomValidity('Please enter your appointment time')"
 oninput="setCustomValidity('')">

  </div>
</div>

<!-- Textarea -->
<div class="form-group">
  <label class="col-md-4 control-label" for="textarea">Comments</label>
  <div class="col-md-7">                     
    <textarea class="form-control" id="textarea" name="textarea"></textarea>
  </div>
</div>

<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="bookappt"></label>
  <div class="col-md-7">
   <div class="g-recaptcha" data-sitekey="6LdQYRIUAAAAAC020yhPUryaBGst2upxlTSqigqo"></div> <br>
<button id="bookappt" name="bookappt" class="btn btn-success">Send Your Request</button>
  </div>
</div>

</fieldset>
</form>

                        </div>

                    </div>
                      <?php
  $Recordset1->moveNext();
}
$Recordset1->moveFirst(); //return RS to first record
?>

score 0 · Answer 1 · answered Dec 02 '17 at 16:07

On further investigation I found that this is possible with an additional piece of javascript, and a modification to one line...

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

<script type="text/javascript">
var CaptchaCallback = function() {
$('.g-recaptcha').each(function(index, el) {
  grecaptcha.render(el, {'sitekey' : 'your_key'});
});
 };
</script>

Lots of answers to this question can be found at enter link description here

Google recaptcha in repeat region on web page

1 Answers1