diff --git a/index.html b/index.html index fbfa1cb..6ab866d 100644 --- a/index.html +++ b/index.html @@ -231,9 +231,13 @@
Täytä kaikki kentät: osoite, postinumero ja kaupunki.
'; + return; + } checkResult.className = 'check-result loading'; checkResult.style.display = 'block'; checkResult.innerHTML = 'Tarkistetaan saatavuutta...
'; try { - const isZip = /^\d{5}$/.test(q); - const param = isZip ? 'postinumero=' + encodeURIComponent(q) : 'osoite=' + encodeURIComponent(q); - const res = await fetch(API_URL + '?action=saatavuus&key=' + encodeURIComponent(API_KEY) + '&' + param); + const params = 'osoite=' + encodeURIComponent(osoite) + '&postinumero=' + encodeURIComponent(postinumero) + '&kaupunki=' + encodeURIComponent(kaupunki); + const res = await fetch(API_URL + '?action=saatavuus&key=' + encodeURIComponent(API_KEY) + '&' + params); const data = await res.json(); if (data.error) { @@ -338,18 +350,8 @@ document.querySelector('.nav-toggle')?.addEventListener('click', function() { } if (data.saatavilla) { - let html = 'Löysimme ' + data.maara + ' kohde' + (data.maara > 1 ? 'tta' : 'n') + ':
'; - data.kohteet.forEach(function(k) { - html += 'Täytä vieressä oleva lomake niin otamme yhteyttä ja kerromme lisää.
'; } else { checkResult.className = 'check-result nok'; checkResult.innerHTML = 'Kuituliittymää ei löytynyt osoitteellasi, mutta verkkomme laajenee jatkuvasti. Täytä lomake niin kerromme kun kuitu tulee saataville!
'; @@ -361,7 +363,9 @@ document.querySelector('.nav-toggle')?.addEventListener('click', function() { } checkBtn?.addEventListener('click', checkAvailability); - checkInput?.addEventListener('keydown', function(e) { if (e.key === 'Enter') checkAvailability(); }); + [checkAddress, checkZip, checkCity].forEach(function(el) { + el?.addEventListener('keydown', function(e) { if (e.key === 'Enter') checkAvailability(); }); + }); })(); // Saatavuuskysely-lomake diff --git a/style.css b/style.css index e1b7ba3..d0d5c99 100644 --- a/style.css +++ b/style.css @@ -572,13 +572,19 @@ img { margin-bottom: 12px; } -.availability-check-form { +.availability-check-fields { display: flex; + flex-direction: column; gap: 8px; } -.availability-check-form input { - flex: 1; +.availability-check-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; +} + +.availability-check-fields input { padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 8px; @@ -587,7 +593,7 @@ img { transition: border-color 0.2s, box-shadow 0.2s; } -.availability-check-form input:focus { +.availability-check-fields input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232, 137, 29, 0.1);