2

I'm trying send data (input text, dropdown list, etc) and files to PHP file through Ajax. I use this function to add extra parameter named Action. Action can be some of these texts: "add", "edit", "read" and "delete" (crud options). See the script below:

function recordActions(action_name, id) {
  //id = (typeof id == "undefined") ? '' : id;

  var frm = document.getElementById(action_name + '_form');
  var form_data = new FormData();

  form_data.append('action', action_name);
  form_data.append('fd', frm);

  $.ajax({
          type: 'post',
          dataType: 'json',
          url: '<?php echo FILENAME_USERS_ACTIONS; ?>',
          data: form_data, 
          cache: false,
          processData: false,
          contentType: false,
          success:
            if (data.action == 'add' || data.action == 'edit') {
                $("#" + action_name + '_form')[0].reset();
                $("#" + action_name + '_div').slideUp();
            }
            showWeekAgenda();

            }          
      });

      // esta línea evita que la página se refresque dando a Cancelar la visita y evita que salga Error en Success de Arriba
      if (action_name == 'cancel') return false; 
    }

When the Ajax call the PHP file (), I don't know how to access the data contains in FormData. Seeing the Params in Web Developer, I got it:

-----------------------------81668061412059330971865480216
Content-Disposition: form-data; name="action"

actadd
-----------------------------81668061412059330971865480216
Content-Disposition: form-data; name="fd"

[object HTMLFormElement]
-----------------------------81668061412059330971865480216--

Then, I put some code in PHP to see the params and their values: 

print_r($_POST);
print_r($_FILES);

echo '<br>Post: ' . $_POST['fd'];

but I got nothing to help me.

Array
(
    [action] => actadd
    [fd] => [object HTMLFormElement]
)
Array
(
)
<br>Post: [object HTMLFormElement]

Anyone knows how to access to any value inside of fd? fd should have values of my input texts, dropdown, textarea, etc.

Following the answer of this question: Uploading both data and files in one form using Ajax? we can put all HTML Controls in one FormData.

Thanks in Advance!

Oz-rod
  • 31
  • 1
  • 6

1 Answers1

5

When you create your FormData object, you should pass the form to the constructor to get it populated with the forms values. You can then append the action value to that result:

var frm = document.getElementById(action_name + '_form');
var form_data = new FormData(frm);
form_data.append('action', action_name);

When you do it this way you should see $_POST and $_FILES populated correctly in your PHP code.

Nick
  • 138,499
  • 22
  • 57
  • 95
  • Nick, you're right! Thank you! Why did this happen? Which is the diff between pass form to the constructor instead of use append? – Oz-rod Jan 13 '19 at 18:55
  • @Oz-rod when you use `append` the form gets added to the posted data as an object and PHP won't parse it as it is not at the top level of the posted data. Hence you see `[fd] => [object HTMLFormElement]` in your `$_POST`. When you pass the form to the constructor, each of the elements of the form is added to the posted data at the top level, so PHP will parse it on receipt. – Nick Jan 13 '19 at 21:59