Jsでフォームに入力した値の正誤をアラートで表示したいがうまくいかない。

Question

このフォームに入力した値をチェックボタンでデータベースと照合して合致すれば正解、違えば不正解と表示したいのですが、１つ前に送信したデータの結果が返ってきてしまいます。
例えば、
正解入力→アラート（不正解）
不正解入力→アラート（正解）
と表示されてしまいます。
リアルタイムで入力された値の正誤を確認する方法はないでしょうか。

      function disp(){
        var user='<?php check_answer();?>';
        var user_answer='<?php check_post();?>'
        if(user==user_answer){
           window.alert("正解");
        }else{
          window.alert("違うよ");
        }
      }

              <div class="card">
                <div class="card-header bg-primary">解答</div>
                <div class="card-body">
                  <!--解答の読み込み-->
                  <?php read_kaitou(); ?>
                  <div class="text-right">
                    <button form="answer" type="submit" class="btn-warning btn-lg" onclick="disp();">チェック</button>
                    <button type="button" class="btn-primary btn-lg">送信</button>
                  </div>
                </div>
              </div>

function check_answer(){
  $id =$_GET['id'];
  $hoge=db();
  $sql="SELECT * FROM mondai WHERE id=$id";
  $stmt= $hoge->prepare($sql);
  $stmt->execute();
  $result = $stmt->fetch(PDO::FETCH_ASSOC);
  echo $result[answer];
}

function check_post(){
  $answer = $_POST['input01'];
  echo $answer;
}

Answer 1

回答を仕込んでおいて、jsでチェックするだけならvalueをもぎ取ってくるだけ。

  function disp(){
    var user='<?php check_answer();?>';
    var user_answer=document.getElementById("input01").value;
    if(user==user_answer){
        window.alert("正解");
    }else{
        window.alert("違うよ");
    }
}

ただこれだとソースを見たら答えがわかるので、yambejpさんの回答の方法にすべき。

Comments

[watta_00]

ご回答ありがとうございます。
わざわざソースコードまでいただきありがとうございます。

Answer 2

サーバーに回答を送って正誤を戻し判定するなら
ajaxもしくはfetchを利用して非同期にバックグラウンドで処理してください

Comments

[watta_00]

ご回答ありがとうございます。
不躾であることは承知しておりますが、少しヒントになるようなソースコードをいただけないでしょうか。