title: How to get Dropzone.js in combination with multiple input and select fields working
body: <p>Im trying to get <strong>dropzone.js</strong> working with multiple input and select fields working.</p>
  
  <p>Also reading the dropzone.js documentation i saw that the dropzone form looks like a stand alone form. So when i tried to add more input and select fields inside the dropzone form, the complete form gets covered by a dropzone, and i wanted just one part to be a dropzone. Also i found i way fixing it reading other stackoverflow articles.</p>
  
  <p>What i did is i created a form with <strong>3 input fields</strong>, <strong>7 select options</strong> and + <strong>1 dropzone</strong>, and i have 1 submit button which should submit it all together. </p>
  
  <p>I have followed this stackoverflow article: <a href="https://stackoverflow.com/questions/17872417/integrating-dropzone-js-into-existing-html-form-with-other-fields">Integrating Dropzone.js into existing HTML form with other fields</a> </p>
  
  <p><em>Problem: When I submit the form the file starts uploading (Progress animation shows it) but the file gets not uploaded to the server, and the form gets not completly submited, also the fields values are not sent to the database.</em></p>
  
  <p>This is the form start code:</p>
  
  <pre><code>&lt;form  id="drform" name="formapdf2" method="post" action="dodaj-save.php" autocomplete="off" enctype="multipart/form-data"&gt;
  </code></pre>
  
  <p>This is the submit button code:</p>
  
  <pre><code>&lt;button id="sbmtbutton" class="btn btn-primary" name="insert" type="submit"&gt;Registruj radnika&lt;/button&gt;
  </code></pre>
  
  <p>Here is the JS code i use:</p>
  
  <pre><code>Dropzone.options.dropfile = {
      acceptedFiles: 'image/*',
      maxFiles: 1,
      resizeWidth: 300,
      resizeHeight: 300,
      resizeMethod: 'contain',
      resizeQuality: 1.0,
      maxFilesize: 4,
      autoProcessQueue: false,
      url: 'dodaj-save.php',
      addRemoveLinks: true,
      init: function() {
          dzClosure = this; // Makes sure that 'this' is understood inside the functions below.
  
          // for Dropzone to process the queue (instead of default form behavior):
          document.getElementById("sbmtbutton").addEventListener("click", function(e) {
              // Make sure that the form isn't actually being sent.
              e.preventDefault();
              e.stopPropagation();
              dzClosure.processQueue();
          });
  
          //send all the form data along with the files:
          this.on("sendingmultiple", function(data, xhr, formData) {
              formData.append("name", jQuery("#dzfname").val());
              formData.append("qrcode", jQuery("#dzfqrcode").val());
              formData.append("company", jQuery("#select_id").val());
              formData.append("money", jQuery("#dzfmoney").val());
              formData.append("checkin", jQuery("#dzfcheckin").val());
              formData.append("checkout", jQuery("#dzfcheckout").val());
              formData.append("checkin1", jQuery("#dzfcheckin1").val());
              formData.append("checkout1", jQuery("#dzfcheckout1").val());
              formData.append("checkin2", jQuery("#dzfcheckin2").val());
              formData.append("checkout2", jQuery("#dzfcheckout2").val());
          });
      }
  }
  </code></pre>
  
  <p>I have the PHP code for upload too, but im not sure if the php code is the problem, and should i show this code too here. If you need anything else to identify what is the problem please let me know. And I hope i didnt break any stackoverflow rule since this is my first post.</p>