nicht angemeldet
JürgenB
JürgenB
Gunnar Bittersmann
Gunnar Bittersmann
JürgenB
JürgenB
Liebes Forum, ich möchte gerne die Zustände (Farben?) von mehrern Slidern auswerten und dann damit php Dateien ausführen. Etwa so: Wenn Slider 1 checked ist (grün) dann php Datei x1 ausführen wenn Slider uncheked ist(rot) dann php y1 ausführen.
Wenn Slider 2 checked ist (grün) dann php Datei x2 ausführen wenn Slider uncheked ist(rot) dann php y2 ausführen. . . . .
Hier der Code auf dem das ganze aufbauen soll.
Matthias Apsel`<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" />
<link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<style>
main {
background: white;
}
.toggle label {
position: relative;
display: inline-block;
width: 10em;
height: 3.5em;
}
.toggle input {
display: none;
}
.toggle .slider { /* Grundfl?che */
position: absolute;
cursor: pointer;
top: 1.5em;
left: 2em;
width: 4em;
height: 2em;
background-color: #c32e04; /* red */
transition: all .3s ease-in-out;
border-radius: 1em;
}
.toggle .slider:before { /* verschiebbarer Button */
position: absolute;
content: "";
height: 1.6em;
width: 1.6em;
left: 0.2em;
bottom: 0.2em;
background-color: white;
border-radius: 50%;
transition: all .3s ease-in-out;
}
.toggle input:checked + .slider {
background-color: #5a9900; /* green */
}
.toggle input:focus + .slider {
background-color:pink;
box-shadow: 0 0 1px #5a9900;
}
.toggle input:checked + .slider:before {
-webkit-transform: translateX(1.9em); /* Android 4 */
-ms-transform: translateX(1.9em); /* IE9 */
transform: translateX(1.9em);
}
.text .slider:after { /* Text vor dem FlipFlop-Schalter */
position: absolute;
content: "AUS";
color: #c32e04;
font-weight: bold;
height: 1.6em;
left: -2.5em;
bottom: 0.2em;
}
.text input:checked + .slider:after { /* Text hinter dem FlipFlop-Schalter */
position: absolute;
content: "AN";
color: #5a9900;
left: 4.5em;
}
</style>
<title>FlipFlop-Schalter</title>
</head>
<body>
<h1>FlipFlop-Schalter</h1>
<main>
<h2>mit CSS</h2>
<div class="toggle">
<label>
An-/Aus-Schalter1
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
<h2>mit CSS</h2>
<div class="toggle">
<label>
An-/Aus-Schalter2
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
<h2>mit CSS</h2>
<div class="toggle">
<label>
An-/Aus-Schalter3
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
<h2>mit CSS</h2>
<div class="toggle">
<label>
An-/Aus-Schalter4
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
<h2>mit CSS</h2>
<div class="toggle">
<label>
An-/Aus-Schalter5
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
</main>
</body>
</html>`
Geht sowas?
Vielen Dank für Eure Hilfe.
Gruß
mainstream
Hallo,
du kannst mit „klassischer“ Formulartechnik dein PHP aufrufen, und dort dann die Eingaben auswerten.
Du kannst aber auch per Javascript auf das Change-Event der Inputs lauschen und dann per Xmlhttprequest bzw. fetch das php im Hintergrund aufrufen.
Gruß
Jürgen
Hallo Jürgen,
vielen Dank für deine schnelle Antwort. Leider bin ich noch blutiger Anfänger was das Thema anbelangt.
Hast Du vielleicht ein Beispiel für mich in html?
Gruß
Peter
Dass du Anfänger bist sollte dich um so mehr anspornen erstmal selber zu suchen und mal was auszuprobieren. Ich habe es z.B. so mit Javascript versucht:
So kannst du dann auch in der PHP-Datei entscheiden, was du bei welcher checkbox, inklusive Kombinationen, anstellen willst.
$(document).ready(function(){
$('#togglers input').click(function(input){
$.ajax({
method: "POST",
url: "slider.php",
data: $('#togglers').serialize()
})
.done(function(data) {
console.log("Data Saved: " + data);
});
});
});
slider.php
<?php echo rand();
In der Konsole (Taste F12) kommt dann z.B. sowas raus: Data Saved: 133627318
Hallo,
- jQuery einbinden
warum? Event und Ajax geht in reinem Javascript genauso gut. Außerdem geht es ohne Javascript auch. Je nach Umfeld muss es sogar ohne Javascript funktionieren.
Gruß
Jürgen
ja dann mach doch.
@@chorn
Dass du Anfänger bist sollte dich um so mehr anspornen erstmal selber zu suchen und mal was auszuprobieren. Ich habe es z.B. so mit Javascript versucht:
- jQuery einbinden
Das ist nicht das, was man Anfängern als erstes raten sollte.
Wie ich unlängst sagte: Zum Lernen ist jQuery eher schädlich als nützlich. jQuery verschleiert die Zusammenhänge und verleitet dazu, Dummes zu tun.
LLAP 🖖
Kann ich nicht nachvollziehen, ich kenne niemanden der nicht sofort gecheckt hat, dass CSS-Klassen nun mal nicht eindeutig sind, und man es dann mit einem Array zu tun hat. Ich setze das Unverständnis auch einfach nicht voraus - weiss ja nicht wer das noch mal in Zukunft liest - die Anleitung war hier ja klar
bei allen Inputs
Ich sehe auch nicht, warum ich ihm das Tool wegnehmen soll, anstatt ihm beizubringen es richtig einzusetzen.
Aber poste doch einfach eine Version in Vanilla-JS.
Hallo chorn,
ich kenne niemanden der nicht sofort gecheckt hat, dass CSS-Klassen nun mal nicht eindeutig sind
Und das, obwohl es gar keine CSS-Klassen gibt.
Bis demnächst
Matthias
Zum Lernen ist jQuery eher schädlich als nützlich. jQuery verschleiert die Zusammenhänge und verleitet dazu, Dummes zu tun.
Das macht PHP auch. PHP verschleiert die interne Objektorientierung und kapselt diese in zahllosen Built-In-Funktionen. Typisches Beispiel: __toString(); dahinter verbirgt sich overload. MfG
@@JürgenB
du kannst mit „klassischer“ Formulartechnik dein PHP aufrufen, und dort dann die Eingaben auswerten.
Du kannst aber auch per Javascript auf das Change-Event der Inputs lauschen und dann per Xmlhttprequest bzw. fetch das php im Hintergrund aufrufen.
Wobei der zweite Satz heißen sollte: Du kannst aber auch zusätzlich per Javascript …
LLAP 🖖
Hallo Gunnar,
Wobei der zweite Satz heißen sollte: Du kannst aber auch zusätzlich per Javascript …
das hängt vom Umfeld ab. Ich habe bei einer Spielerei eine Javascript-only-Lösung gewählt, weil ich sicher war, das Javascript in meinem Umfeld funktioniert. Sonst stimme ich zu.
Gruß
Jürgen
Hallo,
hier mal ein Link aus dem Selfwiki:
Den HTML-Tutorial-Bereich hast du ja schon gefunden.
Gruß
Jürgen
hi
ich möchte gerne die Zustände (Farben?) von mehrern Slidern auswerten und dann damit php Dateien ausführen. Etwa so: Wenn Slider 1 checked ist (grün) dann php Datei x1 ausführen wenn Slider uncheked ist(rot) dann php y1 ausführen.
Wenn Slider 2 checked ist (grün) dann php Datei x2 ausführen wenn Slider uncheked ist(rot) dann php y2 ausführen. .
Das ergäbe schonmal 3 PHP-Dateien. Wie soll denn da eine Auswertung vonstatten gehen, hast Du darüber mal nachgedacht? Insbesondere hinsichtlich Wartung, Pflege und Skalierbarkeit. Wir stellen die Frage mal zurück und schauen in die Datenerfassung:
<input type="checkbox">
Davon hast Du mehrere, um an die Eingaben bzw, Zustände zu kommen, bräuchtest Du eine Zuordnung zur Farbe. Eine Solche musst Du auch im Markup abbilden, sonst kommst Du gar nicht an die Daten ran. Diese Beziehung/Zuordnung kannst Du über die Attribute name und id herstellen.
Nun die übertragung, da gibt es 2 Möglichkeiten: per JS (fetch, ajax) oder als Submit. Wenn die Datenübertragung per Submit erfolgen soll, müssen alldie Inputfelder in einem <form> liegen. Ein <form> aber heißt ein action URL -- und nun? Du möchtest mehrere haben.
Weitermachen oder Plan B?