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.

2 files changed, 48 insertions, 16 deletions

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.
  */