Cannot access data from jQuery Ajax request, returns empty array

Question

I have a form that is called via the fancybox plugin 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>

JavaScript / 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;
        });
    });
</script>

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.

Why not using jQuery form plugins? It will make your work easier. — Donny Kurnia
– Donny Kurnia, Commented Feb 17, 2010 at 13:10

Esteban · Accepted Answer · 2010-11-13 17:17:05Z

1

$(this).serializeArray()

with the name of the form CSS id (#my-form-ID, in this example) like this:

$("#my-form-ID").serializeArray()

Hope that solves it. It worked for me. ;-D

answered Nov 13, 2010 at 17:17

Esteban

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Nalum · Accepted Answer · 2010-02-17 12:06:31Z

0

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

answered Feb 17, 2010 at 12:06

Nalum

4,2335 gold badges41 silver badges55 bronze badges

3 Comments

Oldie Over a year ago

Hi, thanks for your answer, unfortunately wrapping data didn't work.

Nalum Over a year ago

What do you get if you add textStatus to your success function e.g. function(data, textStatus){alert(textStatus);}?

Oldie Over a year ago

thats returns "Success", still an empty array though.

Mutation Person · Accepted Answer · 2010-02-17 12:07:11Z

0

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

answered Feb 17, 2010 at 12:07

Mutation Person

30.6k18 gold badges102 silver badges166 bronze badges

1 Comment

Oldie Over a year ago

Hi, yes this is intended. I got this code from the example on fancybox.net/blog and the example works fine.

Collectives™ on Stack Overflow

Cannot access data from jQuery Ajax request, returns empty array

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related