aboutsummaryrefslogtreecommitdiff
path: root/bh20simplewebuploader
diff options
context:
space:
mode:
Diffstat (limited to 'bh20simplewebuploader')
-rw-r--r--bh20simplewebuploader/static/main.css7
-rw-r--r--bh20simplewebuploader/static/main.js57
-rw-r--r--bh20simplewebuploader/templates/form.html5
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>