created Frontend Page
This commit is contained in:
schrom01
parent
c206ea3250
commit
dd28dc1c99
95
index.php
95
index.php
|
|
@ -18,28 +18,11 @@
|
||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sitzInput:focus {outline: 3px solid #ddd;}
|
#sitzInput {outline: 3px solid #ddd;}
|
||||||
|
|
||||||
|
.button-small {
|
||||||
.dropdown {
|
font-size: 0.7rem;
|
||||||
position: relative;
|
padding: 0% 1%;
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-content {
|
|
||||||
position: absolute;
|
|
||||||
background-color: #f6f6f6;
|
|
||||||
min-width: 230px;
|
|
||||||
overflow: auto;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-content a {
|
|
||||||
color: black;
|
|
||||||
padding: 12px 16px;
|
|
||||||
text-decoration: none;
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown a:hover {background-color: #ddd;}
|
.dropdown a:hover {background-color: #ddd;}
|
||||||
|
|
@ -69,17 +52,59 @@
|
||||||
|
|
||||||
<form action="submit.php" method="post">
|
<form action="submit.php" method="post">
|
||||||
<label for="firmenname">Firmenname:</label>
|
<label for="firmenname">Firmenname:</label>
|
||||||
|
<p>* kann als Platzhalter verwendet werden</p>
|
||||||
<input type="text" id="firmenname" name="firmenname"><br><br>
|
<input type="text" id="firmenname" name="firmenname"><br><br>
|
||||||
|
|
||||||
<label for="kanton">Kanton:</label>
|
<label for="kanton">Kanton:</label>
|
||||||
<div id="kantonauswahl" class="scrollWindow">
|
<div id="kantonauswahl" class="scrollWindow" onclick="filterFunction()">
|
||||||
|
|
||||||
</div><br><br>
|
</div><br><br>
|
||||||
|
|
||||||
<label for="sitz">Sitz (Postleitzahl / Gemeinde):</label><br>
|
<label for="sitz">Sitz (Postleitzahl / Ort):</label><br>
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<div id="gemeindeDropdown" class="dropdown-content">
|
<div id="gemeindeDropdown" class="dropdown-content">
|
||||||
<input type="text" placeholder="Postleitzahl / Ort" id="sitzInput" onkeyup="filterFunction()" onchange="filterFunction()" name="sitzfilter" autocomplete="off">
|
<table style="width: 100%">
|
||||||
|
<td>
|
||||||
|
<input type="text" placeholder="suchen (PLZ oder Ort)" id="sitzInput" onkeyup="filterFunction()" onchange="filterFunction()" name="sitzfilter" autocomplete="off">
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="button-small" onclick="gefundeneGemeindenAuswählen()">Alle Ergebnise auswählen</button>
|
||||||
|
<button type="button" class="button-small" onclick="ausgewählteGemeindenLöschen()">Auswahl löschen</button>
|
||||||
|
<button type="button" class="button-small" onclick="alleGemeindenAnzeigen()">Alle anzeigen</button>
|
||||||
|
<button type="button" class="button-small" onclick="nurAusgewählteGemeindenAnzeigen()">Nur ausgewählte anzeigen</button>
|
||||||
|
</td>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
function alleGemeindenAnzeigen() {
|
||||||
|
sitzInput.value = ""
|
||||||
|
filterFunction()
|
||||||
|
}
|
||||||
|
|
||||||
|
function nurAusgewählteGemeindenAnzeigen() {
|
||||||
|
sitzInput.value = "(nur ausgewählte)"
|
||||||
|
filterFunction()
|
||||||
|
}
|
||||||
|
|
||||||
|
function ausgewählteGemeindenLöschen() {
|
||||||
|
sitzauswahl.querySelectorAll('input[type="checkbox"]').forEach(function(checkbox) {
|
||||||
|
checkbox.checked = false;
|
||||||
|
})
|
||||||
|
filterFunction()
|
||||||
|
}
|
||||||
|
|
||||||
|
function gefundeneGemeindenAuswählen() {
|
||||||
|
sitzauswahl.querySelectorAll('input[type="checkbox"]').forEach(function(checkbox) {
|
||||||
|
if(checkbox.parentNode.parentNode.style.display !== "none")
|
||||||
|
checkbox.checked = true;
|
||||||
|
})
|
||||||
|
filterFunction()
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<div id="sitzauswahl" class="scrollWindow">
|
<div id="sitzauswahl" class="scrollWindow">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -123,7 +148,7 @@
|
||||||
<input type="checkbox" id="phonetischeSuche" name="phonetischeSuche">
|
<input type="checkbox" id="phonetischeSuche" name="phonetischeSuche">
|
||||||
<label for="phonetischeSuche">Phonetische Suche</label><br><br>
|
<label for="phonetischeSuche">Phonetische Suche</label><br><br>
|
||||||
|
|
||||||
<input type="submit" value="Suchergebnisse herunterladen">
|
<input type="submit" value="Suchergebnisse exportieren">
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -227,24 +252,14 @@
|
||||||
|
|
||||||
const sitzInput = document.getElementById('sitzInput');
|
const sitzInput = document.getElementById('sitzInput');
|
||||||
const sitzauswahl = document.getElementById('sitzauswahl');
|
const sitzauswahl = document.getElementById('sitzauswahl');
|
||||||
sitzauswahl.style.display = 'none';
|
const gemeindedropdown = document.getElementById('gemeindeDropdown');
|
||||||
sitzInput.addEventListener('focus', () => {
|
sitzauswahl.style.display = 'block';
|
||||||
|
|
||||||
|
gemeindedropdown.addEventListener('focusin', () => {
|
||||||
|
console.log("focusin")
|
||||||
sitzauswahl.style.display = 'block';
|
sitzauswahl.style.display = 'block';
|
||||||
});
|
});
|
||||||
|
|
||||||
sitzInput.addEventListener('blur', () => {
|
|
||||||
setTimeout(() => {
|
|
||||||
sitzauswahl.style.display = 'none';
|
|
||||||
}, 100); // 1000 milliseconds = 1 second
|
|
||||||
});
|
|
||||||
|
|
||||||
// sitzauswahl.addEventListener('click', function(event) {
|
|
||||||
// setTimeout(() => {
|
|
||||||
// sitzInput.focus();
|
|
||||||
// sitzauswahl.style.display = 'block';
|
|
||||||
// console.log("exec")
|
|
||||||
// }, 150)
|
|
||||||
// })
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue