Javascript not working in PHP on XAMPP

Question

I keep trying to get it to work, when I click register with under 3 characters on either or both of the fields it won't pop up with a box saying what it's supposed to say, and when I click register with above 3 on both it won't give a confirmation or an error let alone insert the information into the database.

<?php

    $sqlHost = 'localhost';
    $sqlUser = 'root';
    $sqlPass = 'hidthepassword';
    $sqlDatabase = 'RPG';

    $connection = new PDO('mysql:host='.$sqlHost.';dbname='.$sqlDatabase.';charset=utf8', $sqlUser, $sqlPass);
    $connection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);


    $username = null;
    $password = null;

    if(isset($_GET['user'])) {
        $username = $_GET['user'];
    }

    if(isset($_GET['pass'])) {
        $pass = $_GET['pass'];
    }

    if((isset($username)) && (isset($password))) {
        // TODO SQL
        $salt = genSalt(40);
        $passHash = md5(md5($salt) . md5($password));
        $statement = $connection->prepare("INSERT INTO `rpg`.`accounts` (`id`, `username`, `password`, `salt`) VALUES (:user, :pass, :salt);");
        $statement->bindParam(":user", $username);
        $statement->bindParam(":pass", $passHash);
        $statement->bindParam(":salt", $salt);
        if($statement->execute()) {
            echo "Thank-you for your registration, " . $username;
        } else {
            echo "Sorry, your registration failed.";
        }

    } else {
        // DISPLAY

            echo '<input type="text" id="user" placeholder="username"/>
        <input type="text" id="pass" placeholder="password"/>
        <button id="button">Register</button>

        <script>
            var r = document.getElementById("button");
            button.addEventListener("click", function() {
                var user = document.getElementById("user");
                var pass = document.getElementById("pass");
                if(user.value.length < 3 || pass.value.length < 3) {
                    alert("Please enter a valid username or password");
                } else {
                    window.location = "index.php?user="user.value+"&pass="+pass.value;
                }
            ));     
        </script>
        ';
    }

    function genSalt($length) {
        $variables = "aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ0123456789";
        $charLength = strlen($variables);
        $returned = "";
        for($i = 0; $i < $length; $i++) {
            $returned .= $variables[rand(0, ($charLength - 1))];
        }
        return $returned;
    }
?>

pajaja · Accepted Answer · 2015-01-01 00:34:15Z

3

You defined your button to be r

var r = document.getElementById("button");

and then you bind the event listener to the var named button:

button.addEventListener("click", function()

which should be r in your case.

Also you should use POST instead of GET for this (or anything that makes changes to your application/database/etc)

answered Jan 1, 2015 at 0:34

pajaja

2,2124 gold badges27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tyler James Turton Over a year ago

Changed var to button and changed the GET to POST, and still not cigar.

pajaja Over a year ago

You need to change the window.location part as well, not just the PHP code. window.location redirects the browser to the new URL but the browser will still send a GET request. If you're using jQuery check: api.jquery.com/jquery.post

Tyler James Turton Over a year ago

Even if I change it nothing happens.. Like, the box still doesn't pop up, which it should when both fields are under 3 characters.

76484 · Accepted Answer · 2015-01-01 01:28:11Z

There are a few errors here:

First, in the PHP, you switch from $password to $pass. So fix that:

if (isset($_GET['pass'])) {
    $password = $_GET['pass']; // was $pass = $_GET['pass'];
}

In the JavaScript, I see 3 errors with your addEventListener code:

As mentioned by others, you switch from r to button where you are intending the same reference.
You are missing a plus sign (+) where you are trying to concatenate user.value to the location string.
You close your event listener with "));" instead of "});", which is a syntax error.

Final result:

// was var r = ...
var button = document.getElementById("button");
button.addEventListener("click", function () {
    var user = document.getElementById("user");
    var pass = document.getElementById("pass");
    if (user.value.length < 3 || pass.value.length < 3) {
        alert("Please enter a valid username or password");
    } else {
        // was "index.php?"user.value ...
        window.location = "index.php?user="+user.value+"&pass="+pass.value;
    }
}); // was ));

Fixed most of it, thank-you so much! Now it's just not inserting the information to the database.
@TylerJamesTurton: Presumably "id" is a auto-incremented, primary key, so you shouldn't include it in your insert columns: "INSERT INTO `rpg`.`accounts` (`username`, `password`, `salt`) ...
@TylerJamesTurton: You'll need to turn on PHP error reporting and find out what the specific issue is (php.net/manual/en/function.error-reporting.php).
Fixed it, it's fully functional. It was the one person who told me to switch $_GET to $_POST. I reversed that and it worked A+

Collectives™ on Stack Overflow

Javascript not working in PHP on XAMPP

2 Answers 2

3 Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Related