src/components/UrlSubmitForm.svelte

   1 <script>
   2   import { refresh_page } from '../lib/stores.js';
   3
   4   export let page;
   5
   6   function serialize_form(form) {
   7     var params = new URLSearchParams();
   8
   9     Array.prototype.slice.call(form.elements).forEach(function (field) {
  10       if (!field.name || field.disabled || ['submit', 'button'].indexOf(field.type) > -1) return;
  11
  12       if (['checkbox', 'radio'].indexOf(field.type) > -1 && !field.checked) return;
  13       if (typeof field.value === 'undefined' || field.value === '') return;
  14
  15       // Default value for /search endpoint
  16       if (field.name === 'dedupe' && (field.value === 1 || field.value === '1')) return;
  17
  18       params.set(field.name, field.value);
  19     });
  20
  21     return params;
  22   }
  23
  24   // https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
  25   // doesn't support hidden fields, so we check those in an extra step
  26   function validate_field(field) {
  27     if (field.type === 'hidden') {
  28       if (field.value.length) {
  29         if (field.pattern && !field.value.match(field.pattern)) return false;
  30       }
  31     }
  32     return field.checkValidity(); // for hidden field always true
  33   }
  34
  35   function handle_submit(event) {
  36     let form = event.target;
  37
  38     let allow_submit = true;
  39
  40     Array.prototype.slice.call(form.elements).forEach(function (field) {
  41       if (!validate_field(field)) {
  42         alert('Invalid input in ' + field.name);
  43         allow_submit = false;
  44       }
  45     });
  46
  47     if (allow_submit) refresh_page(page, serialize_form(form));
  48   }
  49 </script>
  50
  51 <form on:submit|preventDefault={handle_submit}
  52       class="form-inline"
  53       role="search"
  54       accept-charset="UTF-8"
  55       action="">
  56   <div class="row g-2">
  57     <slot></slot>
  58   </div>
  59 </form>