0

For the life of my I cant get an Ajax request to work and submit my HTML form without refreshing, I've just never been able to pick up Ajax. I want my form to run the register.php without refreshing or redirecting to another page. Ideally I'd like to add a "You Registered" message in a div or something but for now I just want my form to submit without a refresh.

Here is my HTML:

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Social Media</title>
    <script src="jquery-3.1.1.min.js"></script>
    <script src="register.js"></script>
    </head>
    <body>

    <span id='messasge'></span>    

    <form id='register_form' method='post' action='register.php'>
        First: <input type='text' name='first_name' maxlength='30' required='required'><br>
        Last: <input type='text' name='last_name' maxlength='30' required='required'><br>
        Email: <input type='text' name='email' maxlength='60' required='required'><br>
        Password: <input type='password' name='password' maxlength='60' required='required'><br>
        <input type='submit' id='register_user' name='register' value='Register'>
    </form>

        <br>

    <form id='login_form' action='login.php'>
        Email: <input type='text' name='email' maxlength='60' required='required'><br>
        Password: <input type='password' name='password' maxlength='60' required='required'><br>
        <input type='submit' name='login' value='Log In'>
    </form>

    </body>     

    </html>

Here register.php that sends the form: 

require_once 'connect.php';

// Salt for Hasing Password
$salt = '$kl._';
$pepper = 'l*&s';

// Sanative Input Completely
function sanitizeString($conn, $var) {
$var = stripslashes($var);
$var = strip_tags($var);
$var = htmlentities($var);
$var = $conn->real_escape_string($var);
return $var;
}

// Format Name w/ Only Capital First Letter
function formatName($var) {
$var = strtolower($var);
$var = ucwords($var);
return $var;
}

if(isset($_POST['register'])) {

$first_name = sanitizeString($conn, formatName($_POST['first_name']));
$last_name = sanitizeString($conn, formatName($_POST['last_name']));
$email = sanitizeString($conn, $_POST['email']);
$password = hash('ripemd128', $salt . $_POST['password'] . $pepper);

$stmt = $conn->prepare('INSERT INTO users (first_name, last_name, email, password)VALUES(?, ?, ?, ?)');
$stmt->bind_param('ssss', $first_name, $last_name, $email, $password);
$stmt->execute();

$stmt->close();
$conn->close();

}?>

JavaScript

$('#register_user').click(function() { 
    $.post( $("#register_form").attr("action"), 
    $("#register_form :input").serializeArray(), function(info) {
        $("#message").html(info); 
    }); 
}); 
$("#register_user").submit(function() { return false; });
Jay Blanchard
  • 34,243
  • 16
  • 77
  • 119
LClarke27
  • 23
  • 3
  • Where is your JavaScript/jQuery? Do you have a `preventDefault()` or `return false`? – Jay Blanchard Jan 06 '17 at 22:07
  • Please use PHP's [built-in functions](http://jayblanchard.net/proper_password_hashing_with_PHP.html) to handle password security. If you're using a PHP version less than 5.5 you can use the `password_hash()` [compatibility pack](https://github.com/ircmaxell/password_compat). Make surey ou ***[don't escape passwords](http://stackoverflow.com/q/36628418/1011527)*** or use any other cleansing mechanism on them before hashing. Doing so *changes* the password and causes unnecessary additional coding. – Jay Blanchard Jan 06 '17 at 22:07
  • Do not dump code in comments. edit your original question to include any new information. – Jay Blanchard Jan 06 '17 at 22:09
  • @jay I'm not escaping my password am I? Also here is my JS I have, not sure how to format : $('#register_user').click(function() { $.post( $("#register_form").attr("action"), $("#register_form :input").serializeArray(), function(info) { $("#message").html(info); }); }); $("#register_user").submit(function() { return false; }); – LClarke27 Jan 06 '17 at 22:10
  • Allow users to use the [passwords / phrases](https://xkcd.com/936/) they desire. [Don't limit passwords.](http://jayblanchard.net/security_fail_passwords.html) – Jay Blanchard Jan 06 '17 at 22:11
  • No, you're not escaping, that is just part of my comment on using PHP's built-in password handlers. – Jay Blanchard Jan 06 '17 at 22:11
  • >>>>>>>> `id='messasge`' >>>>>>>>>>> `$("#message").html(info);` typo. `messasge` != `message`. – Funk Forty Niner Jan 06 '17 at 22:29
  • There is no value to using a salt and a pepper if both are static - it's functionally equivalent to using just a single static value that is twice as long. A static salt shouldn't be used in any case, since the point is to make it impossible to generate a rainbow table of possible passwords - the salt should be randomly generated for each new password. I'd suggest using bcrypt, which actually handles salts correctly for you. – AmericanUmlaut Jan 06 '17 at 22:32
  • 1
    why are you using this function `sanitizeString()` when you're using a prepared statement? – Funk Forty Niner Jan 06 '17 at 22:38
  • @americanumlaut just curious, how does randomly generated salt work? When the user goes to log in wouldnt the random salt mess up their password? I assume not, but how does it generate the 'same' random salt for the same password? – LClarke27 Jan 06 '17 at 22:48
  • @fred-ii- I was thinking you didnt need to use both, I will remove the sanitation. – LClarke27 Jan 06 '17 at 22:49
  • @LClarke27 You actually store the salt together with the hashed password. The salt isn't a secret any more than the hash is - the trick is that if every password is generated by first prepending a long random string then an attacker can't generate a "rainbow table" where they just stick every possible password into your password generating algorithm and see what the resulting hash is - they have to brute force every single password separately, which is many orders of magnitude more work. – AmericanUmlaut Jan 06 '17 at 22:50

1 Answers1

0

You need to capture the submit event and return false. Replace your jQuery with this:

   $(function() {
        $('#register_form').submit(function(event) {
            event.preventDefault(); 
            $.post( $("#register_form").attr("action"), 
            $("#register_form :input").serializeArray(), function(info) {
                $("#message").html(info); 
            }); 
        });
    });

Read more on preventing default event actions and jQuery AJAX Basics. While trouble shooting make sure to watch the AJAX request / response in the browser's developer tools.

I have edited the code to add a document ready handler around the jQuery code since you load the jQuery at the beginning of your document. This essentially makes the jQuery wait to run until the entire document is loaded.

Jay Blanchard
  • 34,243
  • 16
  • 77
  • 119