From fa04ea5388a46746bc219e9bd4adef1d973b9d19 Mon Sep 17 00:00:00 2001
From: Adam Novak
Date: Tue, 5 May 2020 14:51:51 -0700
Subject: Add back necessary form-swapping javascript

This partially reverts 03cbed808805ccdbff639eaa67e8f8b26c7275b3.

Unless we actually take the inactive form fields out of the form in the DOM,
their "required" attributes will prevent form submission. We can't just hide
them.
---
 bh20simplewebuploader/static/main.css     |  7 ----
 bh20simplewebuploader/static/main.js      | 57 ++++++++++++++++++++++++++-----
 bh20simplewebuploader/templates/form.html |  5 ++-
 3 files changed, 50 insertions(+), 19 deletions(-)

(limited to 'bh20simplewebuploader')

diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css
index 5c3d568..c881253 100644
--- a/bh20simplewebuploader/static/main.css
+++ b/bh20simplewebuploader/static/main.css
@@ -235,13 +235,6 @@ footer {
 .sponsors img {
     width: 100%;
 }
-.metadata input#metadata_upload:checked ~ #metadata_upload_form_spot {
-    display: block;
-}
-
-.metadata input#metadata_upload ~ #metadata_upload_form_spot {
-    display: none;
-}
 
 .loader {
     display: block;
diff --git a/bh20simplewebuploader/static/main.js b/bh20simplewebuploader/static/main.js
index 6a1daa6..56213fa 100644
--- a/bh20simplewebuploader/static/main.js
+++ b/bh20simplewebuploader/static/main.js
@@ -34,18 +34,57 @@ let fetchAllaccessions = () => {
   fetchAPI("/api/getAllaccessions");
 };
 
-/**
- * Show form if checked
+/*
+ * Make sure that only one of the manual metadata entry and metadata upload
+ * form components is *actually* a child of the form element in the DOM.
+ *
+ * Because both make use of the "required" attribute, we can't get away with
+ * just hiding the one we don't want the user to fill in. The hidden part will
+ * still have possibly empty required fields and (some) browsers will
+ * blocksubmission because of it. Moreover, the data (including file uploads)
+ * from the hidden elements will still be sent to the server, which the user
+ * may not expect.
  */
-let fillFormSpot = document.getElementById('metadata_fill_form_spot');
-function displayForm() {
-  if (document.getElementById('metadata_form').checked) {
-    fillFormSpot.classList.remove("invisible");
-    return;
-  }
-  fillFormSpot.classList.add("invisible");
+
+let uploadForm = document.getElementById('metadata_upload_form')
+let uploadFormSpot = document.getElementById('metadata_upload_form_spot')
+let fillForm = document.getElementById('metadata_fill_form')
+let fillFormSpot = document.getElementById('metadata_fill_form_spot') 
+
+function setUploadMode() {
+  // Make the upload form the one in use.
+  uploadFormSpot.appendChild(uploadForm)
+  // Remove the upload form from the DOM so its required-ness does not block submission.
+  fillFormSpot.removeChild(fillForm)
+}
+
+function setFillMode() {
+  // Make the fillable form the one in use
+  uploadFormSpot.removeChild(uploadForm)
+  // Remove the fillable form from the DOM so its required-ness does not block submission.
+  fillFormSpot.appendChild(fillForm)
 }
 
+function setMode() {
+  // Pick mode based on radio
+  if (document.getElementById('metadata_upload').checked) {
+    setUploadMode()
+ } else {
+    setFillMode()
+ }
+}
+
+/*
+ * Machinery for variable-length lists of input items.
+ */
+
+// Start in mode appropriate to selected form item.
+// It is important that we run this code when the page starts! The browser may
+// have set the radio button to whatever the state was on last page load,
+// instead of the default state, without raising an event, and we have to
+// handle that.
+setMode()
+
 /**
  * Add another form field to the group this button is part of.
  */
diff --git a/bh20simplewebuploader/templates/form.html b/bh20simplewebuploader/templates/form.html
index ed4c9fb..1bbf515 100644
--- a/bh20simplewebuploader/templates/form.html
+++ b/bh20simplewebuploader/templates/form.html
@@ -87,9 +87,9 @@
                 <div class="metadata">
                     <label>Select metadata submission method:</label>
                     <br>
-                    <input type="radio" id="metadata_form" name="metadata_type" value="fill" checked  onchange="displayForm()" required>
+                    <input type="radio" id="metadata_form" name="metadata_type" value="fill" checked  onchange="setMode()" required>
                     <label for="metadata_form">Fill in metadata manually</label>
-                    <input type="radio" id="metadata_upload" name="metadata_type" value="upload" onchange="displayForm()" required>
+                    <input type="radio" id="metadata_upload" name="metadata_type" value="upload" onchange="setMode()" required>
                     <label for="metadata_upload">Upload metadata file</label>
                     <br>
                     <small>Make sure the metadata has submitter attribution details.</small>
@@ -153,7 +153,6 @@
 
                 </div>
 
-                <input type="submit">
                 <input class="submit" type="submit" value="Add to Pangenome">
             </form>
         </section>
-- 
cgit v1.2.3