title: How to upload a file together with other text inputs without refreshing the page
body: <p>I use the code below to upload a file successfully without refreshing the page. What I want now is to add one text input field for the title of the file and one textarea to describe the file, but I am having difficulty doing that. It is giving me 'undefined index' error. What should I add to my code below to upload the file, text input and the textarea?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form action="trash_one.php" method="post" id="uploadForm"&gt;
      &lt;div id="targetLayer"&gt;No Image&lt;/div&gt;
      &lt;div id="uploadFormLayer"&gt;
      &lt;label &gt;Upload Image&lt;/label&gt;&lt;br&gt;
      &lt;input type="file" class="inputFile" name="userImage" id="userImage"&gt;
      &lt;input type="submit" name="submit" class="btnSubmit"&gt;
  &lt;/form&gt;
  &lt;div&gt;
  </code></pre>
  
  <p><strong>EXPECTED HTML FORM</strong></p>
  
  <p>Text input and textarea added</p>
  
  <pre><code>&lt;form action="trash_one.php" method="post" id="uploadForm"&gt;
      &lt;div id="targetLayer"&gt;No Image&lt;/div&gt;
      &lt;div id="uploadFormLayer"&gt;
      &lt;input type="text" name="img_name"&gt;
      &lt;label &gt;Upload Image&lt;/label&gt;&lt;br&gt;
      &lt;input type="file" class="inputFile" name="userImage" id="userImage"&gt;
      &lt;textarea name="description" &gt;&lt;/textarea&gt;
      &lt;input type="submit" name="submit" class="btnSubmit"&gt;
  &lt;/form&gt;
  &lt;div&gt;
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>$(document).ready(function(e) {
    $("#uploadForm").on('submit',(function(e) {
      e.preventDefault();
      $.ajax({
          url: "trash_one.php",
          type: "POST",
          data: new FormData(this),
          contentType: false,
          cache: false,
          processData: false,
          success: function(data){
              $("#targetLayer").html(data);
          },
          error: function(){
          }
      });
  }));
  });
  </code></pre>
  
  <p><strong>PHP</strong></p>
  
  <p>This script uploads only the file</p>
  
  <pre><code>if(is_array($_FILES)){
      if(is_uploaded_file($_FILES['userImage']['tmp_name'])){
          $sourcePath = $_FILES['userImage']['tmp_name'];
          $targetPath = "imagess/".$_FILES['userImage']['name'];
          if(move_uploaded_file($sourcePath,$targetPath)){
          ?&gt;
          &lt;img src="&lt;?php echo $targetPath; ?&gt;" width="100px" height="100px" /&gt;
          &lt;?php
          }
      }
  }
  </code></pre>