I am submitting a form with AJAX and I can see the following payload using the developer tools in chrome:
------WebKitFormBoundaryiwCAdpY9aJH3D9h9
Content-Disposition: form-data; name="datafixId"
666
------WebKitFormBoundaryiwCAdpY9aJH3D9h9
Content-Disposition: form-data; name="Ref"
------WebKitFormBoundaryiwCAdpY9aJH3D9h9
Content-Disposition: form-data; name="environment"
Live
------WebKitFormBoundaryiwCAdpY9aJH3D9h9
Content-Disposition: form-data; name="filesToUpload"; filename=""
Content-Type: application/octet-stream
------WebKitFormBoundaryiwCAdpY9aJH3D9h9
Content-Disposition: form-data; name="comments"
------WebKitFormBoundaryiwCAdpY9aJH3D9h9--
Yet in the recieving php page the $_POST data is blank. If I do print_r($_POST) into the email I recieve from the page, it only contains '1'.
How do I go about getting this payload data in the page it's been posted to?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<!--<link rel="stylesheet" href="css/bootstrap.min.css">-->
<link rel="stylesheet" type="text/css" href="./custom.css">
<title>Datafix Submission Tool</title>
</head>
<body>
<div class="container">
<form method="post" role="form" id="datafixForm" name="datafixForm" enctype="multipart/form-data" data-toggle="validator">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="h1 highRow">Datafix Submission Tool</div>
</div>
</div>
<div class="row">
<div class="col-md-3">Datafix Ref : <div class="text-danger">*required</div></div>
<div class="col-md-3 form-group has-feedback has-error">
<input class="form-control" name="datafixId" id="datafixId" placeholder="CXXX" required pattern="^C[0-9][0-9][0-9]" data-error="Please choose a valid ID" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="col-md-3">Reference : </div>
<div class="col-md-3 form-group">
<input type="text" class="form-control" id="Ref" name="Ref" placeholder="rmXXXXX">
</div>
</div>
<div class="row">
<div class="col-md-3">Please Select Environment : <div class="text-danger">*required</div></div>
<div class="col-md-2 form-group has-feedback has-error">
<select class="form-control" id="environment" name="environment" data-error="An environment must be selected" required>
<option value="" disabled="disabled"></option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="col-md-3">Attach required files : </div>
<div class="col-md-3 form-group">
<input class="form-control" name="filesToUpload" id="filesToUpload" type="file" />
</div>
</div>
<div class="row">
<div class="col-md-3">Select preset comments:</div>
<div class="col-md-6 checkbox form-group" id="presetComments" >
</div>
</div>
<div class="row">
<div class="col-md-3 ">Additional comments :</div>
<div class="col-md-3 form-group">
<textarea class="form-control" rows="3" name="comments" id="comments" placeholder="Comments" ></textarea>
</div>
</div>
<div class="row">
<div class="col-md-7 form-group">
<button type="submit" id="submit" name="submit" class="btn btn-primary-outline center-block" >Submit</button>
</div>
</div>
</form>
<div class="row">
<div class="col-md-10" id="results"></div>
</div>
</div>
<!-- jQuery first, then Bootstrap JS. -->
<script src="/jquery/jquery-1.11.3.min.js"></script>
<script src="/jquery/bootstrap.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.min.css"></script>-->
<script src="./jquery/validator.min.js"></script>
<script>
$( document ).ready(function() {
$.ajax({
url: 'ajax/environments.php',
type: 'GET',
dataType: 'json',
success: function (loadEnvs) {
$.each(loadEnvs, function (i, value) {
console.log(i + ' < - > ' + value);
$('#environment').append($('<option>').text(value).attr('value', value));
});
}
});
$.ajax({
url: 'ajax/comments.php',
type: 'GET',
dataType: 'json',
success: function (loadComments) {
$.each(loadComments, function (i, value) {
console.log(i + ' < - > ' + value);
$("#presetComments").append("<label><input id='" + i + "' type='checkbox' name='" + value + "' /> " + value + "</label><br>");
});
console.log(loadComments)
}
});
$('#submit').on('click', function (e) {
$('#datafixForm').validator();
e.preventDefault();
var myForm = document.querySelector('#datafixForm');
var formData = new FormData(myForm);
var formIsValid = $('.form-group.has-error').length===0; // true as long as nothing contains has-error
if (formIsValid) {
// Submit the form
$.ajax({
url: 'process.php',
method: 'POST',
data: formData,
contentType: 'multipart/formdata',
processData: false,
success: function (data) {
console.log('Form submitted!');
console.log('Recieved' + data);
alert('Form submitted!');
},
error: function (data) {
console.log('We failed');
console.log('Got' + data);
alert('Something went wrong submitting the form');
}
});
} else {
alert("Form is invalid");
}
});
});
