JQuery Form Plugin, can't receive data in PHP

Question

I'm using JQuery Form Plugin for AJAX file uploader.

The (html) form is created dynamically, and looks like this:

<form id="formUpload" action="fileReceiver.php" method="post" enctype="multipart/form-data">
    <input type="file" name="fileUpload" multiple>
    <input type="submit" value="Upload File to Server">
</form>

Because, the form is created dynamically, I'm using jquery on(). I also need to send a few variables, I'm using data options from the plugin.

The Javascript looks like this:

$(document).on("submit", "form#formUpload", function() {
    $(this).ajaxForm({
        data: { someVariable : 'someValue' },
        complete: function(xhr) {
            status.html(xhr.responseText);
        }
    }); 
});

I think the form is binded correctly, I could call/alert something from the ajaxForm (jquery form plugin) function through beforeSend or Success options.

Now, the problem is the PHP couldn't get the data I posted in the Javascript.

My PHP is simple like this:

<?php
   echo $_POST["someVariable"];
?>

It gives me error "Notice: Undefined index: someVariable blah blah blah"

Any advice? Thx :)

did you try setting `type` to `POST` ? It should any way consider form's method set in `form` tag but try setting manually. — SachinGutte, Mar 19 '13 at 11:55
Have you looked at the request / response in a the browser's developer tools to see what, if anything, is being posted? You may not be sending anything to PHP for it to see in the $_POST array. — Jay Blanchard, Mar 19 '13 at 12:05
Does this help? http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery — John Ennis, Mar 19 '13 at 12:06
@phobos: because the form is created dynamically, I need to use the parent of the form as some kind of scope, isn't it? so Document or Body. — rooivalk, Mar 19 '13 at 12:41
@Jay: yep, the file is uploaded (checked), but there is no request at my browser's Firebug. Any idea why? — rooivalk, Mar 19 '13 at 12:45

Subodh Ghulaxe · Answer 1 · 2013-03-19T12:57:37.240

0

Try adding some variables in hidden input inside form

<input type="hidden" name="someVariable" value="someValue">

and remove $(document).on("submit",... event

You can try

var input = $("<input>").attr("type", "hidden").attr("name", "someVariable").val("someValue");
$('#formUpload').append($(input));

this links may help you

http://www.malsup.com/jquery/form/progress2.html

http://www.malsup.com/jquery/form/file-echo2.php.txt

edited Mar 19 '13 at 12:57

answered Mar 19 '13 at 12:17

Subodh Ghulaxe

18,333
14
83
102

I'm trying to avoid input type hidden, also the variables I need are in Javascript. – rooivalk Mar 19 '13 at 12:25

score 0 · Answer 2 · answered Mar 19 '13 at 15:37

Well, in case your form is being added dynamically then you'd have to use DOMNodeInserted event instead of submit. That way, whenever there's some addition in DOM your form will be attached to form plugin.

You can replace your function with following --

    $(document).on("DOMNodeInserted", "form#formUpload", function() {
        $(this).ajaxForm({
            data: { someVariable : 'someValue' },
            complete: function(xhr) {
                // do something 
            }
        });
    });

But remember, using DOMNodeInserted event will fire that method whenever there's addition of any kind into DOM. So just put what is essential ( in this case form plugin init for #formUpload ) .

score 0 · Answer 3 · edited May 23 '13 at 16:21

0

Try to locate if you already added the jQuery Form Plugin...

<script src="jquery.form.js"></script>

Your syntax is definitely correct according to http://malsup.com/jquery/form/#options-object

edited May 23 '13 at 16:21

nickb

59,313
13
108
143

answered May 14 '13 at 12:40

jrran90

668
12
18

JQuery Form Plugin, can't receive data in PHP

3 Answers3