How to post a file and form data from a Bootstrap Modal

Question

I am having trouble posting a file and form data from a bootstrap modal.

I have the code working to post the file attachment from it, but the other fields I cant pass through

The Javascript I have is below

$(document).ready(function(){
  $('#upload').click(function(){

    var fd = new FormData();
    var files = $('#file')[0].files[0];
    fd.append('file',files);

    // AJAX request
    $.ajax({
      url: 'clienttest.php',
      type: 'post',
      data: fd,
      contentType: false,
      processData: false,
      success: function(response){
        if(response != 0){
          // Show image preview
          $('#preview').html(" Process Started");
        }else{
          alert('file not uploaded');
        }
      }
    });
  });
});

The form data I have is below

                <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title" id="myModalLabel">Load Secure Document</h4>
                            </div>
                            <div class="modal-body">
                            <form method='post' action='' enctype="multipart/form-data">
                            <label for="nametag">Name</label>
                            <input type="text" name="nametag" size="20" />

                            Select file : <input type='file' name='file' id='file' class='form-control' ><br>
                            <input type='button' class='btn btn-info' value='Upload' id='upload'>
                            </form>

                            <!-- Preview-->
                            <div id='preview'></div>
                            </div>
                            <div class="modal-body3">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>

And then finally I have the file to receive the data, save the file and email the persons name to me to check

// file name
$filename = $_FILES['file']['name'];

// Location
$location = $filename;

// file extension
$file_extension = pathinfo($location, PATHINFO_EXTENSION);
$file_extension = strtolower($file_extension);

// Valid image extensions
$image_ext = array("jpg","png","jpeg","gif","pdf");

$response = 0;
if(in_array($file_extension,$image_ext)){
  // Upload file
  if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){
    $response = $location;
  }
}

mail ('email@email.com','email of name',"name is ".$_POST['nametag']);

echo $response;

I am sure that there is something in the Javascript function that needs to be added, most likely on the line marked data, but I cant find what it is on the internet. Could someone please assist.

Answer 1

Other fields are not passed because you are not appending them to the FormData, a better way is to use the form object while initializing the FormData() rather appending all the form input manually, see below,

Note: add the attribute id="my-form" to the form before using it

$(document).ready(function(){
  $('#upload').click(function(){

    event.preventDefault();
     var form = $("#my-form")[0];
     var data = new FormData(form);
    // AJAX request
    $.ajax({
      url: 'clienttest.php',
      type: 'post',
      data: data,
      contentType: false,
      processData: false,
      success: function(response){
        if(response != 0){
          // Show image preview
          $('#preview').html(" Process Started");
        }else{
          alert('file not uploaded');
        }
      }
    });
  });
});