Checking Username with ajax and stop entery into database table

JavaScript
1

I am checking duplicate entry issue with javascript, for example : When I entered duplicate username then its creating message that user already exist . (everything working fine till this ) But when I click submit, its also entered data into database by ignoring existing message, how can I stop submit button from processing if duplicate message is display before submit button. here is my code

main file

<html>
<head>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<form class="a16" action="form9.php" method="POST" autocomplete="on">
                                    <label for="userName" class=" ">Użytkownik:</label>

<input type="text" name="userName" placeholder="Username" id="userName1" onBlur="checkAvailability()">

      <span id="user-availability-status"></span> 
<p><img src="LoaderIcon.gif" id="loaderIcon" style="display:none" /></p>

<input type="submit" name="submit" id="submit" value="Submit">

 <script type="text/javascript">     

function checkAvailability() {
$("#loaderIcon").show();
jQuery.ajax({
url: "proceser.php",
data:'userName='+$("#userName1").val(),
type: "POST",
success:function(data){
$("#user-availability-status").html(data);
$("#loaderIcon").hide();
},
error:function (){}
});
}
</script>

// Here is proceser.php which check duplicate value in database

<?php
 include 'db1.php';   //standard datebase local connection..

 if(isset($_POST['userName']) && $_POST['userName']!="") {
     if ($stmt = $con->prepare('SELECT userName FROM ttt WHERE userName = ?')) {
         $stmt->bind_param('s', $_POST['userName']);
         $stmt->execute();
         $stmt->store_result();
         $numRows = $stmt->num_rows;
         if ($numRows > 0) {
             echo "<span class=''> Username Not Available.</span>";
         } else {
             echo "<span class=''> Username Available.</span>";
         }
     }
 }
$con->close();
ob_end_flush();

?>

//database processing for complete form

<?php
    // getting all values from the HTML form
    if(isset($_POST['submit']))
    {
        $username1 = $_POST['userName'];

	}		

    // database details
    $host = "localhost";
    $username = "root";
    $password = "";
    $dbname = "hmis";

    // creating a connection
    $con = mysqli_connect($host, $username, $password, $dbname);

    // to ensure that the connection is made
    if (!$con)
    {
        die("Connection failed!" . mysqli_connect_error());
    }

    // using sql to create a data entry query
    $sql = "INSERT INTO ttt (username)
 VALUES ('$username1')"; 

   
  
    // send query to the database to add values and confirm if successful
    $rs = mysqli_query($con, $sql);
    if($rs)
    {
        echo "";
    }
2

The method is the same as in your recent thread for the mobile phone number.

Define the database column as a unique index, attempt to insert the data, in the exception try/catch logic detect if the error number is for a duplicate index error. If it is, then setup and output the Username Not Available message for the user. If the row was inserted successfully, display a success message for the user.

3

no, i want it before submit button and currently its displaying duplicate message when I entered username. but the problem is that I want to disable submit button when username already exit, i dont knew how to do it

4

You can pre-filter values if you want, but your database design must enforce uniqueness. it is the last step in the process.

There can be multiple concurrent instances of your script running, they can all find that a value doesn’t exist, but when the data is finally inserted, only the first script to execute the insert query should succeed. The remaining instances of the script should get a duplicate index error, that causes your code to output a message that the value is already in use.

That’s a fairly straightforward programming exercise to put together. You would test the value that is returned to the ajax code and set the disabled attribute for the submit button. I recommend that you do some research on the web. Doing this won’t prevent a nefarious user/bot from submitting duplicate data, which is why your database design must enforce uniqueness.

5

You can modify your JavaScript code to prevent the form from being submitted when a duplicate username is detected. Like you can do it like this:

var isUsernameAvailable = false; // global variable to store username availability

function checkAvailability() {
    $("#loaderIcon").show();
    jQuery.ajax({
        url: "proceser.php",
        data:'userName='+$("#userName1").val(),
        type: "POST",
        success:function(data){
            $("#user-availability-status").html(data);
            $("#loaderIcon").hide();
            if (data.includes("Username Available")) {
                isUsernameAvailable = true;
            } else {
                isUsernameAvailable = false;
            }
        },
        error:function (){}
    });
}

// prevent form submission when username is not available
$(".a16").on("submit", function(e) {
    if (!isUsernameAvailable) {
        e.preventDefault();
        alert("Username is not available. Please choose a different username.");
    }
});

In this code, we’re setting a global variable isUsernameAvailable to true when the username is available and false when it’s not. Then, we’re adding a submit event listener to the form that prevents the form submission (e.preventDefault()) when isUsernameAvailable is false.

6

Maybe you should call your check availability function somewhere?

7

That’s a good point, Thallius. The checkAvailability() function is indeed being called on the onBlur event of the username input field. However, it might be beneficial to also call this function right before form submission to ensure the username hasn’t been taken in the meantime. This could help prevent the issue of duplicate entries in the database.