use addEventListener submit

This commit is contained in:
Pieter Lambrecht 2022-09-27 10:44:16 +02:00
parent 845e0c801d
commit 4873233a05
7 changed files with 28 additions and 12 deletions

Binary file not shown.

Binary file not shown.

View File

@ -13,8 +13,6 @@ import { initSideNav } from './sidenav';
import { initRackElevation } from './racks';
import { initLinks } from './links';
import { initHtmx } from './htmx';
// @ts-ignore
import { cleanGetUrl } from './util';
function initDocument(): void {
@ -40,6 +38,14 @@ function initDocument(): void {
}
function initWindow(): void {
const documentForms = document.forms
for (var documentForm of documentForms) {
if (documentForm.method.toUpperCase() == 'GET') {
documentForm.addEventListener('submit', cleanGetUrl)
}
}
const contentContainer = document.querySelector<HTMLElement>('.content-container');
if (contentContainer !== null) {
// Focus the content container for accessible navigation.

View File

@ -482,26 +482,36 @@ export function replaceAll(input: string, pattern: string | RegExp, replacement:
/**
* Disable empty FormElemnts before submitting the form.
*
* @param targetform HTMLFormElement where the FormElements need to be disabled.
* @param this HTMLFormElement where the FormElements need to be disabled.
*/
export function cleanGetUrl(targetform: HTMLFormElement) {
export function cleanGetUrl(this: HTMLFormElement): boolean {
var form_elements = targetform.elements;
var form_elements = this.elements;
for (const element of form_elements) {
for (var element of form_elements) {
// The SELECT statement requires a different approach. It depends on the selectedIndex, rather that the value.
switch (element.nodeName) {
case "SELECT":
const selectElement = element as HTMLSelectElement;
if (selectElement.selectedIndex == null || selectElement.selectedIndex == -1 || selectElement[selectElement.selectedIndex].getAttribute('value') == '') {
if (
selectElement.selectedIndex == null ||
selectElement.selectedIndex == -1 ||
selectElement[selectElement.selectedIndex].getAttribute('value') == ''
) {
element.setAttribute('disabled','');
}
break;
default:
if (element.getAttribute('value') == null) {
element.setAttribute('disabled','');
const inputElement = element as HTMLInputElement;
if (
!inputElement.value ||
inputElement.value == null ||
inputElement.value == ''
) {
inputElement.setAttribute('disabled','');
}
}
}
return true;
}

View File

@ -1,7 +1,7 @@
{% load form_helpers %}
{% load helpers %}
<form action="." method="get" onsubmit="return cleanGetUrl(this)">
<form action="." method="get">
<div class="card">
<div class="card-body overflow-visible d-flex flex-wrap justify-content-between py-3">
{% for field in filter_form.hidden_fields %}

View File

@ -66,7 +66,7 @@
{% else %}
<div class="row">
<div class="col col-12 col-lg-6 offset-lg-3">
<form action="{% url 'search' %}" method="get" class="form form-horizontal" onsubmit="return cleanGetUrl(this)">
<form action="{% url 'search' %}" method="get" class="form form-horizontal">
<div class="card">
<h5 class="card-header">
Search

View File

@ -1,4 +1,4 @@
<form class="input-group" action="{% url 'search' %}" method="get" onsubmit="return util.cleanGetUrl(this)">
<form class="input-group" action="{% url 'search' %}" method="get">
<input
name="q"
type="text"