Unable To Pass Formdata With Other Parameters In Jquery

I am trying to pass formData along with other parameters to a PHP script. Using the $.post method, I was getting an 'Illegal Invocation' error. So I abandoned the $.post method an

Solution 1:

The parameters is the object you are POSTing. the key value pairs will be based on it's properties. Try accessing them like $_POST['formData'] and $_POST['booking'].

Also... please rework your code to remove the async:false ... TBH this should never have been put into jQuery and is absolutely terrible. Don't feel bad, it's the first thing every newcomer tries when they first start using ajax, myself included. You're going to cause the UI thread to hang for the duration, preventing all user interaction during the call.

EDIT I didn't realize you are trying to post a file at first, so this is not a complete answer as I don't think you are accessing it correctly. But The important part of this answer is that there is no parameters index of $_POST (which is why not even your echo "hello" is coming back).

if you POST an object that looks like

{
  key1 : "value1",
  key2 : "value2"
}

they will come through to php as

$_POST['key1'];//"value1";
$_POST['key2'];//"value2";

important to note, files posted to the server are typically found in the $_FILES superglobal. (don't know if AJAX changes that, but I imagine not)

EDIT2

Combining the two... this is the general idea. Make your html + JS look like...

$('#form').on('submit', function()
{
  var form_data = newFormData();

  form_data.append("file", document.getElementById('fileInput').files[0]);
  var booking = $('#bookingNum').val();
  var partner = $('#partnerCode').val();

  form_data.append("booking ",booking); 
  form_data.append("partner",partner);  

  $.ajax({
    url: 'process/customer.php',
    method:"POST",
    data: form_data,
    contentType: false,
    cache: false,
    processData: false,
    success: function(data)
    {
      console.log(data);
    },
    error: function(jqHHR, textStatus, errorThrown)
    {
      console.log('fail: ' + errorThrown);
    }
  });
  
  returnfalse;//prevent default form submission
});

<formid='form'><inputtype='file'id='fileInput' /><labelfor='bookingNum'>Booking Num: </label><inputtype='text'id='bookingNum'name='bookingNum' /><labelfor='partnerCode'>Partner Code:</label><inputtype='text'id='partnerCode'name='partnerCode' /><buttonid='uploadBtn'>Submit</button></form>

and try it with your php code like

<?phpif($_POST['bookingNum']){
    var_dump($_POST['bookingNum']);
}
if($_POST['partnerCode']){
    var_dump($_POST['partnerCode']);
}
if($_FILES['file']){
    var_dump($_FILES['file']);
}

Solution 2:

$('#uploadBtn').on('click', function()
{
  var form_data = newFormData();

  form_data.append("file", document.getElementById('ID').files[0]);
  var booking = $('#bookingNum').val();
  var partner = $('#partnerCode').val();

  form_data.append("booking ",booking); 
  form_data.append("partner",partner);  

  $.ajax({
    url: 'process/customer.php',
    method:"POST",
    data: form_data,
    contentType: false,
    cache: false,
    processData: false,
    success: function(data)
    {
      console.log(data);
    },
    error: function(jqHHR, textStatus, errorThrown)
    {
      console.log('fail: ' + errorThrown);
    }
  });
});