AJAX submit form data fails. It works using $_GET when i turn off e.preventdefault

Question

This is my first post here. Sorry if my English appears to be bad.

I attempted to use the following codes to submit form data to my signup/submit/index.php.

Here is my sample HTML

    <form name="signup_form" id="signup_form" action="submit">
     <input type="text" class="form-control" placeholder="CreateUsername" name="username" id="username" autocomplete="off">
<input type="password" class="form-control"  placeholder="CreatePassword" name="password" id="password"></form>

Here is my Ajax

 .on('success.form.fv', function(e) {

        e.preventDefault();


        loadshow();

         var $form = $(e.target),
            fv    = $form.data('formValidation');

        // Use Ajax 
        $.ajax({
            url: $form.attr('action'),
            type: 'POST',
            data: $('#signup_form').serialize(), //or $form.serialize()
            success: function(result) {
                // ... Process the result ...
                //alert(result);
                if (result=="2")
                {
                swal({
                  type: "success",  
                  title: "HiHi!",
                  text: "GoodLuck",
                  animation: "slide-from-top",
                  showConfirmButton: true
                  }, function(){   

                    var username = $("#username").val();
                    var password = $("#password").val();
                    functionA(username,password).done(functionB);

                });



                }
                else (result=="agent_na")
                {
                swal({
                  type: "error",    
                  title: "ERROR",
                  text: "N/A",
                  animation: "slide-from-top",
                  showConfirmButton: true
                });

Here goes my PhP

<?php
  $params = array();
$gett = $_POST["username"];
parse_str($gett,$params);

print_r ($gett); // it prints an empty array
print_r ($gett); // it prints an empty array
echo $params["username"]  // it shows undefined username index
?>

I have attempted to serialize $gett before parse_str it. It returns me (){}[].

Could please assist me on this?? I spent almost 20 hours on this, google and tried a lot. Am new to JS.

Answer 1

I try to keep it simple

HTML

<!-- Include Jquery Plugin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="signup_form">
   <input type="text" name="username"  placeholder="Enter the user name" />
   <input type="password" name="password"    placeholder="Enter password here" />
   <input type="submit" value="Login" />
</form>
<script>
    /* Page loaded */
    $(function(){
        /* Trigger when the form submitted */
        $("#signup_form").submit(function(e) {          
            var form = $(this);         
            $.ajax({
                type: "POST",
                url: "backend.php",
                data: form.serialize(), // Checkout the document - https://api.jquery.com/serialize/
                success: function(data) {
                    // handle the return data from server
                    console.log(data);
                }
            });
            e.preventDefault();
            return false;
        })
    })
</script>

PHP (backend.php)

<?php
    // Always check param exists before accessing it
    if(isset($_POST['username']) && isset($_POST['password'])){
        // Print all the post params
        print_r($_POST);
        // or by param
        // echo "User Name: " . $_POST['username']. " <br />";
        // echo "Password: " . $_POST['username']. " <br />";
    }
?>

Hope this helps!