Fat-Free Framework & Abide AJAX form submission not working

Question

I'm using Foundation 5.5.3 and Abide form validation for my site registration. So my Javascript looks like this:

$('form#register').on('valid.fndtn.abide', function() {
  var data = {
        'email'     : $('#email').val(),
        'username'  : $('#username').val(),
        'password'  : $('#password').val()
      };

  $.ajax({
    method: 'POST',
    url: 'user',
    data: $('#email, #username, #password').serialize(),
    beforeSend: function() {
      console.log(data);
    }
  });
});

I'm skipping adding the HTML here because I can see from the console.log that the data showing there in the data object. I've tried disabling async and adding headers: {'Content-Type': 'application/x-www-form-urlencoded'} and neither worked.

Then in F3, I have the following:

$f3->map('/user', 'User');

class User {
  private $email;
  private $username;
  private $password;

  function get() { }

  function post($f3) {
    global $handler; // This is a PHPConsole handler instance for debugging

    $email = $f3->get('PARAMS.email');
    $username = $f3->get('PARAMS.username');
    $password = $f3->get('PARAMS.password');

    $handler->debug($email, 'email:');
    $handler->debug($username, 'username:');
    $handler->debug($password, 'password:');
  }

  function put() {

  }

  function delete() {

  }
}

The debug outputs of $email, $username, and password are always null from PHPConsole. What am I missing?

Answer 1

You are doing it wrong

$email = $f3->get('PARAMS.email');
$username = $f3->get('PARAMS.username');
$password = $f3->get('PARAMS.password');

Should be

$email = $f3->get('POST.email');
$username = $f3->get('POST.username');
$password = $f3->get('POST.password');

F3 stores Get data in $f3->get('GET');, post data in $f3->get('POST.email'); etc