Trouble with passing form data in AJAX request

Question

I'm having issues passing form values to PHP via an AJAX request. As per my code below, variables can be passed back so I suspect the issue may be with data: $('#signup-form').serialize() .

JS:

$.ajax
({
    type: "POST",
    url: "http://www.domain.com/includes/register.php",
    data: $('#signup-form').serialize(),
    success: function(data)
        {
            $('#signup-response').hide();
            $('#signup-response').fadeIn();
            $('#signup-response').html(data);
        },
    error: function()
    {
        alert("fail");
    }
})

Form:

<form id="signup-form" action="" method="POST">
    <input name="email" type="email" class="form-control" id="signupEmail" placeholder="Email address">
    <input name="password1" type="password" class="form-control" id="signupPassword" placeholder="Password">
    <input name="password2" type="password" class="form-control" id="signupPassword2" placeholder="Password">
    <select name="country" id="signupCountry" class="selectpicker">
        <option value="0">Country</option>
        <option>United States</option>
        <option>United Kingdom</option>
        <option>Canada</option>
    </select>
    <select name="gender" id="signupGender" class="selectpicker">
        <option value="0">Gender</option>
        <option>Female</option>
        <option>Male</option>
    </select>
    <button id="signup" class="btn btn-success btn-block signup" type="submit">Sign up</button>
</form>

register.php

<?php
$username = $_POST['signupEmail'];
echo "hello"; // works
echo $username; // doesn't work
?>

Answer 1

Try this, You need to use input name <input name="email" type="email" class="form-control" id="signupEmail" placeholder="Email address"> rather use of input field id.

 $username = $_POST['email'];

instead of

  $username = $_POST['signupEmail'];