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>

Hook to the submit event of the form, not the click of the submit button — Rory McCrossan
– Rory McCrossan, Commented Oct 7, 2016 at 8:56
function(data) { $("#message").html(data); $("#message").fadeIn(500); $("#loading").hide(); }); you are not hiding the loading — Atal Kishore
– Atal Kishore, Commented Oct 7, 2016 at 8:59
e.preventDefault(); will stop the current event to propagate !!! Can you pls comment it — Mayank Pathak
– Mayank Pathak, Commented Oct 7, 2016 at 9:01

JYoThI · Accepted Answer · 2016-10-07 09:37:21Z

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>

Thanks for this. For some reason the submit is not working and #loading is always visible, not even hiding?
Loading does hide and reappear when I click form submit but I cannot see anything getting posted a firebug console.

Collectives™ on Stack Overflow

Why is this ajax form not working?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related