troubleshooting Question

Unable to pass JS data to PHP via jQuery FormData

Avatar of Yuri Boyz
Yuri BoyzFlag for Uganda asked on
PHPAJAXjQuery
7 Comments2 Solutions144 ViewsLast Modified:
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>

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>

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'];
?>

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
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 2 Answers and 7 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 7 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros