Cannot access data from jquery ajax request, returns empty array

Question

Hi,

I have a form that is called via the fancybox plugin http://fancybox.net/blog - login example

Here is the code I have:

Form:

<form method="post" action="" id="events_form">
   <p class="clearfix"><label for="Name">Name:</label> <input type="text" name="Name" id="Name" /></p>
   <p class="clearfix"><label for="Company">Company:</label> <input type="text" name="Company" id="Company" /></p>
   <p class="clearfix"><label for="Email">Email:</label> <input type="text" name="Email" id="Email" /></p>
   <p class="clearfix"><label for="Tel">Tel:</label> <input type="text" name="Tel" id="Tel"/></p>
   <p class="clearfix"><input type="submit" value="Submit details" /></p>
 </form>

JS / jQuery:

<script type="text/javascript">
$(document).ready(function(){
$("#event_trigger").fancybox({
 'padding'  : 0,
 'scrolling'  : 'no',
 'titleShow'  : false,
});

$("#events_form").bind("submit", function() {

 $.fancybox.showActivity();

 $.ajax({
  type  : "POST",
  cache : false,
  url  : "/events/index.php",
  data  : $(this).serializeArray(),
  success: function(data) {
   $.fancybox(data);
  }
 });

 return false;
});

});

The php file returns and empty array. However the firebug post tab displays the form data.

Also, I noticed that if I do

print_r($_SERVER['REQUEST_METHOD'])

This returns GET, even though I have specified POST.

Any help will be much appreciated.

Answer 1

$.ajax expects the parameter data to be an object or a string.

http://api.jquery.com/jQuery.ajax/ scroll down to data.

If you wrap your data in an object e.g. data: {array:$(this).serializeArray()} it may work. I'm not 100% sure on that though.

Answer 2

You are doing an AJAX request on a form submit.

Unless the AJAX request is synchronous (which I wouldn't recommend, anyway) there is a danger that your form will be submitted before there is any chance for the AJAX request will return.

In the line:

$(this).serializeArray()

$(this) is referring to the the form element you have selected in the bind method. I'm assuming this is intended

Answer 3

Why not using jQuery form plugins? It will make your work easier.