jQuery form not sending data

Question

I am trying to make it so when a file is submitted, a form gets submitted. Currently the form is submitting (the page refreshes), however the form data isn't being sent.

Javascript:

$(function () {
    $("#moreHomepageImages").change(function () {
        //I tried all of the following, all don't work

        $("#imageHomepageForm").submit();
        //$("#imageHomepageForm")[0].submit();
        //document.getElementById("imageHomepageForm").submit();
    });
)};

Html:

<form id="imageHomepageForm" name="imageHomepageForm" enctype="multipart/form-data" action="add" method="post">
    <input type="hidden" name="object" value="homepage">
    <input type="hidden" name="object_id" value="0">

    <label>Add More Images</label>

    <input id="moreHomepageImages" type="file" name="images[]" multiple="multiple"/>
</form>

On the add page, I have

print_r($_POST);
print_r($_GET);
print_r($_FILES);

and they print 3 empty arrays. I can't figure out why the form data isn't being sent along with the request? When I add a submit button into the form and click it, the data is sent as it is supposed to,

If it matters, the form is inside a jQuery Tab ( http://jqueryui.com/tabs/ )

EDIT: The action attribute is not the issue since it works if I use a normal input button and click it, I am using codeigniter so I do not need .php

Answer 1

The issue had nothing to do with jQuery or my code, for some reason the MAX_FILE_UPLOAD in my local php config wasn't reading properly and the images I tried uploaded where > 2MB (the default) breaking the request payload...

As to why submitting the form via clicking a submit button works and submitting over jQuery didn't is beyond me...