Radio Buttons auslesen

überlebender · 25. Jun 2024

Hi, ich möchte zwei Radio-Buttons auf meiner Webseite auslesen und das Ergebnis als Text auf der Konsole ausgeben. Die Funktion funktioniert auch, doch wird immer nur das Ergebnis eines Radio-Buttons ausgegeben und der andere wird ignoriert.

Hier mein Code:

Javascript:

HTML:

<h1>Radiobutton auslesen</h1>
        <p>Womit bist Du heute zur Uni gefahren?</p>
        <input type="radio" id="fahrrad" name="fahrzeug">
        <label for="fahrrad"> Fahrrad</label>
        <input type="radio" id="auto" name="fahrzeug">
        <label for="auto">Auto</label>
      
      <button id="sendradio" onclick="radiobuttons()"> abschicken</button>
        
        
        
        
JavaScript:
        
        
        function radiobuttons () {
    
   if (document.getElementById("fahrrad").ckecked) {
      
       console.log("Du bist mit dem Fahrrad gefahren");
      
   } else if  (document.getElementById("auto").checked) {
      
       console.log("Du bist mit dem Auto gefahren");
      
    
    
    
    
          }
    
    
    
}

Konsole:

Du bist mit dem Auto gefahren - egal was ich anklicke. Wieso wird die Option "Fahhrad" ignoriert?

KonradN · 25. Jun 2024

Also Dein Code ist soweit eigentlich korrekt - abgesehen von einem Tippfehler: document.getElementById("fahrrad").ckecked

Und das Formular lädt neu wenn man das event weiter verarbeiten lässt was in der Developer Konsole im Edge die Konsole direkt leer macht ... Daher ist ein event.preventDefault(); hilfreich.

Das funktioniert dann aber bei mir - eine Test HTML Seite sieht dann z.B. so aus:

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Radio Button Prüfung</title>
    <script>
        function radiobuttons () {
            event.preventDefault();
            if (document.getElementById("fahrrad").checked) {
                console.log("Du bist mit dem Fahrrad gefahren");
            } else if  (document.getElementById("auto").checked) {
                console.log("Du bist mit dem Auto gefahren");
            }
        }
    </script>
</head>
<body>
    <form>
        <h1>Radiobutton auslesen</h1>
        <p>Womit bist Du heute zur Uni gefahren?</p>
        <input type="radio" id="fahrrad" name="fahrzeug">
        <label for="fahrrad"> Fahrrad</label>
        <input type="radio" id="auto" name="fahrzeug">
        <label for="auto">Auto</label>

      <button id="sendradio" onclick="radiobuttons()"> abschicken</button>
    </form>
</body>
</html>

Oneixee5 · 25. Jun 2024

Die Nutzung würde so zwar funktionieren ist aber nicht korrekt. Ein Radio-Button soll ein value-Attribut besitzen. Das value-Attribut definiert den eindeutigen Wert, der mit jeder Optionsschaltfläche verbunden ist. Der Wert wird dem Benutzer nicht angezeigt, sondern ist der Wert, der bei "Absenden" an den Server gesendet wird, um festzustellen, welche Optionsschaltfläche ausgewählt wurde.

HTML:

<form id="form" action="/<url/pfad>">
    <h1>Radiobutton auslesen</h1>
    <p>Womit bist Du heute zur Uni gefahren?</p>
    <input type="radio" value="fahrrad" name="fahrzeug">
    <label for="fahrrad"> Fahrrad</label>
    <input type="radio" value="auto" name="fahrzeug">
    <label for="auto">Auto</label>
    <input type="submit" value="abschicken">
</form>

Somit ist JavaScript nicht erforderlich um die Auswahl aus der Form zum Server übertragen.

Möchte man den Inhalt der Form weiter mit JavaScript verarbeiten, dann kann man das action-Attribut der Form weglassen. Das führt dann allerdings zu einer Warnung in Prettier etc.

Javascript:

function logSubmit(event) {
  event.preventDefault();
 
  const formData = new FormData(form);

  const output = document.getElementById("output");
  for (const [key, value] of formData) {
    output.textContent += `${key}: ${value}\n`;
  }
}

const form = document.getElementById("form");
form.addEventListener("submit", logSubmit);

Auf diese Art kann HTML und JS sauber in verschiedene Dateien getrennt werden.

Radio Buttons auslesen

überlebender

Aktives Mitglied

KonradN

Super-Moderator

Oneixee5

Top Contributor

Aktuelle Jobs

Neue Themen

Ähnliche Themen