How I can send data form?

Question

I'm having a problem when I'm trying to serialize data form.

Here is the code. I have a page1.php that contains the form. And when the form has been sent, through AJAX, I retrieve the form data and then send it to page2.php.

The problem appears, when it's trying to serialize the file field.

page1.php (containing the form)

$(document).ready(function(){
  $("#enviar").click(function(e){
      e.preventDefault();
          $.ajax({
              type: "POST",
              url: "processar_updateUser.php",
              data: $("form").serialize(), 
              success: function(data){
                   alert(data);
              }
          });
      return false; 
  });
});

page2.php (processing the form data)

<?php
   $personal_name = addslashes(htmlentities($_POST['personalname']));
   $name          = addslashes(htmlentities($_POST['name']));
   $surname       = addslashes(htmlentities($_POST['surname']));
   $concatnom     = $name.".".$surname;
   $password      = addslashes(htmlentities($_POST['password']));
   $adegree       = addslashes(htmlentities($_POST['adegree']));
   $initials      = addslashes(htmlentities($_POST['initials']));
   $n             = substr($name,0,1);
   $c             = substr($surname,0,1);
   $initials      = $n.$c;
   $email         = addslashes(htmlentities($_POST['email']));// que sigui cadena+@"+cadena+.+cadena
   $telephone     = addslashes(htmlentities($_POST['telephone']));  //numero y nomes 9
   $signature     = addslashes(htmlentities($_FILES['signature']['name']));//i have used $_POST, but dind't work
?>

Please use PHP's [built-in functions](http://jayblanchard.net/proper_password_hashing_with_PHP.html) to handle password security. If you're using a PHP version less than 5.5 you can use the `password_hash()` [compatibility pack](https://github.com/ircmaxell/password_compat). Make sure that you [don't escape passwords](http://stackoverflow.com/q/36628418/1011527) or use any other cleansing mechanism on them before hashing. Doing so *changes* the password and causes unnecessary additional coding. — Jay Blanchard, Apr 22 '16 at 17:47
i gets "undefined index" , when i retrieve the ajax response, this error it is referenced to the signature variable — riztak, Apr 22 '16 at 17:56
jQuery's `.serialize()` method cannot submit the contents of file fields because javascript does not have access to the file contents. — shamsup, Apr 22 '16 at 17:56
the problem apperase when try to serialize the file field, thi is the unique problem , because the others variable has been serialized properly . — riztak, Apr 22 '16 at 18:02
I want to retrieve : $_FILES['signature']['name'];$_FILES['signature']['tmp_name'] in order to use in page2.php — riztak, Apr 22 '16 at 18:18

score 0 · Answer 1 · answered Apr 23 '16 at 03:18

Try this (Replaces JQuery selectors according to your html):

var formData = new FormData();
formData.append('personalname', $("#personalname").val());
formData.append('name', $("#name").val());
formData.append('surname', $("#surname").val());
formData.append('password', $("#password").val());
formData.append('adegree', $("#adegree").val());
formData.append('initials', $("#initials").val());
formData.append('email', $("#email").val());
formData.append('telephone', $("#telephone").val());
formData.append('signature', $('#signature')[0].files[0]);

$(document).ready(function(){
  $("#enviar").click(function(e){
      e.preventDefault();
          $.ajax({
              type: "POST",
              url: "processar_updateUser.php",
              data: formData, 
              success: function(data){
                   alert(data);
              }
          });
      return false; 
  });
});

This can be tedious, but it is how I managed to send images to the backend

The method $('#signature') will return a JQuery input object.

This: $('#signature')[0] returns the HTML input tag.

This: $('#signature')[0].files return a JQuery object that contains all files you have selected.

And finally, this: $('#signature')[0].files[0] will return the first file in the JQuery object...

I'm assuming you accept just one file... If not, you must append to formData every file stored in $('#signature')[0].files

Hope this help.

Regards

thanks for your reply. with this part of code: `$('#signature')[0].files[0] `, i will retrieve the name of the first file such as `$_FILES['signature']['name']', so how i can retrieve also the tmp_name such as `$_FILES['signature']['tmp_name'] `or size..etc — riztak, Apr 23 '16 at 22:36
This piece of code: `$('#signature')[0].files[0]` lets you send the file like you were using standard POST (not AJAX)... Did it work? — Sebastián Rodriguez, Apr 24 '16 at 03:37

score 0 · Answer 2 · answered Apr 24 '16 at 19:49

I had the same problem some time ago. I used this plugin jQuery Form Plugin for mixed forms - data plus files,or in other case this one blueimp but this one only for file upload.

I use them a lot and they work like a charm and are easy to integrate.

Hope this will help.

How I can send data form?

2 Answers2