mikicho/multiple_recaptcha_same_page.html

## multiple_recaptcha_same_page.html
<html>
  <head>
    <title>reCAPTCHA demo - Invisible</title>
  </head>
  <body>
    <header>
      <h1>reCAPTCHA demo</h1><h2>Invisible</h2>
    </header>
    <p>Submit the form and reCAPTCHA will run automatically.</p>
    <div style="width: 500px;">
      <form action="/" method="post">
        <fieldset>
            <legend>An example form</legend>
            <label class="form-field">Example input A: <input type="text" name="ex-a" value="foo"></label>
            <label class="form-field">Example input B: <input type="text" name="ex-b" value="bar"></label>
            <button class="recap">Submit ↦</button>
        </fieldset>
    </form>
    <form action="/" method="post">
      <fieldset>
          <legend>An example form</legend>
          <label class="form-field">Example input A: <input type="text" name="ex-a" value="foo"></label>
          <label class="form-field">Example input B: <input type="text" name="ex-b" value="bar"></label>
          <button class="recap">Submit ↦</button>
      </fieldset>
  </form>
    </div>
      <script type="text/javascript">
        var counter = 0;
        function validate(form, widgetId) {
          if (counter % 2 == 0) {
            console.log('Invalid form!');
          } else {
            grecaptcha.execute(widgetId);
          }
          counter++;
        }
        function onloadCallback() {
          Array.from(document.getElementsByClassName('recap')).forEach(item => {
            const container = document.createElement('div');
            item.append(container);

            const widgetId = grecaptcha.render(container, {
              sitekey: '6LfGhsAUAAAAAB_fbSedgr99cuVnx1EjgEKhLMaA',
              size: 'invisible',
              callback: function(token) {
                console.log(token);
                console.log(item.form);
                // item.form.submit();
              }
            });

            item.onclick = (e) => {
              e.preventDefault();
              validate(e.target.form, widgetId);
            };
          })
        }
    </script>
    <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
  </body>
</html>
	<html>
	<head>
	<title>reCAPTCHA demo - Invisible</title>
	</head>
	<body>
	<header>
	<h1>reCAPTCHA demo</h1><h2>Invisible</h2>
	</header>
	<p>Submit the form and reCAPTCHA will run automatically.</p>
	<div style="width: 500px;">
	<form action="/" method="post">
	<fieldset>
	<legend>An example form</legend>
	<label class="form-field">Example input A: <input type="text" name="ex-a" value="foo"></label>
	<label class="form-field">Example input B: <input type="text" name="ex-b" value="bar"></label>
	<button class="recap">Submit ↦</button>
	</fieldset>
	</form>
	<form action="/" method="post">
	<fieldset>
	<legend>An example form</legend>
	<label class="form-field">Example input A: <input type="text" name="ex-a" value="foo"></label>
	<label class="form-field">Example input B: <input type="text" name="ex-b" value="bar"></label>
	<button class="recap">Submit ↦</button>
	</fieldset>
	</form>
	</div>
	<script type="text/javascript">
	var counter = 0;
	function validate(form, widgetId) {
	if (counter % 2 == 0) {
	console.log('Invalid form!');
	} else {
	grecaptcha.execute(widgetId);
	}
	counter++;
	}
	function onloadCallback() {
	Array.from(document.getElementsByClassName('recap')).forEach(item => {
	const container = document.createElement('div');
	item.append(container);

	const widgetId = grecaptcha.render(container, {
	sitekey: '6LfGhsAUAAAAAB_fbSedgr99cuVnx1EjgEKhLMaA',
	size: 'invisible',
	callback: function(token) {
	console.log(token);
	console.log(item.form);
	// item.form.submit();
	}
	});

	item.onclick = (e) => {
	e.preventDefault();
	validate(e.target.form, widgetId);
	};
	})
	}
	</script>
	<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
	</body>
	</html>