懸浮窗防止當按鈕被點擊

Question

我使用的懸浮窗在我的頁面如下（有在形式的文本，並選擇下拉菜單中的其他輸入類型）的形式提交：

<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 --> 

然後，我有一個提交按鈕形式如下：

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

這裏是問題，懸浮窗的偉大工程，但每次都懸浮窗內的按鈕被點擊了完整的表單提交，這意味着頁面重新加載，所有數據在任何文本區域，輸入框丟失了。

我在我的網站上的另一個頁面上沒有包裹在窗體中的dropzone，它可以正常調用AJAX函數，所以我猜這是與窗體有關？

這裏是我的懸浮窗Ajax代碼：

// 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); 
    }; 

我不想的形式每次使用懸浮窗時提交。

Answer 1

變化：

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

到

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); 
    };