悬浮窗防止当按钮被点击
问题描述:
我使用的悬浮窗在我的页面如下(有在形式的文本,并选择下拉菜单中的其他输入类型)的形式提交:悬浮窗防止当按钮被点击
<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);
};
我不想的形式每次使用悬浮窗时提交。
答
变化:
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);
};
那么,为什么不只是使用''键代替或'event.preventDefault()'? –
event.preventDefault()在哪里?我想先尝试一下 –
无论按下按键触发第一个事件,我都不确定它在做什么,所以我不能确定它会在哪里发生。 –