I hope you’re doing well. I’m fairly new to PHP, JavaScript, and programming in general, and I would greatly appreciate any guidance you can offer.
Problem:
I want to change the color of the email input field based on whether the entered email already exists in the database. If the email exists, the input box should turn red; if not, it should turn green. I am using PHP for the server-side logic and AJAX/jQuery for the client-side.
The Process:
When the email input loses focus, an AJAX request is sent to email_checker.php, where I check if the email already exists in the database.
I then use the response to change the color of the input box.
script.js (AJAX and jQuery):
$(document).ready(function() {
$('form>input[name=email]').on('blur', checkEmail); // Trigger when the email input loses focus
function checkEmail() {
var received_email = $('form>input[name=email]').val(); // Get the email value
$.ajax({
url: "servers/email_checker.php", // Send request to this PHP file
type: "POST", // HTTP POST method
data: { email: received_email }, // Pass the email data
success: function(result) { // Handle the response
if (result.available) { // Email available
$('form>input[name=email]').css('color', 'green');
} else { // Email already exists
$('form>input[name=email]').css('color', 'red');
alert('Cet email est déjà utilisé.'); // Show error message
}
},
error: function(err) { // Error handling
alert("Une erreur est survenue: " + err.statusText);
}
});
}
});
servers/email_checker.php (Server-side logic):
<?php
session_start();
include("db.php");
if (isset($_POST["email"])) {
$email = $_POST["email"];
// Check if the email already exists
$sql = "SELECT * FROM clients WHERE email = '$email'";
$result = mysqli_query($conn, $sql);
// Return JSON response
if (mysqli_num_rows($result) > 0) {
echo json_encode(["available" => false]); // Email exists
} else {
echo json_encode(["available" => true]); // Email available
}
} else {
echo json_encode(["available" => false]); // No email sent
}
?>
new.php (Form and PHP code):
<?php
session_start();
include("db.php");
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/style.css">
<title>Créer un compte</title>
</head>
<body>
<form action="new.php" method="post">
<!-- Form fields for name, email, password, etc. -->
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="motdepasse" placeholder="Password" required>
<input type="submit" name="newbt" value="Créer un compte">
</form>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="site/script.js"></script>
</body>
</html>
<?php
if (isset($_POST["newbt"])) {
$email = $_POST["email"];
// Additional form processing code for inserting into the database
$sql_check_email = "SELECT * FROM clients WHERE email = '$email'";
$result_check = mysqli_query($conn, $sql_check_email);
if (mysqli_num_rows($result_check) > 0) {
echo "Cet email est déjà utilisé.";
} else {
// Insert the new user and activity into the database
$sql1 = "INSERT INTO clients (firstname, lastname, sex, age, email, password) VALUES('$prenom', '$nom', '$sex', '$age', '$email', '$password')";
$sql2 = "INSERT INTO activities (name, description, season) VALUES('$sport', '$des', '$season')";
$result1 = mysqli_query($conn, $sql1);
$result2 = mysqli_query($conn, $sql2);
if ($result1 && $result2) {
header("Location: index.php");
session_destroy();
exit();
} else {
echo "Une erreur est survenue. L'email est peut-être déjà utilisé.";
}
}
}
?>
