Jump to content

Username availability help - JS not making call's?

travisco87

By travisco87
in Javascript Help

Recommended Posts

travisco87 Member

travisco87

Posted
Posted

Hello All,

 

I am doing a tutorial on username availability using AJAX for immediate username validation. I have made it from the tutorial but decided to use PDO instead of the old "mysql" statements just FYI, I do not think it play's into the issue but might. 

 

I keep getting this error from my Chrome console 

Uncaught TypeError: Object [object global] has no method 'addEvent'

I researched the error and made sure MooTools is up and running on my index page but this did not solve my issue. Any help would be much appreciated, here is my code

 

 

 

index.php

<html>
    <head>
        <title>Username Availability</title>
        <link rel="stylesheet" type="text/css" href="style/style.css">
        <script type="text/javascript" src="js/main.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
    </head>

<body>
<div id="container">
    <div id="content">
        <fieldset>
            <form method="post" action="js/json.php" id="signup">
                
                <ul class="form">
                    <li>
                        <label for="user_name">Username</label>
                        <input type="text" name="user_name" id="user_name" />
                    </li>
                    <li><input type="submit" value="Sign Up Now!" /></li>
                </ul>
            </form>
        </fieldset>
    </div>
</div>
    
</body>

</html>

main.js

window.addEvent('domready', function() {
    alert('The DOM is ready!');
    $('user_name').addEvent('keyup', function(){
        new Request.JSON({
            url: "json.php",
            onSuccess: function(response){
                if (response.action == 'success') {
                    $('user_name').removeClass('error');
                    $('user_name').addClass('success');
                    
                } else {
                    $('user_name').removeClass('success');
                    $('user_name').addClass('error');
                }
            }
        }).get($('signup'));
    });
});

json.php

<?php

    $config['db'] = array(
        'host'          => 'localhost',
        'username'      => 'username',
        'password'      => 'password',
        'dbname'        => 'database'
    );

    try {
        $DBH = new PDO('mysql:host=' . $config['db']['host']. ';dbname=' .$config['db']['dbname'], $config['db']['username'], $config['db']['password']);
        $DBH->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $DBH->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
        $DBH->exec('SET CHARACTER SET utf8');
    } catch (PDOException $e) {
        echo 'Connection failed: ' . $e->getMessage();
    }
    
    $result = null;
    
    $user_name = mysql_real_escape_string($_POST['user_name']);
    
    $stmt = $DBH->prepare("SELECT user_name FROM ajax_users WHERE user_name = :user_name");
    $stmt->bindParam(':user_name', $user_name);
    $stmt->execute();
    
    $result = $stmt->fetch(PDO::FETCH_ASSOC);
    
    if ($result == 0){
        
        $result['action'] = 'success';
        
    } else {
        
        $result['action'] = 'error';
    }
    
    $result['user_name'] = $_POST['user_name'];
    
    echo json_encode($result);
    
?>

style.css

input.success{
    border: 3px solid #9ad81f;
}

input.error{
    border: 3px solid #b92929;
}

The database is called "stuff" and it has a table called "ajax_users". 

 

If something turned off? I am not sure where to go with this one. Thanks for the help in advance 

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.