title: ajax and php file upload undefined index from inputs
body: <p>I made a php script today to upload file and also added some inputs for sending information like title and description etc. All was working just fine until i added my javascript with ajax. When i added javascript to the page and submiting the form it no longer gets the information from my input elements. Only from the fileupload input.</p>
  
  <p>Here are the errors im getting:</p>
  
  <p><strong>Notice: Undefined index: format in C:\xampp\htdocs\functions\uploadvideo.php on line 15</strong></p>
  
  <p><strong>Notice: Undefined index: title in C:\xampp\htdocs\functions\uploadvideo.php on line 16</strong></p>
  
  <p><strong>Notice: Undefined index: desc in C:\xampp\htdocs\functions\uploadvideo.php on line 17</strong></p>
  
  <p>I do know that questions about Undefined Index have been asked probably over 1000 times here on stackoverflow but please don't mark this as a duplicate. I know that i get the error because it cannot access the values for my inputs, but why? My guess is that it has something to do with the JavaScript or it may be because i use type="button" instead of type="submit" for my submit button in the form.</p>
  
  <p>So i post my code and hopefully someone here can come up with a solution.
  And i tried to explain my problem as good as possible but if it's unclear in any way just let me know</p>
  
  <p><strong>html for upload form</strong></p>
  
  <pre><code>&lt;form action="functions/uploadvideo.php" id="upload_form" method="post" enctype="multipart/form-data"&gt;
    &lt;label for="title"&gt;Title&lt;/label&gt;&lt;br&gt;
    &lt;input type="text" name="title" id="title"&gt;&lt;br&gt;&lt;br&gt;
  
    &lt;label for="format"&gt;Format:&lt;/label&gt;&lt;br&gt;
    &lt;select name="format" id="format"&gt;
      &lt;option value=".mp4"&gt;mp4&lt;/option&gt;
      &lt;option value=".ogg"&gt;ogg&lt;/option&gt;
      &lt;option value=".webm"&gt;webm&lt;/option&gt;
    &lt;/select&gt;&lt;br&gt;&lt;br&gt;
  
    &lt;label for="desc"&gt;Description&lt;/label&gt;&lt;br&gt;
    &lt;textarea name="desc" id="desc"&gt;&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;
  
  
    Select video to upload:
    &lt;input type="file" name="file" id="file"&gt;&lt;br&gt;
    &lt;progress id="progressBar" value="0" max="100" style="width:200px;"&gt;&lt;/progress&gt;&lt;br&gt;
    &lt;h3 id="status"&gt;&lt;/h3&gt;&lt;br&gt;
    &lt;p id="loaded_n_total"&gt;&lt;/p&gt;&lt;br&gt;
    &lt;input type="button" onclick="uploadFile()" value="Upload Video" name="submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>JavaScript with AJAX for a progress bar</strong></p>
  
  <pre><code>function _(el) {
    return document.getElementById(el);
  }
  
  function uploadFile() {
    var file = _("file").files[0];
    var formdata = new FormData();
    formdata.append("file", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "functions/uploadvideo.php");
    ajax.send(formdata);
  }
  
  function progressHandler(event) {
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" butes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
  }
  
  function completeHandler(event) {
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
  }
  
  function errorHandler(event) {
    _("status").innerHTML = "Upload Failed";
  }
  
  function abortHandler(event) {
    _("status").innerHTML = "Upload Aborted";
  }
  </code></pre>
  
  <p><strong>PHP File to upload file</strong></p>
  
  <pre><code>&lt;?php
  include('../config/dbconf.php');
  
  // FFMPREG
  $name = preg_replace('/\\.[^.\\s]{3,4}$/', '', basename($_FILES["file"]["name"]));
  $nameext = preg_replace('/\\.[^.\\s]{3,4}$/', '', basename($_FILES["file"]["name"])) . ".jpg";
  $fullvideoname = $_FILES['file']['name'];
  $ffmpeg = "c:\\ffmpeg\\bin\\ffmpeg";
  $videoFile = $_FILES["file"]["tmp_name"];
  $size = "271x170";
  $getFromSecond = 5;
  $cmd = "$ffmpeg -i $videoFile -an -ss $getFromSecond -s $size ../uploads/thumbnails/$name.jpg";
  
  // SQL VARIABLES
  $format = $_POST['format'];
  $title = $_POST['title'];
  $desc = $_POST['desc'];
  $date = time();
  
  // UPLOADED VIDEO
  $tmp_name= $_FILES['file']['tmp_name'];
  $fileType = $_FILES['file']['type'];
  $fileSize = $_FILES['file']['size'];
  $fileError = $_FILES['file']['error'];
  $position= strpos($fullvideoname, ".");
  $fileextension= substr($fullvideoname, $position + 1);
  $fileextension= strtolower($fileextension);
  
  $stmt = $conn-&gt;prepare("INSERT INTO videos (name, format, title, description, thumbnail, uploadDate) VALUES (?, ?, ?, ?, ?, ?)");
  $stmt-&gt;bind_param("sssssi", $name, $format, $title, $desc, $nameext, $date);
  if($stmt-&gt;execute()) {
      shell_exec($cmd);
      if (isset($fullvideoname)) {
  
          $path= '../uploads/videos/';
  
          if (empty($fullvideoname)) {
              echo "Please choose a file";
          }elseif(!empty($fullvideoname)){
  
              if (($fileextension !== "mp4") &amp;&amp; ($fileextension !== "ogg") &amp;&amp; ($fileextension !== "webm")){
                  echo "The file extension must be .mp4, .ogg, or .webm in order to be uploaded";
              }elseif(($fileextension == "mp4") || ($fileextension == "ogg") || ($fileextension == "webm")){
  
                  if (move_uploaded_file($tmp_name, $path.$fullvideoname)) {
                      echo "Video Uploaded";
                  }else{
                      echo 'Failed to move uploaded file';
                  }
              }
          }
      }
  }else{
      echo "Failed";
      echo $stmt-&gt;error;
  }
  ?&gt;
  </code></pre>