如何在recaptcha之后执行动作表单

Question

i want to post a comment using my form, it works without a recaptcha but when i add the recaptcha it doesn't work here is my code with recaptcha

<?php
           echo "<form class='recaptchaForm' method='POST' action='".setComments($conn)."'>
              <input type='hidden' name='room_name' value='$name'>
              <input type='hidden' name='date' value='".date('Y-m-d H:i:s')."'>
              <input type='text' name='uname' id='uname' class='name' placeholder='Name' required  /><br>
              <input type='text' name='umail'
              id='umail' class='name' placeholder='E-mail' required  />

              <textarea id='message' class='message' name='message'
              placeholder='Join the Discussion'
              required ></textarea><br>

              <div class='g-recaptcha' data-sitekey='6LfF4XYUAAAAAMaLkn2-AMUsoEkt-ym-SFsCVEBG'></div>

              <button type='submit' id='post' name='commentSubmit'>Post Review</button>

            </form>";
        ?>

here is the script

<script>
    $(document).on('click', '[name="commentSubmit"]' function(event)  {

    var recaptcha = $('[name="g-recaptcha-response"]').val();
    if(recaptcha===""){

    event.preventDefault();
    alert("Please Check Recaptcha");
 }
  event.preventDefault();
   $.post("submit.php",{
   "secret":"6LfF4XYUAAAAAFXOxblX4Vttp67bmaRJXkua6Ks-",
   "response":recaptcha
 },function(response){
 console.log(response);

 $('.recaptchaForm').submit();

   }); // End of response

 }); // End of $.post
}); // End of click event function
</script>

here is the submit.php

<?php
   $secret = $_POST["secret"];
   $response = $_POST["response"];
   $url = "https://www.google.com/recaptcha/api/siteverify? 
   secret=".$secret."&response=".$response;
   $verify = file_get_contents($url);
   echo $verify;
?>

here is the action='".setComments($conn)."'

function setComments($conn){
    if(isset($_POST['commentSubmit'])){
        $room_name = $_POST['room_name'];
        $date = $_POST['date'];
        $uname = $_POST['uname'];
        $umail = $_POST['umail'];
        $message = $_POST['message'];

        $query = "insert into comments_table (cname, cmail, cmessage,room_name,cdate) Values ('$uname','$umail','$message','$room_name','$date')";
        $result = mysqli_query($conn, $query);
    }
    } 

i think i missing something but i dont know what it is please help me im a beginner

Answer 1

I think event.preventDefault is not letting the form to submit. So check by modifying the script to this :

$(document).on('click', '[name="commentSubmit"]', function(event)  {
event.preventDefault();
var recaptcha = $('[name="g-recaptcha-response"]').val();
if(recaptcha===""){

  alert("Please Check Recaptcha");

}
else{

 $.post("submit.php",{
    "secret":"6LfF4XYUAAAAAFXOxblX4Vttp67bmaRJXkua6Ks-",
    "response":recaptcha
 },function(response){
    console.log(response);

    $('.recaptchaForm').submit();


   });
 }

 });