dropzone prevent the form submitting when buttons are clicked

Question

I am using dropzone in my page as follows (there are other input types on the form text and select dropdowns):

<form name="somename" method="post" action="/gotoURL" form="role">
   // Other form elements here
       <div id="droparea">
                            <div id="actions" class="row">
                              <div class="col-lg-7">
                                <!-- The fileinput-button span is used to style the file input field as button -->
                                <span class="btn btn-success fileinput-button">
                                    <i class="glyphicon glyphicon-plus"></i>
                                    <span>Add files...</span>
                                </span>
                                <button type="submit" class="btn btn-primary start">
                                    <i class="glyphicon glyphicon-upload"></i>
                                    <span>Start upload</span>
                                </button>
                                <button type="reset" class="btn btn-red cancel">
                                    <i class="glyphicon glyphicon-ban-circle"></i>
                                    <span>Cancel upload</span>
                                </button>
                              </div>
                              <div class="col-lg-5">
                                <!-- The global file processing state -->
                                <span class="fileupload-process">
                                  <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                                    <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                                  </div>
                                </span>
                              </div>
                            </div>

                            <div class="table table-striped files" id="previews">
                              <div id="template" class="file-row">
                                <!-- This is used as the file preview template -->
                                <div>
                                    <span class="preview"><img data-dz-thumbnail /></span>
                                </div>
                                <div>
                                    <p class="name" data-dz-name></p>
                                    <strong class="error text-danger" data-dz-errormessage></strong>
                                </div>
                                <div>
                                    <p class="size" data-dz-size></p>
                                    <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                                      <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                                    </div>
                                </div>
                                <div>
                                  <button class="btn btn-primary start">
                                      <i class="glyphicon glyphicon-upload"></i>
                                      <span>Start</span>
                                  </button>
                                  <button data-dz-remove class="btn btn-red cancel">
                                      <i class="glyphicon glyphicon-ban-circle"></i>
                                      <span>Cancel</span>
                                  </button>
                                  <button data-dz-remove class="btn btn-red delete">
                                    <i class="glyphicon glyphicon-trash"></i>
                                    <span>Delete</span>
                                  </button>
                                </div>
                              </div>
                            </div>  <!-- end action -->
                        </div> <!-- end droparea -->

Then I have a submit button for the form as follows:

<button name="appbut" class="btn btn-primary" type="submit">SEND NOW</button>

Here is the issue, the dropzone works great but every time the buttons within dropzone are clicked the complete form submits which means that the page reloads and all data in any text area, input boxes is lost.

I have the dropzone on another page on my site not wrapped in a form and it works fine calling the AJAX function so I am guessing this is something to do with the form?

Here is my dropzone ajax code:

 // Get the template HTML and remove it from the doument
  var previewNode = document.querySelector("#template");
  previewNode.id = "";
  var previewTemplate = previewNode.parentNode.innerHTML;
  previewNode.parentNode.removeChild(previewNode);

  var myDropzone = new Dropzone("#droparea", { // Make the whole body a dropzone
    url: "/upload-cv2.php", // Set the url
    maxFiles: 1,
    maxFilesize: 1,
    acceptedFiles: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document , application/docx, application/pdf, text/plain, application/msword',
    init: function() {
    this.on("success", function(file, responseText) {
        console.log(responseText);
    });
    },
    parallelUploads: 20,
    previewTemplate: previewTemplate,
    autoQueue: false, // Make sure the files aren't queued until manually added
    previewsContainer: "#previews", // Define the container to display the previews
    clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
  });

  myDropzone.on("addedfile", function(file) {
    // Hookup the start button
    file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
  });

  // Update the total progress bar
  myDropzone.on("totaluploadprogress", function(progress) {
    document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
  });

  myDropzone.on("sending", function(file) {
    // Show the total progress bar when upload starts
    document.querySelector("#total-progress").style.opacity = "1";
    // And disable the start button
    file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
  });

  // Hide the total progress bar when nothing's uploading anymore
  myDropzone.on("queuecomplete", function(progress) {
    document.querySelector("#total-progress").style.opacity = "0";
  });

  // Setup the buttons for all transfers
  // The "add files" button doesn't need to be setup because the config
  // `clickable` has already been specified.
  document.querySelector("#actions .start").onclick = function() {
    myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
  };
  document.querySelector("#actions .cancel").onclick = function() {
    myDropzone.removeAllFiles(true);
  };

I don't want the form to submit each time I use dropzone.

Answer 1

Change:

document.querySelector("#actions .start").onclick = function()    {               myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
  };
  document.querySelector("#actions .cancel").onclick = function() {
    myDropzone.removeAllFiles(true);
  };

to

 document.querySelector("#actions .start").onclick = function(e) {
    e.preventDefault();
   myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
  };
  document.querySelector("#actions .cancel").onclick = function(e) {
    e.preventDefault();
    myDropzone.removeAllFiles(true);
  };