I would like to know how to implement recaptcha V2 (or V3) on my web page that makes an fetch request?
I send the <textarea> data via AJAX to my PHP. Then my PHP returns the results in html <div>.
I have only seen tutorials where they implement Recaptcha via form action and a submit button. But all my attempts to implement it with AJAX have failed.
Could you help me or give me an idea?
resumed html code:
<form class="form-horizontal" method="POST">
<div class="form-floating">
<textarea class="form-control mb-4" name="txt" id="txt" rows="9" aria-describedby="max"></textarea>
<label for="txt" id="labl">Put your numbers on each line</label>
</div>
<button type="button" class="btn btn-primary" id="btnsnd">Start</button>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</form>
Javascript:
const envSoli = async () => {
try {
let peticion = await fetch("data.php", {
method: "POST",
body: "ajax=1&do=check&lista=" + encodeURIComponent(leray[chenille]),
headers: { "Content-type": "application/x-www-form-urlencoded" },
cache: "no-cache"
});
let oreen = await peticion.json();
switch (oreen.enviando) {
case -1:
chenille++;
document.getElementById("div1").append(oreen.cat + "<br />");
updateProgress(chenille, leray.length);
tvmit_wrongUp();
break;
case 1:
chenille++;
document.getElementById("div1").append(oreen.dog + "<br />");
updateProgress(chenille, leray.length);
tvmit_wrongUp();
break;
case 2:
chenille++;
document.getElementById("div2").append(oreen.sky + "<br />");
nieva++;
updateProgress(chenille, leray.length);
tvmit_dieUp();
break;
case 3:
chenille++;
document.getElementById("div3").append(oreen.water + "<br />");
tvmit_liveUp();
updateProgress(chenille, leray.length);
break;
}
OKTY(leray, chenille, aarsh, nieva);
return true;
} catch (error) {
console.log(error)
}
}
envSoli();