PHP $_Post a form field from HTML form to PHP through JavaScript

Question

Sounds crazy I know, but here is whats going down. I have a drag and drop file uploader that uses javascript for the drag and drop and sends the files to an upload script in php to save the file to the server. This all works great. Here is the catch.

I added a form code below

<form> 
Customer Name:<input type="text" name="FilesDir" value=""/>
<!--Destination url--><input id="url" input type="hidden" value="upload.php"/>
</form>

to set a name to create a directory and then used javascript to pass the value to php

var createDirectory = document.getElementById('FilesDir');

var formData = new FormData();

formData.append('myfile', file);

formDataDir = new FormData(createDirectory);

xhr.send(formData);

xhr.send(formDataDir);

PHP to make the directory as follows

$Dir = $_POST["FilesDir"];
if (!is_dir($Dir)) {
mkdir($Dir);
}

When I test it doesn't see the posted value, see error below

Notice: Undefined index: FilesDir in C:\wamp\www\php_sandbox\Manual_QR\upload.php on    line 3
Call Stack
#   Time    Memory  Function    Location
1   0.0009  261296  {main}( )   ..\upload.php:0

Warning: mkdir(): Invalid argument in C:\wamp\www\php_sandbox\Manual_QR\upload.php on line 5
Call Stack
#   Time    Memory  Function    Location
1   0.0009  261296  {main}( )   ..\upload.php:0
2   0.0012  262288  mkdir ( )   ..\upload.php:5

HELP Please!

Answer 1

var url= "page to which you want to post";
var data= "page to which you want to post"; //forexample  'var1='+var1+'&var2='+var2


jQuery.ajax({  
      type: "POST", 
      url: url, 
      data: data,
      complete: function(data){  

  }
 });

and use id's for input elements to recognize values in javascript