FormData not posting data to php backend script

Question

I have this form

<form id="home"  class="validate-form" method="post" enctype="multipart/form-data">
                            <!-- Form Item -->
                            <div class="form-group">
                                <label>How much money do you need? (USD)</label>
                                <div class="input-group">
                                    <div class="input-group-addon">USD</div>
                                    <input id="moneyAmount" type="number" name="amount" class="form-control slider-control input-lg" value="100000" min="10000" max="1000000" data-slider="#moneySlider" required>
                                </div>
                                <div id="moneySlider" class="form-slider" data-input="#moneyAmount" data-min="10000" data-max="1000000" data-value="100000"></div>
                            </div>
                            <!-- Form Item -->
                            <div class="form-group">
                                <label>How long? (months)</label>
                                <div class="input-group">
                                    <input id="monthNumber" type="number" name="months" class="form-control slider-control input-lg" value="10" min="6" max="12" data-slider="#monthSlider" required>
                                    <div class="input-group-addon">months</div>
                                </div>
                                <div id="monthSlider" class="form-slider"  data-input="#monthNumber" data-min="6" data-max="12" data-value="10"></div>
                            </div>
                            <div class="form-group">
                                <label>Telephone Number</label>
                                <!-- Radio -->
                                <input type="number" name="telephone" class="form-control" required/>
                            </div>
                            <!-- Form Item -->
                            <div class="form-group">
                                <label>3 Months Bank or Paypal </label>
                                <!-- Radio -->
                                <input type="file" name="statements" class="ml btn btn-primary btn-lg" /><span>Upload</span>
                            </div>
                            <!-- Form Item -->
                            <div class="form-group">
                                <label>Monthly repayment</label>
                                <span id="formResult" class="form-total">USD<span>262.99</span></span>
                            </div>
                            <div class="form-group form-submit">
                                <button type="submit" class="btn-submit btn-lg"><span>Send a request!</span></button>
                            </div>
</form>

that i am using to post a file and some data via formData. This is the jquery code

$( "#home" ).on( "submit", function( event ) {
event.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
        url: 'http://example.com/home.php',  
        type: 'POST',
        data: formData,
        async: true,
        success: function (data) {
            console.log(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;

});

and finally the php script

<?php

header('Access-Control-Allow-Origin: *');

header('Access-Control-Allow-Methods: GET, POST');

header("Access-Control-Allow-Headers: X-Requested-With");


$rawData = file_get_contents("php://input");

return print_r($rawData);
?>

On the client side, the console.log(data) is empty. Why am i not able to get the posted data?.

`action_url` is not required as the data is posted using ajax — Mayank Pandeyz, Jun 20 '17 at 08:51
Is there a reason you're not using `$_FILES`? Either way, try with that. I don't think `php://input` is ment to be used with `multipart/form-data` uploads. — M. Eriksson, Jun 20 '17 at 08:55
@MagnusEriksson That was the issue `I don't think php://input is ment to be used with multipart/form-data uploads` i can get the values using `$_POST['amount']` for instance. — , Jun 20 '17 at 09:00
There's no reason to use `php://input` instead of the super globals unless for special cases (like working with `$_PUT` or you need to stream the input or similar). For "standard" form inputs, the super globals tend to do the trick. — M. Eriksson, Jun 20 '17 at 09:05
^ I meant, if you're working with PUT-requests (there is no such thing as `$_PUT`). — M. Eriksson, Jun 20 '17 at 09:13

Riaz Laskar · Accepted Answer · 2017-06-20T09:15:29.607

Actually php://input allows you to read raw POST data but php://input does not work when enctype="multipart/form-data" for detailed info : http://php.net/manual/en/wrappers.php.php

<?php

header('Access-Control-Allow-Origin: *');

header('Access-Control-Allow-Methods: GET, POST');

header("Access-Control-Allow-Headers: X-Requested-With");

echo '<pre>'l
// for upload data
print_r($_FILES);
echo '<br>';
// for posted data
print_r($_POST);
echo '</pre>';
?>

Farhan · Answer 2 · 2017-06-20T09:18:25.857

-1

Form which you are sending through ajax is not correct.

You can give your whole form to FormData() for processing

var form = $('#home')[0]; // You need to use standard javascript object here
var formData = new FormData(form);

use this formData to send with ajax

edited Jun 20 '17 at 09:18

answered Jun 20 '17 at 09:07

Farhan

442
1
6
13

Don't just post links as answers. If the link explains the issue, include the conclusion and the fix in your answer. Links change, posts gets deleted etc. Then this answer will be useless. – M. Eriksson Jun 20 '17 at 09:10

Dat Nguyen · Answer 3 · 2017-06-20T09:14:01.497

-1

jQuery supported get all form data with function serialize or serializeArray.

In your code use

$( "#home" ).on( "submit", function( event ) {
     event.preventDefault();
     var formData = $( "#home" ).serialize();
     $.ajax({
       url: 'http://example.com/home.php',  
       type: 'POST',
       data: formData,
       async: true,
       success: function (data) {
       console.log(data)
    },
    cache: false,
    contentType: false,
    processData: false
  });
});

In PHP use var_dump($_REQUEST) to get all input without file type. With file type you can read PHP Upload File

edited Jun 20 '17 at 09:14

answered Jun 20 '17 at 09:10

Dat Nguyen

784
1
5
14

That's not using `FormData` (which you need to do if you want to upload files using ajax). The OP has a `` in the form. – M. Eriksson Jun 20 '17 at 09:12

FormData not posting data to php backend script

3 Answers3

Linked