Ajax is not sending data to PHP

Question

I'm new at ajax and i am confused becouse i think my ajax file is not sending data to php file or php is not getting it, IDK, Help me please

This is the form

<form id="register-form" method="post" role="form" style="display: none;">
                                            <div class="form-group">
                                                <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
                                            </div>
                                            <div class="form-group">
                                                <input type="text" name="email" id="email" tabindex="1" class="form-control" placeholder="Email Address" value="">
                                            </div>
                                            <div class="form-group">
                                                <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
                                            </div>
                                            <div class="form-group">
                                                <input type="password" name="confirm-password" id="confirm-password" tabindex="2" class="form-control" placeholder="Confirm Password">
                                            </div>
                                            <div class="form-group">
                                                <div class="row">
                                                    <div class="col-sm-6 col-sm-offset-3">
                                                        <input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register Now">
                                                    </div>
                                                </div>
                                            </div>
                                        </form>

This is the .js

$(document).ready(function(){
$("#register-submit").click(function(){
    var email = $("#email").val();
    var username = $("username").val();
    var password = $("password").val();

    $.ajax({
        type: "POST",
        url: "register.php",
        data:  "email="+email+"&username="+username+"&password="+password,

        success:function(data){
           alert("succes");
        }
    });
});

});

This is the .php

<?php
require_once("functions.php");

    $email = $_POST["email"];
    $username $_POST["username"];
    $password $_POST["username"];
    mysqli_query($connection, "INSERT INTO users(email, username, password) VALUES('$email', '$username', '$password')");?>

Answer 1

First of all:

var username = $("username").val();
var password = $("password").val();

Should be:

var username = $("#username").val();
var password = $("#password").val();


data:  "email="+email+"&username="+username+"&password="+password

Should be:

data:  {email: email, "username": username, password: password}

And

$username $_POST["username"];
$password $_POST["username"];

Should be:

$username = $_POST["username"];
$password = $_POST["password"];

Answer 2

1st: instead of using submit input click event you can use form submit event

$("#register-form").on('submit',function(){

and while you use a submit sure you need to prevent the page from default reload .. I think you problem is this point .. so you need to prevent the form by using e.preventDefault(); you can use it like

$("#register-form").on('submit',function(e){
   e.preventDefault();
   // rest of code here

Answer 3

You have to send the data in JSON format like:

var data = { "email": email, "username": username, "password": password };

so pass data var in data Ajax function!

Answer 4

$(document).ready(function(){
 $("#submit").click(function(event) {
    event.preventDefault();

    var inputEmail = $("#email").val();
    var inputUsername = $("#username").val();
    var inputPassword = $("#password").val();

    $.ajax({
            type: "POST",
            url: "register.php",
            data: ({ email: inputEmail, password: inputPassword, username: inputUsername}),
            success: function(data){
                var obj = jQuery.parseJSON(data);

                alert("Success " + obj.username + " " + obj.password + " "+ obj.email);
            }
    });


});

});

Here in .js file I put at the top in .click(function(event) { event.preventDefault(); }

preventDefault(); 

this function prevent the page from realoding when you press the submit button

data: ({ email: inputEmail, password: inputPassword, username: inputUsername})

Here i send the data data: ({nameOfTheVarieableYouWantToReadWithPHP: nameOfTheVariableFromJs})

Here is the .php file

require_once("database.php"); //require the connection to dabase

$email = protect($_POST['email']);        //This will read the variables
$username = protect($_POST['username']);  //sent from the .js file
$password = protect($_POST['password']);  //

$result = array();  //This variable will be sent back to .js file
//check if the variables are emtpy
if(!empty($email) && !empty($username) && !empty($password)){
   //db_query is my function from database.php but you can use mysqli_query($connectionVariable, $sqlString);
   db_query("INSERT INTO users (email, username, password) VALUES ('$email','$username','$password')"); //Here insert data to database 
//we will set array variables
$result['username'] = $username;    //Here we set the username variable fron the array to username variable from js
$result['password'] = $password; // the password same as the username
$result['email'] = $email; //the email same as the username and password
}else{ // if the variables are empty set the array to this string
     $result = "bad";
}
echo json_encode($result);  //transform the result variable to json

In the .js file

       success: function(data){
            var obj = jQuery.parseJSON(data); //create a variable and parse the json from the php file
            //You can set the variables get from the json 
            var usernameFromPhp = obj.username;
            var passwordFromPhp = obj.password;
            var emailFromPhp = obj.email;

            alert("Success " + usernameFromPhp + " " + passwordFromPhp + " "+ emailFromPhp);//
        }