fix(templates): trash button submits form

The default type of any <button> is "submit", per the HTML spec (http://www.w3.org/TR/html401/interact/forms.html#h-17.5). So we should set these buttons to type "button" to prevent unintended form submits. fixes #1417
FineUploader · Jun 4, 2015 · 0ce5f29 · 0ce5f29
1 parent d5a40e7
commit 0ce5f29
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 61 deletions.
diff --git a/client/html/templates/default.html b/client/html/templates/default.html
@@ -38,34 +38,34 @@
                     <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
                     <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                     <span class="qq-upload-size-selector qq-upload-size"></span>
-                    <button class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
-                    <button class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
-                    <button class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
+                    <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
+                    <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
+                    <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
                     <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                 </li>
             </ul>
 
             <dialog class="qq-alert-dialog-selector">
                 <div class="qq-dialog-message-selector"></div>
                 <div class="qq-dialog-buttons">
-                    <button class="qq-cancel-button-selector">Close</button>
+                    <button type="button" class="qq-cancel-button-selector">Close</button>
                 </div>
             </dialog>
 
             <dialog class="qq-confirm-dialog-selector">
                 <div class="qq-dialog-message-selector"></div>
                 <div class="qq-dialog-buttons">
-                    <button class="qq-cancel-button-selector">No</button>
-                    <button class="qq-ok-button-selector">Yes</button>
+                    <button type="button" class="qq-cancel-button-selector">No</button>
+                    <button type="button" class="qq-ok-button-selector">Yes</button>
                 </div>
             </dialog>
 
             <dialog class="qq-prompt-dialog-selector">
                 <div class="qq-dialog-message-selector"></div>
                 <input type="text">
                 <div class="qq-dialog-buttons">
-                    <button class="qq-cancel-button-selector">Cancel</button>
-                    <button class="qq-ok-button-selector">Ok</button>
+                    <button type="button" class="qq-cancel-button-selector">Cancel</button>
+                    <button type="button" class="qq-ok-button-selector">Ok</button>
                 </div>
             </dialog>
         </div>

diff --git a/client/html/templates/gallery.html b/client/html/templates/gallery.html
@@ -38,8 +38,8 @@
                     <div class="qq-thumbnail-wrapper">
                         <img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale>
                     </div>
-                    <button class="qq-upload-cancel-selector qq-upload-cancel">X</button>
-                    <button class="qq-upload-retry-selector qq-upload-retry">
+                    <button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button>
+                    <button type="button" class="qq-upload-retry-selector qq-upload-retry">
                         <span class="qq-btn qq-retry-icon" aria-label="Retry"></span>
                         Retry
                     </button>
@@ -51,13 +51,13 @@
                         </div>
                         <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                         <span class="qq-upload-size-selector qq-upload-size"></span>
-                        <button class="qq-btn qq-upload-delete-selector qq-upload-delete">
+                        <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">
                             <span class="qq-btn qq-delete-icon" aria-label="Delete"></span>
                         </button>
-                        <button class="qq-btn qq-upload-pause-selector qq-upload-pause">
+                        <button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause">
                             <span class="qq-btn qq-pause-icon" aria-label="Pause"></span>
                         </button>
-                        <button class="qq-btn qq-upload-continue-selector qq-upload-continue">
+                        <button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
                             <span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
                         </button>
                     </div>
@@ -67,24 +67,24 @@
             <dialog class="qq-alert-dialog-selector">
                 <div class="qq-dialog-message-selector"></div>
                 <div class="qq-dialog-buttons">
-                    <button class="qq-cancel-button-selector">Close</button>
+                    <button type="button" class="qq-cancel-button-selector">Close</button>
                 </div>
             </dialog>
 
             <dialog class="qq-confirm-dialog-selector">
                 <div class="qq-dialog-message-selector"></div>
                 <div class="qq-dialog-buttons">
-                    <button class="qq-cancel-button-selector">No</button>
-                    <button class="qq-ok-button-selector">Yes</button>
+                    <button type="button" class="qq-cancel-button-selector">No</button>
+                    <button type="button" class="qq-ok-button-selector">Yes</button>
                 </div>
             </dialog>
 
             <dialog class="qq-prompt-dialog-selector">
                 <div class="qq-dialog-message-selector"></div>
                 <input type="text">
                 <div class="qq-dialog-buttons">
-                    <button class="qq-cancel-button-selector">Cancel</button>
-                    <button class="qq-ok-button-selector">Ok</button>
+                    <button type="button" class="qq-cancel-button-selector">Cancel</button>
+                    <button type="button" class="qq-ok-button-selector">Ok</button>
                 </div>
             </dialog>
         </div>

diff --git a/client/html/templates/simple-thumbnails.html b/client/html/templates/simple-thumbnails.html
@@ -40,34 +40,34 @@
                     <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
                     <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                     <span class="qq-upload-size-selector qq-upload-size"></span>
-                    <button class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
-                    <button class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
-                    <button class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
+                    <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
+                    <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
+                    <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
                     <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                 </li>
             </ul>
 
             <dialog class="qq-alert-dialog-selector">
                 <div class="qq-dialog-message-selector"></div>
                 <div class="qq-dialog-buttons">
-                    <button class="qq-cancel-button-selector">Close</button>
+                    <button type="button" class="qq-cancel-button-selector">Close</button>
                 </div>
             </dialog>
 
             <dialog class="qq-confirm-dialog-selector">
                 <div class="qq-dialog-message-selector"></div>
                 <div class="qq-dialog-buttons">
-                    <button class="qq-cancel-button-selector">No</button>
-                    <button class="qq-ok-button-selector">Yes</button>
+                    <button type="button" class="qq-cancel-button-selector">No</button>
+                    <button type="button" class="qq-ok-button-selector">Yes</button>
                 </div>
             </dialog>
 
             <dialog class="qq-prompt-dialog-selector">
                 <div class="qq-dialog-message-selector"></div>
                 <input type="text">
                 <div class="qq-dialog-buttons">
-                    <button class="qq-cancel-button-selector">Cancel</button>
-                    <button class="qq-ok-button-selector">Ok</button>
+                    <button type="button" class="qq-cancel-button-selector">Cancel</button>
+                    <button type="button" class="qq-ok-button-selector">Ok</button>
                 </div>
             </dialog>
         </div>

diff --git a/docs/features/forms.jmd b/docs/features/forms.jmd
@@ -109,34 +109,34 @@ file that integrates Fine Uploader into an existing form:
                         <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
                         <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                         <span class="qq-upload-size-selector qq-upload-size"></span>
-                        <button class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
-                        <button class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
-                        <button class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
+                        <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
+                        <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
+                        <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
                         <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                     </li>
                 </ul>
 
                 <dialog class="qq-alert-dialog-selector">
                     <div class="qq-dialog-message-selector"></div>
                     <div class="qq-dialog-buttons">
-                        <button class="qq-cancel-button-selector">Close</button>
+                        <button type="button" class="qq-cancel-button-selector">Close</button>
                     </div>
                 </dialog>
 
                 <dialog class="qq-confirm-dialog-selector">
                     <div class="qq-dialog-message-selector"></div>
                     <div class="qq-dialog-buttons">
-                        <button class="qq-cancel-button-selector">No</button>
-                        <button class="qq-ok-button-selector">Yes</button>
+                        <button type="button" class="qq-cancel-button-selector">No</button>
+                        <button type="button" class="qq-ok-button-selector">Yes</button>
                     </div>
                 </dialog>
 
                 <dialog class="qq-prompt-dialog-selector">
                     <div class="qq-dialog-message-selector"></div>
                     <input type="text">
                     <div class="qq-dialog-buttons">
-                        <button class="qq-cancel-button-selector">Cancel</button>
-                        <button class="qq-ok-button-selector">Ok</button>
+                        <button type="button" class="qq-cancel-button-selector">Cancel</button>
+                        <button type="button" class="qq-ok-button-selector">Ok</button>
                     </div>
                 </dialog>
             </div>

diff --git a/docs/features/pause.jmd b/docs/features/pause.jmd
@@ -26,8 +26,8 @@ If you want "pause" and/or "continue" buttons to appear next to your files at th
 add the following to your template:
 
 ```html
-<button class="qq-upload-pause-selector qq-upload-pause">Pause</button>
-<button class="qq-upload-continue-selector qq-upload-continue">Continue</button>
+<button type="button" class="qq-upload-pause-selector qq-upload-pause">Pause</button>
+<button type="button" class="qq-upload-continue-selector qq-upload-continue">Continue</button>
 ```
 These elements must be added under the qq-upload-list-selector container in your template in order for Fine Uploader
 UI to find them.

diff --git a/docs/features/styling.jmd b/docs/features/styling.jmd
@@ -161,7 +161,7 @@ To do this, the file list portion of the template can be modified to include thi
 <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
     <li>
         ...
-        <button class="view-btn hide btn">View</button>
+        <button type="button" class="view-btn hide btn">View</button>
     </li>
 </ul>
 ```

diff --git a/docs/quickstart/02-setting_options-azure.jmd b/docs/quickstart/02-setting_options-azure.jmd
@@ -145,34 +145,34 @@ Now our Fine Uploader page should look something like this:
                     <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
                     <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                     <span class="qq-upload-size-selector qq-upload-size"></span>
-                    <button class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
-                    <button class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
-                    <button class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
+                    <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
+                    <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
+                    <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
                     <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                 </li>
             </ul>
 
             <dialog class="qq-alert-dialog-selector">
                 <div class="qq-dialog-message-selector"></div>
                 <div class="qq-dialog-buttons">
-                    <button class="qq-cancel-button-selector">Close</button>
+                    <button type="button" class="qq-cancel-button-selector">Close</button>
                 </div>
             </dialog>
 
             <dialog class="qq-confirm-dialog-selector">
                 <div class="qq-dialog-message-selector"></div>
                 <div class="qq-dialog-buttons">
-                    <button class="qq-cancel-button-selector">No</button>
-                    <button class="qq-ok-button-selector">Yes</button>
+                    <button type="button" class="qq-cancel-button-selector">No</button>
+                    <button type="button" class="qq-ok-button-selector">Yes</button>
                 </div>
             </dialog>
 
             <dialog class="qq-prompt-dialog-selector">
                 <div class="qq-dialog-message-selector"></div>
                 <input type="text">
                 <div class="qq-dialog-buttons">
-                    <button class="qq-cancel-button-selector">Cancel</button>
-                    <button class="qq-ok-button-selector">Ok</button>
+                    <button type="button" class="qq-cancel-button-selector">Cancel</button>
+                    <button type="button" class="qq-ok-button-selector">Ok</button>
                 </div>
             </dialog>
         </div>

diff --git a/docs/quickstart/02-setting_options-s3.jmd b/docs/quickstart/02-setting_options-s3.jmd
@@ -142,34 +142,34 @@ Now our Fine Uploader page should look something like this:
                     <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
                     <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                     <span class="qq-upload-size-selector qq-upload-size"></span>
-                    <button class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
-                    <button class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
-                    <button class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
+                    <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
+                    <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
+                    <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
                     <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                 </li>
             </ul>
 
             <dialog class="qq-alert-dialog-selector">
                 <div class="qq-dialog-message-selector"></div>
                 <div class="qq-dialog-buttons">
-                    <button class="qq-cancel-button-selector">Close</button>
+                    <button type="button" class="qq-cancel-button-selector">Close</button>
                 </div>
             </dialog>
 
             <dialog class="qq-confirm-dialog-selector">
                 <div class="qq-dialog-message-selector"></div>
                 <div class="qq-dialog-buttons">
-                    <button class="qq-cancel-button-selector">No</button>
-                    <button class="qq-ok-button-selector">Yes</button>
+                    <button type="button" class="qq-cancel-button-selector">No</button>
+                    <button type="button" class="qq-ok-button-selector">Yes</button>
                 </div>
             </dialog>
 
             <dialog class="qq-prompt-dialog-selector">
                 <div class="qq-dialog-message-selector"></div>
                 <input type="text">
                 <div class="qq-dialog-buttons">
-                    <button class="qq-cancel-button-selector">Cancel</button>
-                    <button class="qq-ok-button-selector">Ok</button>
+                    <button type="button" class="qq-cancel-button-selector">Cancel</button>
+                    <button type="button" class="qq-ok-button-selector">Ok</button>
                 </div>
             </dialog>
         </div>