Dec 1, 2023
0
Level 1
Ajax response sending plain html
hello guys, please i need help on this, i don't know what i'm doing wrong. i want to use ajax to check if a user email or username is present in the database or not, before registering the user. My form is a multistep form and this check occures in the 2nd step of the form. My current code does not check in the 2nd step, and it progress to the next step, after i click on submit in the final step it shows my plain html form along with the error stating the username or email already exist. If both does not exist it register the user which works fine. This is not a laravel project, just plain PHP. Any help will be highly appreciated.
This is the php code that handle my registration
if (isset($_POST['regSubmit'])) {
$fileuploadError = "";
$timestamp = date('Y-m-d H:i:s');
$account_no = '2' . rand(1, 9) . str_pad(rand(0, 999999999), 9, '0', STR_PAD_LEFT);
$account_bal = 0;
$savings = 0;
$current = 0;
$pin = rand(1, 9) . rand(1, 9) . rand(0, 9);
$gender = $_POST['gender'];
$firstname = $_POST['fname'];
$lastname = $_POST['lname'];
$occupation = $_POST['occupation'];
$country = $_POST['country'];
$address = $_POST['address'];
$suite = $_POST['suite'];
$city = $_POST['city'];
$state = $_POST['state'];
$zipcode = $_POST['zipcode'];
$email = $_POST['email'];
$phoneno = $_POST['phone_no'];
$username = $_POST['username'];
$password = $_POST['password'];
$password = password_hash($password, PASSWORD_DEFAULT);
$passport = $_POST['passport'];
$dob = $_POST['dob'];
$status = "0";
// Check if the username already exists
$sql_check_username = $pdo->prepare("SELECT * FROM users WHERE username = :username");
$sql_check_username->execute(['username' => $username]);
$user_username = $sql_check_username->fetch();
// Check if the email already exists
$sql_check_email = $pdo->prepare("SELECT * FROM users WHERE email = :email");
$sql_check_email->execute(['email' => $email]);
$user_email = $sql_check_email->fetch();
$response = array();
if ($user_username) {
$response['usernameError'] = "Username already exists";
} else {
$response['usernameError'] = "";
}
if ($user_email) {
$response['emailError'] = "Email already exists";
} else {
$response['emailError'] = "";
}
header('Content-Type: application/json');
echo json_encode($response);
// Process the profile image upload
if (isset($_FILES['file']) && $_FILES['file']['error'] === UPLOAD_ERR_OK) {
$file_name = $_FILES["file"]["name"];
$file_name = str_replace(" ", "_", $file_name);
$file_type = $_FILES["file"]["type"];
$file_size = $_FILES["file"]["size"];
$file_tmp = $_FILES["file"]["tmp_name"];
$mime_filter = array('image/png', 'image/PNG', 'image/jpg', 'image/JPG', 'image/JPEG', 'image/jpeg');
if (in_array($file_type, $mime_filter)) {
move_uploaded_file($file_tmp, "../images/" . $file_name);
$src = "../images/" . $file_name;
// Save $src to the database or perform any other necessary actions
} else {
$fileuploadError = "Invalid file format for profile image. Please upload an image.";
}
} else {
$fileuploadError = "Error uploading profile image.";
}
// Process the front ID upload
if (isset($_FILES['frontID']) && $_FILES['frontID']['error'] === UPLOAD_ERR_OK) {
$file_name_front = $_FILES["frontID"]["name"];
$file_name_front = str_replace(" ", "_", $file_name_front);
$file_type_front = $_FILES["frontID"]["type"];
$file_size_front = $_FILES["frontID"]["size"];
$file_tmp_front = $_FILES["frontID"]["tmp_name"];
$mime_filter_front = array('image/png', 'image/PNG', 'image/jpg', 'image/JPG', 'image/JPEG', 'image/jpeg');
if (in_array($file_type_front, $mime_filter_front)) {
move_uploaded_file($file_tmp_front, "../images/frontID_" . $file_name_front);
$src_front = "../images/frontID_" . $file_name_front;
// Save $src_front to the database or perform any other necessary actions
} else {
$fileuploadError = "Invalid file format for front ID image. Please upload an image.";
}
} else {
$fileuploadError = "Error uploading front ID image.";
}
// Process the back ID upload
if (isset($_FILES['backID']) && $_FILES['backID']['error'] === UPLOAD_ERR_OK) {
$file_name_back = $_FILES["backID"]["name"];
$file_name_back = str_replace(" ", "_", $file_name_back);
$file_type_back = $_FILES["backID"]["type"];
$file_size_back = $_FILES["backID"]["size"];
$file_tmp_back = $_FILES["backID"]["tmp_name"];
$mime_filter_back = array('image/png', 'image/PNG', 'image/jpg', 'image/JPG', 'image/JPEG', 'image/jpeg');
if (in_array($file_type_back, $mime_filter_back)) {
move_uploaded_file($file_tmp_back, "../images/backID_" . $file_name_back);
$src_back = "../images/backID_" . $file_name_back;
} else {
$fileuploadError = "Invalid file format for back ID image. Please upload an image.";
}
} else {
$fileuploadError = "Error uploading back ID image.";
}
// Check for any file upload errors before proceeding
if (!empty($fileuploadError)) {
echo "File upload error: " . $fileuploadError;
exit;
}
// Prepare and execute the database query
$result = prepared_insert($pdo, 'users', [
'gender' => $gender,
'username' => $username,
'last_name' => $lastname,
'first_name' => $firstname,
'email' => $email,
'password' => $password,
'account_no' => $account_no,
'savings' => $savings,
'current' => $current,
'account_bal' => $account_bal,
'pin' => $pin,
'address' => $address,
'city' => $city,
'zip_code' => $zipcode,
'country' => $country,
'phone_no' => $phoneno,
'dob' => $dob,
'status' => $status,
'identity' => $src,
'front_id' => $src_front,
'back_id' => $src_back,
'created_at' => $timestamp,
'updated_at' => $timestamp
]);
$_SESSION['username'] = $username;
header('location:../user/index.php');
}
Here is my javascript code
// Function to check availability
function checkAvailability() {
var username = $("#username").val();
var email = $("#email").val();
$.ajax({
type: "POST",
url: "../database/server.php",
data: { username: username, email: email },
success: function (response) {
var data = JSON.parse(response);
if (data.usernameError) {
$("#usernameError").text(data.usernameError);
} else {
$("#usernameError").text("");
}
if (data.emailError) {
$("#emailError").text(data.emailError);
} else {
$("#emailError").text("");
}
},
error: function handleError(xhr, status, error) {
console.error("AJAX Error: " + status + " - " + error);
}
});
}
// Trigger checkAvailability function on keyup
$("#username").keyup(checkAvailability);
$("#email").keyup(checkAvailability);
});
Here is my form
<form method="post" role="form" enctype="multipart/form-data">
<div class="form-wizard-header">
<p>Fill all form field to go next step</p>
<ul class="list-unstyled form-wizard-steps clearfix">
<li class="active">
<span>1</span>
</li>
<li>
<span>2</span>
</li>
<li>
<span>3</span>
</li>
<li>
<span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></span>
</li>
</ul>
</div>
<fieldset class="wizard-fieldset show">
<h5>Personal Info</h5>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="gender">Gender*</label>
<select class="form-control wizard-required" id="gender" name="gender">
<option>Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<div class="wizard-form-error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control wizard-required" id="fname" name="fname">
<label for="fname" class="wizard-form-text-label">First Name*</label>
<div class="wizard-form-error"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control wizard-required" id="lname" name="lname">
<label for="lname" class="wizard-form-text-label">Last Name*</label>
<div class="wizard-form-error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control wizard-required" id="occupation" name="occupation">
<label for="occupation" class="wizard-form-text-label">Occupation</label>
<div class="wizard-form-error"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<select class="form-control" name="country" required="">
<option selected="selected">Select Country</option>
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
</select>
</div>
</div>
</div>
<h5>Residential Address</h5>
<div class="form-group">
<input type="text" class="form-control wizard-required" id="address" name="address">
<input name="radio-name" id="text" type="text" value="male" hidden="">
<label for="address" class="wizard-form-text-label">Street Address*</label>
<div class="wizard-form-error"></div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control wizard" id="Suite" name="suite">
<label for="Suite" class="wizard-form-text-label">Apt/Suite/Unit</label>
<div class="wizard-form-error"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control wizard-required" id="city" name="city">
<label for="city" class="wizard-form-text-label">City*</label>
<div class="wizard-form-error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control wizard-required" id="state" name="state">
<label for="state" class="wizard-form-text-label">State*</label>
<div class="wizard-form-error"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control wizard-required" id="zipcode" name="zipcode">
<label for="zipcode" class="wizard-form-text-label">Zip Code*</label>
<div class="wizard-form-error"></div>
</div>
</div>
</div>
<div class="form-group clearfix">
<a href="javascript:;" class="form-wizard-next-btn float-right">Next</a>
</div>
</fieldset>
<fieldset class="wizard-fieldset">
<h5>Create your login</h5>
<div class="form-group">
<input type="text" class="form-control wizard-required" id="email" name="email">
<label for="email" class="wizard-form-text-label">Email Address*</label>
<div class="wizard-form-error"></div>
<span id="emailError" class="error"></span>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="number" class="form-control wizard-required" id="phoneNumber" name="phone_no">
<label for="phoneNumber" class="wizard-form-text-label">Phone Number*</label>
<div class="wizard-form-error"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control wizard-required" id="username" name="username">
<input type="text" name="acct_pin" id="acct_pin" value="1234" hidden="">
<label for="username" class="wizard-form-text-label">Username*</label>
<div class="wizard-form-error"></div>
<span id="usernameError" class="error"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="password" class="form-control wizard-required" id="pwd" name="password">
<label for="pwd" class="wizard-form-text-label">Password*</label>
<div class="wizard-form-error"></div>
<span class="wizard-password-eye" id="toggle-password"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="password" class="form-control wizard-required" id="confirmPassword" name="">
<label for="confirmPassword" class="wizard-form-text-label">Confirm Password*</label>
<div class="wizard-form-error"></div>
<div id="password-error" class="alert alert-danger" style="display:none;">Confirm password do not match.</div>
<span class="wizard-password-eye"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg></span>
</div>
</div>
</div>
<div class="form-group clearfix">
<a href="javascript:;" class="form-wizard-previous-btn float-left">Previous</a>
<a href="javascript:;" class="form-wizard-next-btn float-right" id="checkAvailability">Next</a>
</div>
</fieldset>
<fieldset class="wizard-fieldset">
<h5>Verify your identity</h5>
<p>We'er required by law to verify the identity of our customers.</p>
<div id="Div1">
<div class="container">
<div class="row mb-3">
<div class="col-md-2 mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock text-primary">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
</div>
<div class="col-md-10">
<h6>Security in mind</h6>
We use your data to help keep your account safe and secure.
</div>
</div>
<div class="row mb-3">
<div class="col-md-2 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-credit-card text-primary">
<rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
<line x1="1" y1="10" x2="23" y2="10"></line>
</svg>
</div>
<div class="col-md-10">
<h6>Only for what you need</h6>
Occasionally we'll need to provide you with tax documents, which require your SSN.
</div>
</div>
<div class="row mb-3">
<div class="col-md-2 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit text-primary">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
</svg>
</div>
<div class="col-md-10">
<h6>No credit score impact</h6>
Applying for Fsdcapitalz Bank Account will never impact your credit score
</div>
</div>
</div>
</div>
<div id="Div2">
<div class="form-group">
<input type="text" class="form-control wizard-required" id="passport" name="passport">
<label for="passport" class="wizard-form-text-label">Passport / ID Number*</label>
<div class="wizard-form-error"></div>
<span class="wizard-password-eye"><i class="far fa-eye"></i></span>
</div>
<div class="form-group">
<input type="text" class="form-control wizard-required" id="confirm-passport" name="">
<label for="confirm-passport" class="wizard-form-text-label">Confirm Passport / ID Number*</label>
<div class="wizard-form-error"></div>
<span class="wizard-password-eye"><i class="far fa-eye"></i></span>
</div>
<div class="form-group">
<input type="date" class="form-control wizard-required" id="dob" name="dob">
<label for="dob" class="wizard-form-text-label">Date of Birth*</label>
<div class="wizard-form-error"></div>
<span class="wizard-password-eye"><i class="far fa-eye"></i></span>
</div>
</div>
<div class="form-group clearfix">
<a href="javascript:;" class="form-wizard-previous-btn float-left">Previous</a>
<a class="form-wizard-next-btn float-right" id="Button1" value="Click" onclick="switchVisible();">Next post</a>
<a href="javascript:;" class="form-wizard-next-btn float-right" id="nextShow">Next time</a>
</div>
</fieldset>
<fieldset class="wizard-fieldset text-white">
<div class="mt-3" >
<div class="form-group">
<label for="frontDoc" style="color: #888 !important;">Upload Profile Image</label>
<input class="form-control" type="file" name="file" id="frontDoc" required "">
</div>
</div>
<div class="mt-3">
<div class="form-group">
<label for="frontDoc" style="color: #888 !important;">ID CARD FRONT</label>
<input class="form-control" type="file" name="frontID" id="frontDoc" required "">
</div>
<div class="form-group">
<label for="" style="color: #888 !important;">ID CARD BACK</label>
<input class="form-control" type="file" name="backID" id="" required "">
</div>
</div>
<div class="form-group clearfix">
<a href="javascript:;" class="form-wizard-previous-btn float-left">Previous</a>
<!-- <a href="javascript:;" class="form-wizard-submit float-right">Submit</a>-->
<button class="form-wizard-submit float-right btn btn-primary" type="submit" name="regSubmit">Submit</button>
</div>
</fieldset>
</form>
Please or to participate in this conversation.