How can I check if user-entered email is already saved in my database before submitting the form?

Question

I want to check whether the e-mail entered by the user in the form has already been saved in the database. I got help from Chatgpt, but I still couldn't do it, it runs the form completely without checking the entered information and adds it directly to the database.

register.html

<form class="login100-form validate-form flex-sb flex-w" method="POST" action="mysql/kayitekle.php" id="login-form">
                    <span class="login100-form-title p-b-3">
                        Kayıt Ol
                    </span>
                    <div class="p-t-31 p-b-9">
                        <label for="name" class="txt1">
                            İsim
                                                    </label>
                    </div>
                    <div class="wrap-input100 validate-input" data-validate = "İsim alanı gereklidir">
                        <input id="name" class="input100" type="text" name="name" >
                        <span class="focus-input100"></span>
                    </div>

                    <div class="p-t-31 p-b-9">
                        <label for="email" class="txt1">
                            E-posta Adresi
                            <span class="text-danger" id="email-message"></span>                    </label>
                    </div>
                    <div class="wrap-input100 validate-input" data-validate = "E-posta adresi gereklidir">
                        <input id="email" class="input100" type="email" name="email" >
                        <span class="focus-input100"></span>
                    </div>

                    <div class="p-t-13 p-b-9 d-inline-flex">
                        <label for="password" class="txt1">
                            Şifre
                            <span class="text-danger" id="password-message"></span>                         </label>
                    </div>
                    <div class="wrap-input100 validate-input" data-validate = "Şifre alanı gereklidir">
                        <input id="password" class="input100" type="password" name="password" >
                        <span class="focus-input100"></span>
                    </div>

                    <div class="p-t-13 p-b-9 d-inline-flex">
                        <label for="password_confirmation" class="txt1">
                            Şifre
                        </label>
                    </div>
                    <div class="wrap-input100 validate-input" data-validate = "Şifre alanı gereklidir">
                        <input id="password_confirmation" class="input100" type="password" name="password_confirmation" >
                        <span class="focus-input100"></span>
                    </div>
                
                    <div class="container-login100-form-btn m-t-17">
                        <button type="submit" class="login100-form-btn" id="submit">
                            Kayıt Ol
                        </button>
                    </div>

                    <div class="w-full text-center p-t-55">
                        <span class="txt2">
                            Zaten üye misin?
                        </span>

                        <a href="#" class="txt2 bo1">
                            Hemen giriş yap!
                        </a>
                    </div>
                </form>

<script>
        const frm = document.getElementById("login-form");
        frm.addEventListener("submit", function(event) {
          event.preventDefault();
      
          const messageElement = document.getElementById("email-message");
          const email = document.getElementById("email").value;

      
          const xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
              const response = JSON.parse(xhr.responseText);
              const exists = response.exists;
      
              if (exists) {
                messageElement.innerHTML = "E-MAIL is already registered";
              } else {
                // Kayıt işlemi devam edebilir
                frm.submit();
              }
            }
          };
      
          xhr.open("POST", "kontrolet.php", true);
          xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          xhr.send("email=" + encodeURIComponent(email));
        });
      </script>

kontrolet.php

<?php

include("baglanti.php");
$eposta = $_POST["email"];

// Veritabanı bağlantısı

$query = "SELECT COUNT(*) as count FROM uyehesap WHERE email = '$eposta'";
$result = mysqli_query($baglan, $query);

if ($result && mysqli_num_rows($result) > 0) {
    $exists = true;
}

$response = array("exists" => $exists);
echo json_encode($response);

// Bağlantıyı kapat
mysqli_close($baglan);
?>

I want to check whether the e-mail entered by the user in the form is saved in the database, but it saves it to the database without checking it directly.

Answer 1

What you are trying to say can only be archived using AJAX. But if you wanna check on form submit and return back an error based on the result, you can achieve that by adding the following code.

// Check if the email already exists
$query = "SELECT * FROM your_database WHERE email = ?";
$stmt = $db->prepare($query);
$stmt->bind_param("s", $email);
$stmt->execute();

$result = $stmt->get_result();

if ($result->num_rows > 0) {
    return false; // Email already registered
}

Secondly, right now your SQL code is really unsafe. Your current code directly takes user input in the SQL query. Which can easily result in SQL Injection. Always Sanitize your from inputs.

Lastly, I will recommend you to use prepared statements or parameterized queries to make your Database more safe.