AJAX request always return false

Question

Actually, I'm doing a simple php form with some AJAX. I've tried to solve the error by myself, but can't figure out what I'm missing.

The result is always false, no record are done in the database too

The form :

<form id="signUpForm" action="" method="POST"></div>
  <div><input type="text" name="lastname" placeholder="lastname"></div>
  <div><input type="text" name="firstname" placeholder="firstname"></div>
  <div><input type="text" name="pseudoUp" placeholder="pseudo"></div>
  <div><input type="password" name="passwordUp" placeholder="password"></div>
  <div><input type="submit" name="signUpForm" value="signup"></div>
  <div class="signUpMsg"></div>
</form>

The php scripts :

config.php :

<?php

session_start();

  define('MYSQL_HOST', 'localhost');
  define('MYSQL_USER', ' ');
  define('MYSQL_PASSWD', ' ');
  define('MYSQL_DB', 'php');

  try {
    $PDO = new PDO('mysql:host=' . MYSQL_HOST . ';dbname=' . MYSQL_DB, MYSQL_USER, MYSQL_PASSWD);
    $PDO->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING);
    $PDO->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_OBJ);
  } catch (PDOException $e) {
    $e->getMessage();
  }

?>

signUp.php:

<?php

  require_once 'config.php';

  if($_POST["lastname"] != "" && $_POST["firstname"] != "" && $_POST["pseudo"] != ""  && $_POST["password"] != ""){
    $req = $PDO->prepare("INSERT INTO users (lastname, firstname, pseudo, password) VALUES(:lastname, :firstname, :pseudo, :password)");
    $req->bindValue(':lastname', $_POST["lastname"]);
    $req->bindValue(':firstname', $_POST["firstname"]);
    $req->bindValue(':pseudo', $_POST["pseudo"]);
    $req->bindValue(':password', sha1($_POST["password"]));
    if ($req->execute()){
      echo 1;
    }else{
      echo 2;
    }
  }

?>

and finally, the AJAX:

$(function(){
  $('#signUpForm').on('submit', function(e){
    e.preventDefault();

    // Undo mistake, thank to @apokryfos
    data = {
        lastname : $("input[name='lastname']").val(),
        firstname : $("input[name='firstname']").val(),
        pseudo : $("input[name='pseudo']").val(),
        password : $("input[name='password']").val(),
    }

    $.ajax({
      method : "POST",
      url : "php/signUp.php",
      data : data,
      success : function(res){
        if(res == 1){
          $('.signUpMsg').html('Sign up done !');
        }else{
          $('.signUpMsg').html('Sign up fail');
        }
      }
    })
  })
})

Thanx for reading !

EDIT :

The error came from a wrong way to get the data (No id in the input, while checking for input id's in AJAX) and an input name conflict in the same page. Also I changed the 'echo true/false' in signIn.php to 'echo 1/2' as mentionned by Apokryfos.

Thank for your help !!

Answer 1

You're building your post data in the wrong way, #something means the DOM element with id something . You need to use the input name attribute:

data = {
  lastname : $("input[name='lastname']").val(),
  firstname : $("input[name='firstname']").val(),
  pseudo : $("input[name='pseudo']").val(),
  password : $("input[name='password']").val(),
}

I will also suggest something additional. Use HTTP codes instead of returning a number (That's what the codes are there for and they are universally understood):

if($_POST["lastname"] != "" && $_POST["firstname"] != "" && $_POST["pseudo"] != ""  && $_POST["password"] != ""){
    $req = $PDO->prepare("INSERT INTO users (lastname, firstname, pseudo, password) VALUES(:lastname, :firstname, :pseudo, :password)");
    $req->bindValue(':lastname', $_POST["lastname"]);
    $req->bindValue(':firstname', $_POST["firstname"]);
    $req->bindValue(':pseudo', $_POST["pseudo"]);
    $req->bindValue(':password', sha1($_POST["password"]));
    if ($req->execute()){
      echo 1;
    }else{
      http_response_code(500); //server error
      echo 2;
    }
  }
  http_response_code(400); //Client error (didn't send the correct fields)

And the JavaScript

$.ajax({
  method : "POST",
  url : "php/signUp.php",
  data : data,
  success : function(res){
      $('.signUpMsg').html('Sign up done !'); //Only runs this when successful
  },
  error: function (xhr, textStatus) {
      if (xhr.status == 500) { 
         $('.signUpMsg').html('Sign up fail');
      } else if (xhr.status == 400) {
         $('.signUpMsg').html('Please fill the form properly');
      }
  }
})

Answer 2

in ajax part you are using input id like this

data = {
      lastname : $('#lastname').val(),
      firstname : $('#firstname').val(),
      pseudo : $('#pseudo').val(),
      password : $('#password').val(),
    }

but in input there is no id for inputs

<div><input type="text" name="lastname" placeholder="lastname"></div>
  <div><input type="text" name="firstname" placeholder="firstname"></div>
  <div><input type="text" name="pseudo" placeholder="pseudo"></div>
  <div><input type="password" name="password" placeholder="password"></div>