php $POST[] empty after Ajax call from jquery

Question

Form :

<form method="post" id="loginForm">
    <div class="form-group">
        <label for="email-signin">Email address:</label>
        <input type="email" class="form-control" id="email-signin" name="email-signin">
    </div>
    <div class="form-group">
        <label for="pwd-signin">Password:</label>
        <input type="password" class="form-control" id="pwd-signin" name="pwd-signin">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default" id="signIn" name="signIn">Sign In</button>
    <div id="error">
        <!-- error will be shown here ! -->
    </div>
</form>

jquery :

$("#signIn").on("click", function(e) {

   e.preventDefault();

    var values = $("#loginForm").serialize();

    console.log( values );

    $.ajax({
        type: "POST",
        url: "../php/BusinessLayer/User.php",
        data: values,
        beforeSend: function() { $("#error").fadeOut() },
        success :  function(response)
        {
            console.log("Success");
            if(response=="ok"){

            }
            else{
                $("#error").fadeIn(1000, function(){
                    $("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> &nbsp; '+response+' !</div>');
                });
            }
        }
});

php:

<?php

 session_start();

include ("../DataLayer/VO/UserVO.php");
include ("../DataLayer/DAO/UserDAO.php");

// Database Execution for User Related Request
$userDAO = new UserDAO();

print_r($_POST);

if(isset($_POST['signIn']))
{
  echo 'test2';

  $user = new UserVO();

  $user->setEmail(trim($_POST['email-signin']));
  $user->setPassword(trim($_POST['pwd-signin']));

  // Request signin
  $userDAO->signIn($user);
}

Using this code, my if(isset($_REQUEST['signIn'])) in my php file never returns true. I have tried multiple things, and nothing seems to work.

PS : I am using Jquery 1.12.4

Also, my print_r($_POST); returns an empty Array.

Answer 1

jQuery's serialize function does not encode the values of buttons. Taken from here

NOTE: This answer was originally posted by slashingweapon

jQuery's serialize() is pretty explicit about NOT encoding buttons or submit inputs, because they aren't considered to be "successful controls". This is because the serialize() method has no way of knowing what button (if any!) was clicked.

I managed to get around the problem by catching the button click, serializing the form, and then tacking on the encoded name and value of the clicked button to the result.

$("button.positive").click(function (evt) {
    evt.preventDefault();

    var button = $(evt.target);                 
    var result = button.parents('form').serialize() 
        + '&' 
        + encodeURIComponent(button.attr('name'))
        + '='
        + encodeURIComponent(button.attr('value'))
    ;

    console.log(result);
});

As far as the var dump being empty on the PHP side, try using jQuery's .click instead of the .on event.

$('#signIn').click(function(){});

Also, remove the method from your form. It looks like the form may be submitting as soon as you click the button. Also, remove

e.preventDefault();

and place

return false;

at the VERY END of the on click function. return false does 3 things

1. e.preventDefault()
2. e.stopPropigation();
3. return immdediatly