How to implement Recaptcha V2 in Javascript fetch?

Viewed 14

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();
0 Answers
Related