Почему эта форма ajax не работает?

Question

Я пытаюсь отправить форму с помощью jquery, но по какой-то причине моя форма не работает. Ничего не происходит, когда я отправляю форму, кроме #loading.

Консоль не отображает никаких данных. Я пытаюсь избежать использования «serialize» для отправки формы. Будем признательны любому совету. Большое спасибо.

$(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

попробовать этот

1) тип кнопки = 'кнопку', чтобы предотвратить формы по умолчанию представить.

2) </form> закрывающий тег отсутствует.

3) скрыть загрузку после успеха ajax.

4) изменить значение идентификатора детали не детали var details = $("#detail").val();

5) Вы должны повторить или вернуть любой HTML контент из process_details.php страницы для Ajax успеха или возврата.

<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>