I know this question has been asked before but frustratingly there still appears to be no working solution. I am trying to send form data including a profile image as well as other user details to a PHP file in order to upload them. I’m trying to use FormData in order to do this but haven’t been able to get it to work so I made a really simple version of it but still can’t get the ajax to post any data.
Here is all my code:
HTML:
<form id="testForm" class="" action="" method="post" enctype="multipart/form-data">
<input type="text" name="name" value="">
<input type="submit" name="submit" value="Submit">
</form>
Javascript:
$('#testForm').submit(function(e){
e.preventDefault();
form = $("#testForm");
var data = new FormData(form[0]);
console.log(...data);
$.ajax({
url: "testFormData.php",
type: "POST",
data:{data},
cache: false,
contentType : false,
processData: false,
success: function(dataResult){
console.log(dataResult);
}
});
});
PHP:
$testText = htmlspecialchars($_POST['name']);
echo $testText;
I know that it is reading the form data because when I log it I can see the values, however, the ajax simply returns the error Undefined array key "name" from the PHP.
Does anyone know of a way to get this working?
This is what i tried i expect that the buttons appear in every pane