Why is this ajax form not working?

Question

I am trying to submit a form using jquery but for some reason my form is not working. Nothing happens when I submit the form except #loading appears.

The console shows no data being sent. I am trying to avoid using 'serialize' to send the form. Any advice would be great. Many thanks.

$(document).ready(function() {
    $("#loading").hide();

    $("#submit_details").on("click", function(e) { 
        $("#loading").show();
        e.preventDefault();

        var user_name = $("#user_name").val(); 
        var details = $("#details").val();
        var user_id = $("#user_id").val();
        var title = $("#title").val();

        $.post('process_details.php', {
            title: title,
            user_name: user_name,
            details: details,
            user_id: user_id
        }, function(data) {
            $("#loading").hide(); 
            $("#message").html(data);
            $("#message").fadeIn(500);
        });
        return false;
    });
});

<form action="process_details.php" method="post" enctype="multipart/form-data" id="details_form">
    <input id="title" name="title" type="text" placeholder="Title" class="form-control" value="" required="">
    <input id="detail" name="detail" type="text" class="form-control" placeholder="More info" value="">
    <input type="hidden" id="user_id" name="user_id" value="<?php echo $_SESSION['user_session'];?>">
    <input type="hidden" id="user_name" name="user_name" value="<?php echo $_SESSION['user_name'];?>">

    <button type="submit" class="btn btn-primary pull-right" name="btn_submit_details" id="submit_details">
        Submit
    </button>
    <span class="pull-right">
        <i class="fa fa-spinner fa-spin fa-3x fa-fw" id="loading"></i>
    </span>

Answer 1

try this

1) button type='button' to prevent default form submit.

2) </form> closing tag missing.

3) hide loading after ajax success.

4) change the id value is detail not details var details = $("#detail").val();

5) you have to echo or return any html content from process_details.php page for ajax success or return .

<form action="process_details.php" method="post" enctype="multipart/form-data" id="details_form">
<input id="title" name="title" type="text" placeholder="Title" class="form-control" value="" required="">
<input id="detail" name="detail" type="text" class="form-control" placeholder="More info" value="">
<input type="hidden" id="user_id" name="user_id" value="<?php echo $_SESSION['user_session'];?>">
<input type="hidden" id="user_name" name="user_name" value="<?php echo $_SESSION['user_name'];?>">

<button type="button" class="btn btn-primary pull-right" name="btn_submit_details" id="submit_details">
    Submit
</button>
<span class="pull-right">
    <i class="fa fa-spinner fa-spin fa-3x fa-fw" id="loading"></i>
</span>

<script>

$(document).ready(function() {

$("#loading").hide();

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

    e.preventDefault(); 

    $("#loading").show();

    var user_name = $("#user_name").val(); 
    var details = $("#detail").val();
    var user_id = $("#user_id").val();
    var title = $("#title").val();

    $.post('process_details.php', {
        title: title,
        username: username,
        details: details
        user_id: user_id
    }, function(data) {

        alert(data);
        $("#message").html(data);
        $("#message").fadeIn(500);
        $("#loading").hide();  //hide the loading after ajax success
    });
    return false;
});
 });

  </script>