Unable to pass JS data to PHP via jQuery FormData

I am trying to upload files and send form data from Bootstrap Modal window to the server via jQuery and ajax.
//The issue is that I have received values of upload field(i.e <input type="file">) but dont know how to send other form fields on server. Need help

Here is the code of Modal Window with FORM
<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title page-color">Add Project Information</h4>
  </div>

  <div class="modal-body">
      <form enctype="multipart/form-data">


    <label>Project Title</label>
    <textarea id="map_proj_title" name="map_proj_title"></textarea>
    <div><label>Project Description</label>
      <textarea id="map_proj_desc"></textarea>
      <!--input type="text" id="embed_alignment" name="embed_alignment"-->
      <div><label>Project Image</label>
      <input type="file" id="map_proj_image">
    </form>
  </div>
  </div>


  <div class="modal-footer">
    <button type="button" class="btn btn-default" id="btnmproject" >Save Project</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>

Open in new window


And here is jQuery code
<script>

jQuery('#btnmproject').on('click',function(){

projtitle_val = jQuery("#map_proj_title").val();
projdesc_val  = jQuery("#map_proj_desc").val();
txtboxproj_val = 1;

var fd = new FormData();
var files = jQuery('#map_proj_image')[0].files[0];

fd.append('map_proj_image',files);
//fd.append('request',1);

jQuery.ajax({

  type: 'POST',
  url: "insert-project-data.php?projtitle_val="+projtitle_val+"&projdesc_val="+projdesc_val,  
  data: fd,
  contentType: false,
  processData: false,
  dataType: "JSON",

  success: function(data) {    
        jQuery('#Modal').modal('hide'); 
  },
  error: function(err) {
  }

});
</script>

Open in new window


And here is the PHP code where I am retrieving the variable values:
<?PHP
$proj_image = $_FILES["map_proj_image"]["name"]; //upload field 
$proj_title  = $_REQUEST['projtitle_val'];       //text field
$proj_detail = $_REQUEST['projdesc_val'];
?>

Open in new window


The issue is that I have passed the ProjectTitle and ProjectDescription values in a querystring.
How can I send these values with FORMDATA like I send value for FileUpload variable?

Thanks
Yuri BoyzSoftware EngineerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

rgranlundCommented:
Maybe this:
data :   $("form").serialize()
Replace your AJAX data with that.  And make sure you us the ID of the Form.
Yuri BoyzSoftware EngineerAuthor Commented:
No. It not works.
I have replace this code with my jQuery code by adding form id also.
At server side I am unable to receive the values of the variables by $_POST or $_REQUEST.

any other solution?
Chris StanyonWebDevCommented:
All you need to do is append the values to your FormData object in the same way as you did with the File:

var fd = new FormData();
fd.append('userfile', jQuery('#map_proj_image')[0].files[0]);
fd.append('title', jQuery("#map_proj_title").val());
fd.append('desc', jQuery("#map_proj_desc").val());

Open in new window

You can then access the data on your server with:

$_FILES['userfile']
$_POST['title']
$_POST['desc']

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Become a Microsoft Certified Solutions Expert

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Yuri BoyzSoftware EngineerAuthor Commented:
@chris:
Thank you so much. It works perfectly
Can you please tell me that what is the meaning of [0] in:
 jQuery('#map_proj_image')[0].files[0]);

Open in new window

Chris StanyonWebDevCommented:
Hey Shano,

The zeroes are needed to get at the raw data. When you select an element in jQuery, the element get's wrapped in the jQuery object. This object is actually an array so to get to the file input itself (rather than the jQuery object) you need to select the element from the array by using the zero - $('#map_proj_image')[0]

That will then reference the actual file input. Because the file input can also take more than one file (stored as an array), the second zero is used to get at the first file selected (zero-based arrays!). If you were to select 2 files in your file input, you would access them with files[0] and files[1].
Julian HansenCommented:
Why not just wrap your form in a <form> element and then simply create the FormData on the form.
For example
  <form method="post" action="t3124.php" enctype="multipart/form-data" id="myform">
    <input type="file" name="myfile" />
    <input type="text" name="fullname" placeholder="fullname"/>
    <input type="checkbox" name="verify" value="1"> Verify
    <button type="submit" class="btn btn-default">Go</button>
  </form>

Open in new window

jQuery
<script>
$(function() {
  $('#myform').submit(function(e) {
    e.preventDefault();

    // LET FormData DO THE HEAVY LIFTING
    var fd = new FormData(this);
    $.ajax({
      url: this.action,
      type: this.method,
      data: fd,
      processData: false,  // tell jQuery not to process the data
      contentType: false
    }).then(function(resp) {
      $('#result').html(resp);
    });
  });
});
</script>

Open in new window

Working sample here
Yuri BoyzSoftware EngineerAuthor Commented:
Thanks for the solution. I selected Chris solution as Best because I have coded in that way. But Julian approach is more better. I prefer to use it in future. Thanks
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.