I'm trying to send data and a file via jquery ajax. The problem is when I try to print $_POST or $_FILES it comes out empty even though it shows me the success message on the client side. this is the html code :
<form role="form" enctype='multipart/form-data' id="add_bike_form" method="post" action="add_bike.php">
<div class="form-group">
<label for="bike_name">Bike name </label>
<input type="text" placeholder="Enter the bike name" id="bike_name" name="bike_name" class="form-control">
</div>
<div class="form-group">
<label for="bike_model">Bike model</label>
<input type="text" placeholder="Enter the Bike model" id="bike_model" name="bike_model" class="form-control">
</div>
<div class="form-group">
<label for="matricule">Car number</label>
<input type="number" placeholder="Enter the Car number" id="matricule" name="matricule" class="form-control">
</div>
<div class="form-group">
<label for="price">Price</label>
<input type="number" placeholder="Enter the Price" id="price" name="price" class="form-control">
</div>
<div class="form-group">
<label for="ig_link">The bike image</label>
<input type="file" id="InputFile" name="image_bike">
<p class="help-block">add the bike image here.</p>
</div>
<button class="btn btn-info" type="submit">Submit</button>
</form>
javascript code :
$("#add_bike_form").submit(function(e) {
e.stopImmediatePropagation();
e.preventDefault();
var fd = new FormData( this );
for (var [key, value] of fd.entries()) {
console.log(key, value); //I'm trying to see the content of the formdata and everything is good
}
$.ajax({
url: "add_bike.php",
type: "post",
data: fd,
cache: false,
contentType: false,
processData: false,
error : function () {
console.log('try again');
},
success : function (data) {
console.log('Thank God it worked!');
}
});
});
the php code:
print_r($_POST);
print_r($_FILES);
var_dump($_POST);
var_dump($_FILES);
echo $_POST['bike_name']; ////Here comes out an error Undefined index: bike_name