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.
function createRecaptcha(id) { grecaptcha.render(id
...etc then you can call it likevar divID = "captcha1"; createRecaptcha(divID);
.