diff options
| -rw-r--r-- | bh20simplewebuploader/static/main.css | 7 | ||||
| -rw-r--r-- | bh20simplewebuploader/static/main.js | 57 | ||||
| -rw-r--r-- | bh20simplewebuploader/templates/form.html | 5 |
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> |