FormData not posting data to php backend script - php

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

Answer 1

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>';
?>

Answer 2

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

Answer 3

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