使用ajax将多个文件上传到变量文件夹

Question

I am currently trying to make a form that uploads multiple files to a folder that is chosen through a drop down list. So far I was able to upload one file to a folder that was predetermined(not the drop down list), but in my most recent attempt I cannot seem to figure out what is wrong with the communication to the ajax file to the php. Would anyone be able to help me out? Currently the code just refreshes my page and does not return any php results.

My Form:

<form  method="post" id="form" enctype="multipart/form-data" >
              <p>
                <input type="file" name="file" id="file" onclick="zero_damnit()" onchange="bars()"  multiple></input>
              </p>
          </div>
        </div>
      </div>
      <a class="bar_font">Files</a>
      <div class="progress_bar meter super_center nostripes">
        <span id="load" ></span>
      </div>
      <a class="bar_font">Size</a>
      <div class="progress_bar meter super_center nostripes">
        <span id="size"></span>
   <div class="dropdown_section">
            <a class="bar_font">Category</a>
            <select name="folder" id="drop_category">
              <option value="empty">empty</option>
              <option value="bass">bass</option>
              <option value="clap">clap</option>
              <option value="hi-hat">hi-hat</option>
              <option value="kick">kick</option>
              <option value="lead">lead</option>
              <option value="perc">perc</option>
              <option value="sfx">sfx</option>
              <option value="snare">snare</option>
              <option value="synth">synth</option>
              <option value="vocal">vocal</option>
              <option value="loop">loop</option>
              <option value="other">other</option>
            </select>
          <br>
            </div>
<!-- terms -->
        <div class="checkbox_upload" id="saber">
          <input type="checkbox" onclick="changeClass()"  name="terms" id="terms"> I accept the <a class="link-style" href="terms.html">Terms and Conditions.</a>
        </div>
        <div class="shift meterslim super_center nostripes">
        <span style="width: 50%"></span>
      </div>

      </div>
    </div>
        <div class='center super_center'>
          <input type="submit" name="submit" id="submit" class="button_before submit">
        </div>
        <div id="results">
        </div>
      </div>
</form>

php:

<?php
$folder = $_POST['folder'];
// sanitise $folder
$location = 'uploaded/' . rtrim($folder, '/') . '/' . $_FILES['file']['name'];
if(file_exists($location)) {
    echo 'File already exists';
}
else {
    move_uploaded_file($_FILES['file']['tmp_name'],  $location);
    echo true;
    echo 'File was stored in:' . $location;
}
?> 

Ajax:

$('#submit').on('click', function() {
    var folder = $('input#drop_category').val();
    var file_data = $('#file').prop('files')[0];     
    var form_data = new FormData();                  
    form_data.append('files', file_data, 'folder',folder);
    alert(form_data);                             
    $.ajax({
                url: 'upload.php', // point to server-side PHP script 
                dataType: 'text',  // what to expect back from the PHP script, if anything
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,                         
                type: 'post',
                success: function(php_script_response){
                    alert(php_script_response); // display response from the PHP script, if any
                }
     });
});

Answer 1

$('#submit').on('click', function(e) { // add 'e' on the function
  e.preventDefault(); // add this line to prevent the php form submission, so it won't refresh the page