Radio Buttons auslesen

Ü

überlebender

Aktives Mitglied
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

KonradN

Super-Moderator
Mitarbeiter
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

Oneixee5

Top Contributor
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.
 
Zuletzt bearbeitet:
Ähnliche Java Themen
  Titel Forum Antworten Datum
T aktivieren und deaktivieren von radio button Angular, React, JQuery - Fragen zu JavaScript 2
A Anzahl Radion Buttons von MySQL füllen und Auswerten Angular, React, JQuery - Fragen zu JavaScript 4
H alert auf Grundlage von Buttons Angular, React, JQuery - Fragen zu JavaScript 1
Cellsplitter Api auslesen und in Json Datei speichen - Javascript (node js) Angular, React, JQuery - Fragen zu JavaScript 10
G Variablen aus URL auslesen und in HTML darstellen Angular, React, JQuery - Fragen zu JavaScript 1
G Datumsfeld auslesen Angular, React, JQuery - Fragen zu JavaScript 2
P Richtiges Auslesen von mehreren Daten im JSON Format via JavaScript Angular, React, JQuery - Fragen zu JavaScript 2
D Java Aktienkurs auslesen Angular, React, JQuery - Fragen zu JavaScript 2
P Anzahl der Checkboxen auslesen Angular, React, JQuery - Fragen zu JavaScript 4
S Webseitenelemente ansteuern/auslesen Angular, React, JQuery - Fragen zu JavaScript 5
nrg Funktionen von Objekt auslesen Angular, React, JQuery - Fragen zu JavaScript 10
A Mit JavaScript AJAX-Calls auslesen? Angular, React, JQuery - Fragen zu JavaScript 4
G html mit java auslesen Angular, React, JQuery - Fragen zu JavaScript 6
C cd/dvd namen auslesen Angular, React, JQuery - Fragen zu JavaScript 2
F Auslesen unterschiedlicher Marker mit Goole Maps API Angular, React, JQuery - Fragen zu JavaScript 4
K Datei auslesen Angular, React, JQuery - Fragen zu JavaScript 2
H Zelle einer Tabelle auslesen Angular, React, JQuery - Fragen zu JavaScript 2
R zyklisch ein Applet Rückgabewert auslesen, so alle 1-2 sek? Angular, React, JQuery - Fragen zu JavaScript 4
T Anzahl Dateien in Verzeichnis mit JavaScript auslesen Angular, React, JQuery - Fragen zu JavaScript 2
P Wert aus Formular vom anderen Frame auslesen Angular, React, JQuery - Fragen zu JavaScript 2
W Wert aus HTML-Quelltext auslesen Angular, React, JQuery - Fragen zu JavaScript 8
T Quelltext auslesen (Extern) . Intern einfügen. Angular, React, JQuery - Fragen zu JavaScript 2

Ähnliche Java Themen

Aktuelle Jobs

Neue Themen


Oben