3 files changed, 50 insertions, 19 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.
  */
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>