2

This is my code:

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

<?php
    $result = $DBConnect->query("SELECT id FROM table");
    while ($row = $result->fetch()) { ?>

        <a href="#" class="btn" data-toggle="modal" data-target="#modal<?php echo $row['id']; ?>"> Reply</a>
    <?php  include "modal.php"; } ?>

// modal.php


      <div class="modal fade" id="modal<?php echo $row['id']; ?>" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="" method="post" enctype="multipart/form-data" autocomplete="on">
                        <div class="modal-body">
                            <div class="row">
                                <label>Name : </label>
                                <input type="text" name="customer_name" class="pass-input" value="" required>
                                <label>Email : </label>
                                <input type="email" name="customer_email" class="pass-input" value="">
                           </div>
                       </div>
                        <div class="modal-footer">
                            <div id="captcha"></div>
                            <button class="btn" type="submit" name="send">Send</button>
                        </div>
               </form>
            </div>
        </div>
    </div>

<script>
    $(function () {
       var anchor = window.location.hash;
       $(anchor).modal('show');
       setTimeout(function() {
        createRecaptcha();
        }, 100);
    });
    function createRecaptcha() {
        grecaptcha.render("captcha", {sitekey: "SITE_KEY", theme: "light"});
    }
 </script>

In above code Recaptcha works for modal opened when I click first Reply button in list of many Reply buttons. When I click other Reply buttons Recaptcha wont display in the modal popup since I used only used only one id in <div id="captcha"></div>.

How can I modify my code so that when I open different modal, Recaptcha will show in each modal.

7
  • You'll need to give each captcha div a unique ID like you do with the modals, and pass the relevant ID into createRecaptcha each time. You'll need to handle the event of the modal being shown (check the bootstrap docs) so that you can run the createRecaptcha function each time, whereas now you only run it when the page first loads.
    – ADyson
    Commented Sep 8, 2022 at 12:29
  • @ADyson pass the relevant ID into createRecaptcha each time-- Can u please tell how to do this? Commented Sep 8, 2022 at 12:32
  • Like any value you pass into a function, e.g. function createRecaptcha(id) { grecaptcha.render(id...etc then you can call it like var divID = "captcha1"; createRecaptcha(divID);.
    – ADyson
    Commented Sep 8, 2022 at 12:33
  • Or are you asking how to decide which ID to pass in?
    – ADyson
    Commented Sep 8, 2022 at 12:33
  • @ADyson How to fetch the modal id when I open modal each time? Commented Sep 8, 2022 at 12:37

0