src/components/UrlSubmitForm.svelte

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