Show reCAPTCHA in multiple modal where each modal has different id fetched from database

Viewed 7

Here, 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.

<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>
0 Answers
Related