streamlined behavior of form modal on different events:

- enter key
- escape key
- click close button
- click submit button
- click cancel button
- click outside of modal

note: right now the corrections only affect genre.html; changes will need to be carried over to other templates

the_works/static/js/modal.js

@@ -11,10 +11,11 @@ function initModal(modal_id, input_ids, headings, form_actions) {
   for (const el of document.querySelectorAll('.action-update')) { 
     el.addEventListener("click", event => showDialog(modal_id, input_ids, headings[1], form_actions[1], input_ids.map(input => event.currentTarget.dataset[input.slice(5).toLowerCase()]), event.currentTarget.dataset.id));
   }
-  // add event listener to close button
+/*   // add event listener to close button
-  document.querySelector("dialog button.modal-close").addEventListener("click", event => {
+   document.querySelector("dialog button.modal-close").addEventListener("click", event => {
     event.target.closest("dialog").close();
-  });
+    event.preventDefault();
+  });  */
 }
 
 
@@ -27,6 +28,7 @@ function showDialog(modal_id, input_ids, heading, form_action, input_values, url
   // set modal attributes
   document.getElementById("dialog-heading").textContent = heading;
   document.getElementById("form_submit").formAction = form_action;
+  document.getElementById("form_submit").form.action = form_action;
   for (var i = 0; i < input_ids.length; i++ ) {
     document.getElementById(input_ids[i]).value = input_values[i] || "";
   }

the_works/templates/views/genre.html

@@ -32,10 +32,10 @@
 
 <dialog aria-labelledby="dialog-heading" id="genre-modal">
   <article>
-    <form id="genre_detail_form" method="dialog">
+    <form id="genre_detail_form" method="post" action="{{ url_for('genre.create') }}">
       <header>
-        <button class="modal-close" aria-label="close" rel="prev" formnovalidate></button>
+        <button class="modal-close" aria-label="close" formmethod="dialog" formnovalidate rel="prev"></button>
-        <h1 id="dialog-heading">#</h1>
+        <h1 id="dialog-heading" />
       </header>
 
       <fieldset>