How do I show an error without refreshing the page?

Question

I'm creating a registration form. The user enters the username and password, and presses submit, and the form is submitted using POST. HTML :

<link href="Styles/RegisterStyles.css" rel="stylesheet" type="text/css" />
<form id="frmRegister" method="post" action="register.php">
  <h1>Register</h1>
    <table width="100%">
      <tr>
        <td width="16%"><label class="alignRight"> Username: </label></td>
        <td width="84%"><input name="txtUsername" type="text" maxlength="40" /></td>
      </tr>

      <tr>
        <td width="16%"><label class="alignRight"> Password: </label></td>
        <td width="84%"><input name="txtPassword" type="text" maxlength="40" /></td>
      </tr>

      <tr>
        <td width="16%">&nbsp;</td>
        <td width="84%"><input name="Submit" class="submitButton" type="submit" /></td>        
      </tr>

    </table>
</form>
</html>

PHP:

$username = $_POST["txtUsername"];
$password = $_POST["txtPassword"];
//Code to connect to database

function doesUsernameExist($username)
{
    //return true if username exists or false otherwise
}

Now, in PHP, I run a query to check if the username exists in the database. If the username already exists, how can I notify the user without navigating to another page and causing the "username" and "password" fields to be reset to blank?

Some registration forms have a really neat Javascript that checks if the username exists each time you press a key on the keyboard. Any ideas on how this could be implemented? It's difficult ( and bad practice ) to connect to a database using JavaScript from what I can gather.

Answer 1

I use jQuery to do something like this.

in the html

<input type="text" name="username" onBlur="checkUsername(this)">

in the javascript something like this

function checkUsername(v){
    $.post("phppage.php",{
        valToBeChecked:v
    },function(d){
        if($.trim(d)==true){
            // php page returned true
        }else{
            // php page returned false
        }
    });
}

do note this is only an example, I think I got the syntax right tho.

Answer 2

My solution to this would be to utilize AJAX.

On submission of your form, make an AJAX call to a page that will evaluate the data that has been input into the form, and return information regarding whether or not it was validated.

After you get back some information from that AJAX call, determine whether or not to submit the form again, but this time to a page that will absorb the data into the database.

It's one solution; and as an AJAX newbie I'd say there are probably better ones, but it might work for you.

Answer 3

This will do an AJAX check on blur of the input without jQuery.

Edit: I want to clarify that I don't suggest this approach, and much prefer the use of jQuery (or other similar JS framework) for AJAX. However, I understand that not everyone has the luxury of specifying the technologies they use, and so here's the answer to your request! :)

<input id="txtUsername" name="txtUsername" />
<script type="text/javascript">
    window.onload = function() {
        document.getElementById('txtUsername').onblur = function(e) {
            // Get the username entered
            var el = e.target;
            var username = el.value;

            // Create an XHR
            var xhr = null;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }

            // AJAX call to the server
            request.open('GET', '/check_username.php?username=' + username, false);
            xhr.onload = function(e) {
                var json = eval(xhr.responseText);
                if (json.exists) {
                   window.alert('That username exists already.');
                }
            }
            xhr.send();
        }
    }
</script>

user_exists.php

$username = isset($_GET['username']) ? $_GET['username'] : '';
$username = mysqli_real_escape_string($username);

$sql = "SELECT COUNT(*) > 0 AS user_found
        FROM users
        WHERE username = '{$username}'";

$result = mysqli_query($sql);

$exists = false;
if ($row = mysqli_fetch_assoc($result)) {
    $exists = $row['user_found'] ? true : false;
}

echo json_encode(array('exists' => $exists));

Answer 4

A great option is to use jQuery/AJAX. Look at these examples and try them out on your server. In this example, in FILE1.php, note that it is passing a blank value. You don't want to pass a blank value, this is where you would put your username and password to deliver to FILE2.php. In your case, the line would look like this:

data: 'username='+username+'&password='+password,

In the FILE2.php example, you would retrieve those values like this:

$uname = $_POST['username'];
$pword = $_POST['password'];

Then do your MySQL lookup and return the values thus:

echo 1;

This would deliver a 1 to the success function in FILE1.php, and it would be stored in the variable called "data". Therefore, the alert(data) line in the success function would alert the number one.

Here is another good example to review.

The approach is to create your form, and then use jQuery to detect the button press and submit the data to a secondary PHP file via AJAX. The above examples show how to do that.

The secondary PHP file returns a response (whatever you choose to send) and that appears in the Success: section of your AJAX call.

The jQuery/AJAX is JavaScript, so you have two options: you can place it within <script type="text/javascript"></script> tags within your main PHP document, or you can <?php include "my_javascript_stuff.js"; ?> at the bottom of your PHP document.