CODEWITHSUNDEEP
javascriptphpjqueryajax
John Beasley
John Beasley

Reputation: 3073

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 and went to $.ajax method.

As follows:

$('#uploadBtn').on('click', function()
{
  var formData = new FormData($('#uploadfile')[0]); // the form data is uploaded file
  var booking = $('#bookingNum').val();
  var partner = $('#partnerCode').val();

  var parameters =
  {
    formData:formData,
    booking:booking,
    partner:partner
  } 

  $.ajax({
    url: 'process/customer.php',
    data: parameters,  // <- this may be wrong
    async: false,
    contentType: false,
    processData: false,
    cache: false,
    type: 'POST',
    success: function(data)
    {
      console.log(data);
    },
    error: function(jqHHR, textStatus, errorThrown)
    {
      console.log('fail: ' + errorThrown);
    }
  });
});

On the PHP side, I'm trying to get the parameters object like so:

<?php
if(isset($_POST['parameters']))
{
  echo "Hello";  

  $value = $_POST['parameters'];
  // I can get the other 2 parameters like this
  $company = htmlspecialchars(trim($value['booking']));
  $partner = htmlspecialchars(trim($value['partner']));

  // not sure how to get the uploaded file information      
}
?>

Basically, I am uploading a file to be saved to a directory. But the problem is, I cannot send anything over to the PHP side. I am getting this warning:

"jquery.js:2 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/."

I need to be able to send the 'parameters' object over to the PHP script, then access it for processing.

How can I achieve this using the $.ajax method? Then how do I access the formData once on the PHP side?

Upvotes: 0

Views: 1696

Answers (2)

dgeare
dgeare

Reputation: 2658

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 = new FormData();

  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);
    }
  });
  
  return false;//prevent default form submission
});
<form id='form'>
  <input type='file' id='fileInput' />
  <label for='bookingNum'>Booking Num: </label>
  <input type='text' id='bookingNum' name='bookingNum' />
  <label for='partnerCode'>Partner Code:</label>
  <input type='text' id='partnerCode' name='partnerCode' />
  <button id='uploadBtn'>Submit</button>
</form>

and try it with your php code like 

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

Upvotes: 1

Tanmay Dey
Tanmay Dey

Reputation: 11

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

  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);
    }
  });
});

Upvotes: 0

Related Questions