Passing variable from PHP to Javascript, using Ajax returns 'undefined'

Question

I have got a PHP file that received data that has been posted from a form. It then sends it to a database. However I needed to get those variables and put them in JavaScript. I have done the following, but when logging the variables supposed to store the php data (in the script file) it return undefined.

What am I doing wrong? I am new to all the languages. The files are all separate - with the PHP and Script files being external.

SCRIPT:

$(function(){
var data1 = $("#username").val();
console.log(data1);
$.ajax({
  type: "POST",
  url: 'signUp.php',
  data: ({data1}),
  success: function(data) {
    console.log("success");
  }
});

});

PHP

if (isset($_POST['signup'])){
    //The connection to the database
    include_once 'databaseHandler.php';

    //Gets the infomation submitted from the form
    //Protects the database by converting everything to text...
    //The database therefore cannot read the inputs as code
    $username = mysqli_real_escape_string($conn, $_POST['username']);
    $password = mysqli_real_escape_string($conn, $_POST['password']);

    echo (".$user.");

HTML

<form action="signUp.php" method="POST">
        <input id="usernameSignUp" type="text" name="username" placeholder="Username">
        <br>
        <input id="passwordSignUp" type="password" name="password" placeholder="Password">
        <br>
        <button class="BUTTON" type="submit" name="signup">SIGN UP</button>
    </form>

Answer 1

You never set the post parameter 'signup'. Which in turn does not let you enter your if construct and therefor php gives you nothing.

Try:

data:{
    "username":$('usernameSignUp').val(),
    "password":$('passwordSignUp').val(),
    "signup":1,
}

Answer 2

I think, you don't send the variable correctly.

var data1 = $("#usernameSignUp").val();
var data2 = $("#passwordSignUp").val();
$.ajax({
  type: "POST",
  url: 'signUp.php',
  data: {signup:'1',username:data1,password:data2 },//Supose data1= username data, data2 = password data
  success: function(data) {
    console.log("success");
  }
});

Answer 3

There is so much wrong here, it is hard to know where to begin.

• You make the Ajax request when the page loads. This is before the user has typed anything into the form.
• When the form is submitted, you don't use Ajax at all
• You pass a field called data1 to the server (which it is not looking for)
• You give that field the value of the input with id="username" (which doesn't exist)
• You don't pass fields called username or password to the PHP (which it is looking for)
• You don't pass a field called signup to the PHP (which it tests for with isset before doing anything)
• Your PHP echos a variable called $user which you haven't defined
• Your JavaScript doesn't look at the response, it just logs the string "success"

You'd need something more like:

$(function() {
  $("form").on("submit", function(event) {
    event.preventDefault();
    $.ajax({
      type: "POST",
      url: 'http://example.com/signUp.php',
      data: ({
        signup: 1,
        username: $("#usernameSignUp").val(),
        password: $("#passwordSignUp").val()
      }),
      success: function(data) {
        console.log("Success", data);
      },
      error: function(data) {
        console.log("This is a cross origin request to a dummy URL, what did you expect");
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="signUp.php" method="POST">
  <input id="usernameSignUp" type="text" name="username" placeholder="Username">
  <br>
  <input id="passwordSignUp" type="password" name="password" placeholder="Password">
  <br>
  <button class="BUTTON" type="submit" name="signup">SIGN UP</button>
</form>

Then there are the things which are bad practises but which don't directly affect the ability of the code to work.

• You use mysqli_real_escape_string instead of placeholders.
• You don't hash your passwords. "Not hashing at all" is an unsuitable hashing algorithm; you need to take better care of your users' passwords.
• The HTML5 placeholder attribute is not a substitute for the label element