Ajax form $_POST blank return data

Question

var name = jQuery('[data-field="name"]').val();
var email = jQuery('[data-field="email"]').val();
var inumber = jQuery('[data-field="inumber"]').val();
var rnumber = jQuery('[data-field="rnumber"]').val();
var date = jQuery('[data-field="date"]').val();
var amount = jQuery('[data-field="amount"]').val();
var feedback = jQuery('[data-field="name"]').val();

var file_attach = new FormData(jQuery('input[name^="media"]'));     
jQuery.each(jQuery('input[name^="media"]')[0].files, function(i, file) {
    file_attach.append(i, file);
});
jQuery.ajax({
    type: 'POST',
    data: { func: "sendMail", name,email,inumber,rnumber,date,amount,feedback,file_attach},
    url: 'billing-information-mailer.php',
    cache: false,
    contentType: false,
    processData: false,
    success: function(data){
        console.log(data);
    }
});

I'm trying to pass form info and attachment to a php file to send an email, initially I just went with $.post however I need to set processData to false so I shifted to $.ajax, currently my PHP file is sending an empty return. the only code in my php file is print_r($_POST);

EDIT:

<input type="file" name="media" data-field="billing" id="vdnupload" name="vdnupload" placeholder="Proof of Payment">

try individually display `jQuery('selector').val()` make sure none of them are `undefined` also check your console if it doesn't have any error — Beginner, Nov 10 '16 at 08:50

Rory McCrossan · Accepted Answer · 2016-11-10T08:37:37.090

0

The syntax of the object you're providing to the data property is incorrect as each item needs a key.

However a more pressing problem is that to upload a file you need to put all the data (file and input values) in to the FormData object and send that alone. Try this:

var formData = new FormData();     
$.each($('input[name^="media"]')[0].files, function(i, file) {
    formData.append(i, file);
});
formData.append('name', $('[data-field="name"]').val());
formData.append('email', $('[data-field="email"]').val());
formData.append('inumber', $('[data-field="rnumber"]').val());
formData.append('rnumber', $('[data-field="rnumber"]').val());
formData.append('date', $('[data-field="date"]').val());
formData.append('amount', $('[data-field="amount"]').val());
formData.append('feedback', $('[data-field="name"]').val());

$.ajax({
    type: 'POST',
    data: formData,
    url: 'billing-information-mailer.php',
    cache: false,
    contentType: false,
    processData: false,
    success: function(data){
        console.log(data);
    }
});

You could make this much, much simpler if you place a form element around all the inputs you want to include in the request. That way you can just provide a reference of that form to the FormData constructor and all values will be populated for you:

var formData = new FormData($('#myForm')[0]);

edited Nov 10 '16 at 08:37

answered Nov 10 '16 at 08:32

Rory McCrossan

331,213
40
305
339

I tried the last option thanks! However the file doesn't pass through to the php file. – Nov 10 '16 at 08:41
Ok, to help you with that we need to see your HTML and the PHP you're using to access the file in the request. Could you please edit your question to include those. – Rory McCrossan Nov 10 '16 at 08:42
Edited the above post, for the php I haven't started handling the uploaded file yet, I'm assuming I'll be just accessing $_FILE – Nov 10 '16 at 08:46
That's right. You can refer to [this question](http://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php) for details on how to do that – Rory McCrossan Nov 10 '16 at 08:47
Thanks man, last question though, Do I really need to store the file before sending? Is there a way to like pass the file to the php and directly send no upload, rather than pass, upload send then delete. – Nov 10 '16 at 09:02
No I'm afraid not. The file has to be uploaded to the server first. – Rory McCrossan Nov 10 '16 at 09:12

Ajax form $_POST blank return data

1 Answers1