Klick auf radio Button Feld ein/ausblenden

[Vivienne]

Guten Tag,

mein Code der etwas modifiziert werden soll

<form method="post">
  
  <input type="radio" name="lebensmittel" id="birnen" value="Birnen">
  <label for="birnen">Birnen</label>

  <input type="radio" name="lebensmittel" id="kirschen" value="Kirschen">
  <label for="kirschen">Kirschen</label>

  <input type="radio" name="lebensmittel" id="kivi" value="Kivi">
  <label for="kivi">Kivi</label>

  <input type="radio" name="lebensmittel" id="eigeneFrucht" value="eigeneFrucht">
  <label for="eigeneFrucht">eigene Frucht</label>
  

  <label for="eigeneFrucht">Eigener Preis</label>
  <input type="text" name="lebensmittel" id="eigeneFrucht">
  
  <button type="submit" name="weiter">Alles richtig?</button>

</form>

Die Bereiche 1 - 3 sind Ok, wenn ich auf Kivi klicke, wird auch Kivi übertragen. Jetzt habe ich auf User Wunsch noch ein weiteren Radio Button - eigene Frucht - hinzugefügt. Darunter das passende Text Feld.

Ist es nun möglich wenn ich auf den vierten Radio Button - eigene Frucht - klicke dass erst dann das Text - Feld eingeblendet wird? Wenn ich auf die Radio Buttons 1 - 3 klicke, soll es wieder verschwinden.

Hoffentlich habe ich alles verständlich geschrieben. Wenn noch Fragen sind einfach fragen, ich bin noch bis 15 Uhr in der Schule und vor dem PC :/

[JürgenB]

Hallo,

erst mal hast du einen Fehler in deinem Code: IDs müssen eindeutig sein.

Du kannst den Inputs einen Eventhandler z.B. für onchange geben, der die Displayeigenschaft des Preis-Inputs ändert.

Möglicherweise gibt es auch eine reine CSS-Lösung über die Attribut-Selektoren, aber da müssen andere helfen.

Gruß Jürgen

[Vivienne]

Hallo Jürgen,

erst mal hast du einen Fehler in deinem Code: IDs müssen eindeutig sein.

ok, habe ich verbessert

<form method="post" action="">
  
  <input type="radio" name="lebensmittel" id="birnen" value="Birnen">
  <label for="birnen">Birnen</label>

  <input type="radio" name="lebensmittel" id="kirschen" value="Kirschen">
  <label for="kirschen">Kirschen</label>

  <input type="radio" name="lebensmittel" id="kivi" value="Kivi">
  <label for="kivi">Kivi</label>

  <input type="radio" name="lebensmittel" id="eigeneFrucht" value="eigeneFrucht">
  <label for="eigeneFrucht">eigene Frucht</label>
  

  <label for="eigeneFrucht">Eigener Preis</label>
  <input type="text" name="lebensmittel" id="eigeneFrucht_eingabe">
  
  <button type="submit" name="weiter">Alles richtig?</button>

</form>

[Vivienne]

Hallo Jürgen,

Du kannst den Inputs einen Eventhandler z.B. für onchange geben, der die Displayeigenschaft des Preis-Inputs ändert.

meinst du es vielleicht so?

<form method="post" action="">
  
  <input type="radio" name="lebensmittel" id="birnen" value="Birnen">
  <label for="birnen">Birnen</label>

  <input type="radio" name="lebensmittel" id="kirschen" value="Kirschen">
  <label for="kirschen">Kirschen</label>

  <input type="radio" name="lebensmittel" id="kivi" value="Kivi">
  <label for="kivi">Kivi</label>

  <input type="radio" name="lebensmittel" id="eigeneFrucht" value="eigeneFrucht" onclick="document.getElementById('eigeneFrucht_eingabe').style.display='inline';">
  <label for="eigeneFrucht">eigene Frucht</label>
  
  <br><br>

  <input type="text" name="lebensmittel" id="eigeneFrucht_eingabe">
  
  <br><br>
  <button type="submit" name="weiter">Alles richtig?</button>

</form>

Wird aber alles sehr unübersichtlich irgendwann, zum Schluss sind es 32 Felder, jeweils die Frucht + der dazugehöriger Preis.

PS: Die <br> fliegen vielleicht wieder raus, ich muss etwas Abstand rein bringen.

[MudGuard]

Hi,

ok, habe ich verbessert

aber nicht ganz - das Label Eigener Preis zeigt noch auf den Radiobutton.
Und Kiwi schreibt sich deutsch mit w statt mit v ...

cu,
Andreas a/k/a MudGuard

[Vivienne]

Hallo Andreas,

aber nicht ganz - das Label Eigener Preis zeigt noch auf den Radiobutton.

sorry, ich hatte den falschen Teil aus meinem Code kopiert (wir haben gelernt nur den relevanten Teil zu kopieren). Wie ein Posting weiter oben schon geschrieben zu jeder Frucht gibt es irgendwann auch noch ein Preis, was alles sehr unübersichtlich werden lässt.

Und Kiwi schreibt sich deutsch mit w statt mit v ...

Da ist unser Lehrer sehr streng, wenn bei uns im Buch es mit V geschrieben wird müssen wir es genau so übernehmen / abschreiben. Ich riskiere dafür keine schlechtere Note.

[Vivienne]

Hallo,

so funktioniert es in allen relevanten Browsern, die wir hier auf unserem System haben

<form method="post" action="">
  
  <input type="radio" 
  	 name="lebensmittel" 
         id="birnen" 
         value="Birnen" 
         onclick="document.getElementById('eigeneFrucht_eingabe').style.display='none';">
  
  <label for="birnen">Birnen</label>

  <input type="radio" 
  	 name="lebensmittel" 
         id="kirschen" 
         value="Kirschen" 
         onclick="document.getElementById('eigeneFrucht_eingabe').style.display='none';">
  
  <label for="kirschen">Kirschen</label>

  
  <input type="radio" 
  	 name="lebensmittel" 
         id="kivi" 
         value="Kivi" 
         onclick="document.getElementById('eigeneFrucht_eingabe').style.display='none';">
  
  <label for="kivi">Kivi</label>

  <input type="radio" 
  	 name="lebensmittel" 
         id="eigeneFrucht" 
         value="eigeneFrucht" 
         onclick="document.getElementById('eigeneFrucht_eingabe').style.display='inline';">
  
  <label for="eigeneFrucht">eigene Frucht</label>
  
  <input type="text" name="lebensmittel" id="eigeneFrucht_eingabe">
  
  <button type="submit" name="weiter">Alles richtig?</button>

</form>

Ich finde es zwar alles sehr unübersichtlich.

[Vivienne]

Hallo,

hab mich etwas zu früh gefreut. Wenn ich diesen Code nehme

<form method="post">
  
  <input type="radio" 
  	 name="lebensmittel" 
         id="birnen" 
         value="Birnen" 
         onclick="document.getElementById('eigeneFrucht_eingabe').style.display='none';">
  
  <label for="birnen">Birnen</label>

  <input type="radio" 
  	 name="lebensmittel" 
         id="eigeneFrucht" 
         value="eigeneFrucht" 
         onclick="document.getElementById('eigeneFrucht_eingabe').style.display='inline';">
  
  <label for="eigeneFrucht">eigene Frucht</label>
  
  <br><br>
  <input type="text" name="lebensmittel" id="eigeneFrucht_eingabe">
  
  <br><br> 
  <button type="submit" name="weiter">Alles richtig?</button>

</form>

Und diesen PHP Code

if(isset($_POST['weiter'])){
	echo htmlspecialchars($_POST["lebensmittel"]);
}

erhalte ich eine leere Ausgabe. Nach etwas suchen ist mir aufgefallen, dass anscheinend immer der letzte Wert übernommen wird. In meinem Fall ist es ein leeres Textfeld

<input type="text" name="lebensmittel" id="eigeneFrucht_eingabe">

Dieses wird nun angezeigt, wenn der Radio Button - eigene Frucht - geklickt wurde.

Ich benötige den Wert den ich selber hinzufügen kann, ebenfalls im - $_POST["lebensmittel"] -

Gibt es dafür eine einfache Lösung?

[Vivienne]

Hallo,

hab es hinbekommen (vielleicht geht es auch noch einfacher oder besser)

<form method="post">
  
  <input type="radio" 
  	 name="lebensmittel" 
         id="birnen" 
         value="Birnen" 
         onclick="document.getElementById('eigeneFrucht_eingabe').style.display='none';">
  
  <label for="birnen">Birnen</label>

  <input type="radio" 
  	 name="lebensmittel" 
         id="eigeneFrucht" 
         value="eigeneFrucht" 
         onclick="document.getElementById('eigeneFrucht_eingabe').style.display='inline';">
  
  <label for="eigeneFrucht">eigene Frucht</label>
  
  <br><br>
  <input type="text" name="lebensmittel_eigen" id="eigeneFrucht_eingabe">
  <br><br> 
  <button type="submit" name="weiter">Alles richtig?</button>

</form>

Der passende PHP Code

if(isset($_POST['weiter'])){
	
if ($_POST['lebensmittel'] == "eigeneFrucht") {
	$lebensmittel = $_POST["lebensmittel_eigen"];
}
	
else  {
	$lebensmittel = $_POST["lebensmittel"];
}
	
echo htmlspecialchars($lebensmittel);
}

[JürgenB]

Hallo

Ich finde es zwar alles sehr unübersichtlich.

du kannst und solltest Eventhandler per Javascript setzen:

function clickhandler() {
…
}

document.getElementById("…").onclick = clickhandler;

Gruß Jürgen

[Tabellenkalk]

Hallo,

Und Kiwi schreibt sich deutsch mit w statt mit v ...

Da ist unser Lehrer sehr streng, wenn bei uns im Buch es mit V geschrieben wird müssen wir es genau so übernehmen / abschreiben. Ich riskiere dafür keine schlechtere Note.

Nicht mal im Englischen würde man es mit v schreiben. Warum dein Lehrer für die richtige Schreibweise einer Frucht eine schlechtere Note geben sollte, erschließt sich mir nicht.

Gruß
Kalk

PS: ich beantrage das tag "Rechtschreibung"

[Ole]

Hi

Abgesehen von der JS-Lösung ginge das auch einfacher mit CSS in dem du den General Sibling Combinator in Verbindung mit :checked kombinierst.

Gruß Ole

[Gunnar Bittersmann]

@@Ole

Abgesehen von der JS-Lösung ginge das auch einfacher mit CSS in dem du den General Sibling Combinator in Verbindung mit :checked kombinierst.

Außer auf nicht ganz neuen Androids.

LLAP 🖖