How do I receive data from a PHP echo to display using AJAX?

Question

Simply said: How do I receive data from a PHP echo to display using AJAX?

I have the ability to use JQuery; however, I don't know if that would be right for the job or not. I simply have a form in HTML which the user may input information, but as they are entering data, I want to check for availability against a database. If the input checks and there's no problem, I don't want any text displayed, but if there's a problem then I want to display an error. I currently have a sign-up form working with PHP and MySQL through a database, but I can't get the errors to echo out without having a page refresh. Is there any way to show errors without refreshing?

HTML:

<form action="index.php" method="POST">
            <table>
                <tr>
                    <td colspan="3"><h1>New to the site?</h1></td>
                </tr>
                <tr>
                    <td><span class="login_text">Username:</span></td>
                    <td><input type="text" class="inputs" name="signup_username" value="<?php echo $username ?>"></td>
                </tr>
                <tr>
                    <td><span class="login_text">Password:</span></td>
                    <td><input type="password" class="inputs" name="signup_password"></td>
                </tr>
                <tr>
                    <td><span class="login_text">Password <span style="color: #666666;">(repeat)</span>:</span></td>
                    <td><input type="password" class="inputs" name="signup_passwordrepeat"></td>
                </tr>
                <tr>
                    <td><span class="login_text">Email:</span></td>
                    <td><input type="text" class="inputs" name="signup_email" value="<?php echo $email ?>"></td>
                </tr>
                <tr>
                    <td colspan="2"><input type="submit" id="signupbutton" class="subutton" style="font-family: Georgia, sans-serif;  font-size: 1.5em;  width: 265px;  height: 3em;" value="Sign Up!" name="signup_button"></td>
                </tr>
            </table>
        </form>

PHP:

<?php
            $submit = $_POST["signup_button"];
            $username = mysql_real_escape_string($_POST["signup_username"]);
            $password = mysql_real_escape_string($_POST["signup_password"]);
            $repeatpassword = mysql_real_escape_string($_POST["signup_passwordrepeat"]);
            $email = mysql_real_escape_string($_POST["signup_email"]);
            $date = date(m.d.y);

            if($submit) {  //If the form is submitted
                if($username && $password && $repeatpassword && $email) {  //If everything is filled out
                    //Check length of username
                    if(strlen($username) <= 16) {
                        $usercheck = mysql_query("SELECT * FROM artists WHERE username='$username'");
                        $usernum = mysql_num_rows($usercheck);

                        if($usernum == 0) {  //Check for availability of username
                            $emailcheck = mysql_query("SELECT * FROM artists WHERE email='$email'");
                            $emailnum = mysql_num_rows($emailcheck);

                            if($emailnum == 0) {  //Check for availability of email address
                                if($password == $repeatpassword) {  //Check for identical password input
                                    //Encrypt password
                                    $password = sha1($password);
                                    $repeatpassword = sha1($repeatpassword);

                                    //REGISTER
                                    $register = mysql_query("INSERT INTO artists VALUES ('', '', '$username', '$password', '$email', '', '$date')");
                                    echo("Registration successful, please log in on the right!");
                                }
                                else
                                    echo("The passwords don't match!");
                            }
                            else
                                echo("That email address has already been registered!");
                        }
                        else
                            echo("That username has already been registered!");
                    }
                    else
                        echo("The username you entered is too long!");
                }
                else
                    echo("Please fill out all fields!");
            }
        ?>

Answer 1

put the message you want to echo in json eg

<?php echo json_encode(array('message_you_want' => 'your message here'));?>

then set dataType in your ajax call to json eg

dataType : 'json'

and then in your success function for your ajax you can pass the json object through eg

$.ajax({
 dataType: 'json',
 url : 'url',
 data : {/*data here*/},
 success: function(j)
 {
  //access your message like this
  alert(j.message)
 }
});

its also bad practice to nest your if statements like that. you should look into that

hope this helped

Answer 2

The jQuery validation plugin is the standard validation system for jQuery and provides support for AJAX based validation (where it sends things back to the server to validate it and displays a message for you if it fails).