In the username availability check I created two pages: register.php and registercontrol.php controlling it. I check the database connection its on work. Everything (all statements, insertin data into db) that was previously created on a single php page. But when ajax validates other inputs its duplicates the html content and shows the error inside of it instead of showing error messages in a just single html element.
So I seperated it into two pages but now ajax not shows any error and responds. Here is my work:
registercontrol.php
<?php
require('../includes/config.php');
if(isset($_POST['username'])){
//username validation
$username = $_POST['username'];
if (! $user->isValidUsername($username)){
$infoun[] = 'Your username must be at least 6 alphanumeric characters';
} else {
$stmt = $db->prepare('SELECT username FROM members WHERE username = :username');
$stmt->execute(array(':username' => $username));
$row = $stmt->fetch(PDO::FETCH_ASSOC);
if (! empty($row['username'])){
$errorun[] = 'This username already in use';
}
}
}
?>
register.php
<script type="text/javascript">
$(document).ready(function(){
$("#username").keyup(function(event){
event.preventDefault();
var username = $(this).val().trim();
if(username.length >= 3){
$.ajax({
url: 'registercontrol.php',
type: 'POST',
data: {username:username},
success: function(response){
// Show response
$("#uname_response").html(response);
}
});
}else{
$("#uname_response").html("");
}
});
});
</script>
<form id="register-form" class="user" role="form" method="post" action="registercontrol.php" autocomplete="off">
<input type="text" name="username" id="username" class="form-control form-control-user" placeholder="Username" value="<?php if(isset($error)){ echo htmlspecialchars($_POST['username'], ENT_QUOTES); } ?>" tabindex="2" required>
<div id="uname_response" ></div>
</form>