jquery $.post is not sending data

Question

My HTML form:

<form action="" id="showdetails" method="post">
<input name="user" id="personaluser" type="text" class="form-control" />
<input name="pass" type="password" id="personalpass" class="form-control" />
<input type="submit" value="submit" class="btn btn-primary" />
</form>

here is my javascript:

$( "#showdetails" ).submit(function( event ) {

    // $.post( "process.php", $('#showdetails').serialize(),  function(response) {


    var data = $('#showdetails').serialize();

    $.post( "process.php", data,  function(response) {
        $('#result').html(response);
    });
    return false;
    // event.preventDefault();

});

i tried with return false and event.preventDefault();

PHP file

<?php

echo "it's suck";
print_r($_GET);
print_r($_POST);

?>

My output data if i submit:

it's suckArray ( ) Array ( ) 

form submission not delivering any data!

Any help?

Answer 1

I have seen some finicky stuff in some browsers when serializing the form. The following code has been more consistent for me. (using THIS for the form inside the event handler)

$( "#showdetails" ).on( "submit", function( event ) {
    event.preventDefault();

    var data = $( this ).serialize();

    $.post( "process.php", data,  function(response) {
        $('#result').html(response);
    });
    return false;


});