Captcha Arithmetic

by davidxmartins

HTML

<form id="myForm" action="submit_form.php" method="POST" onsubmit="return validateCaptcha()">
  <div class="form-group">
    <input type="text" name="name" placeholder="Your Name" required>
  </div>
  <div class="form-group">
    <input type="email" name="email" placeholder="Your Email" required>
  </div>

  <!-- Arithmetic CAPTCHA -->
  <div class="form-group">
    <label for="captcha">What is <span id="num1"></span> + <span id="num2"></span>?</label>
    <input type="text" id="captchaInput" name="captcha" placeholder="Your Answer" required>
    <input type="hidden" id="captchaResult">
  </div>

  <button type="submit">Submit</button>
</form>

<script>
  // Generate two random numbers for the CAPTCHA
  var num1 = Math.floor(Math.random() * 10);
  var num2 = Math.floor(Math.random() * 10);
  document.getElementById('num1').innerText = num1;
  document.getElementById('num2').innerText = num2;

  // Store the result of the arithmetic question
  document.getElementById('captchaResult').value = num1 + num2;

  // Validate the CAPTCHA before form submission
  function validateCaptcha() {
    var userAnswer = document.getElementById('captchaInput').value;
    var correctAnswer = document.getElementById('captchaResult').value;

    if (userAnswer != correctAnswer) {
      alert("Incorrect CAPTCHA answer. Please try again.");
      return false; // Prevent form submission
    }
    return true; // Proceed with form submission
  }
</script>