mit input type radio formular absenden

[Apolle]

Hallo,

kann man mit eine <input type="radio" name="x"> ein Formular absenden, und wenn ja - wie?

onclick , onchecked scheint nicht zu funktionieren.

Gruß Rainer

[Gunnar Bittersmann]

@@Apolle

kann man mit eine <input type="radio" name="x"> ein Formular absenden, und wenn ja - wie?

Warum sollte man das tun wollen? Was ist dein Anwendungsfall?

🖖 Живіть довго і процвітайте

[Apolle]

Ich habe ein Formular mit 2 radio.

<input type=radio" name="x" value="1"> <input type=radio" name="x" value="2">

Sobald ein radio ausgewählt wird soll das Formular abgeschickt werden.

[Gunnar Bittersmann]

@@Apolle

Sobald ein radio ausgewählt wird soll das Formular abgeschickt werden.

Nein, das soll bei einem Formular i.d.R. nicht der Fall sein.

Womöglich missbrauchst du das Formular mit den Radiobuttins für etwas anderes? Möglicherweise ein Formular mit zwei Submit-Buttons? Oder etwas ganz anderes?

Deshalb frage ich nach dem Anwendungsfall.

🖖 Живіть довго і процвітайте

[Apolle]

Ja, etwas ganz anderes. https://check5.de/uf

Ist für eine Steele (Touchscreen) die vorwiegend von älteren Leuten geklickt werden wird. Mit dem (Absenden) wird es angeblich zu kompliziert. Sie hätten halt das Form gern mit jeder Auswahl abgesendet.

Ist das nun mit JS machbar oder nicht?

[Gunnar Bittersmann]

@@Apolle

Ja, etwas ganz anderes. https://check5.de/uf

Ich hab das mal verlinkt. Beim nächstes Mal machst du das bitte.

Ist das nun mit JS machbar oder nicht?

Es ist mit HTML machbar.

Wie ich vermutet hatte, sind mehrere Submit-Buttons die Lösung – jeweils mit anderem Wert fürs value-Attribut:

<form action="…">
  <button value="yay">…</button>
  <button value="geht so">…</button>
  <button value="meh">…</button>
</form>

Mit „und die 2 Frage hinterher“[sic!] wird’s dann natürlich nichts, aber das willst du ja auch nicht.

---

Es ist löblich, dass du labels vorgehen hast und die mit for auch verknüpft hast. Das bringt aber nichts, wenn in den labels keine Beschriftung drin ist. Deine Bilder brauchen Alternativtexte!

Und BTW, left: -9999px? Nein, aus Gründen.

☞ Wie man Inhalte visuell versteckt

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar Bittersmann,

Wie ich vermutet hatte, sind mehrere Submit-Buttons die Lösung

Wenn er 2 Fragen stellt, braucht er 2 Antworten. Und dann geht's mMn nicht mit Buttons. Bei einer Einzelfrage (wie man es oft in Kaufhäusern sieht, wo man einen Button für "gut, mau, urgh" hämmern soll), DA gehen definitiv Buttons und JS ist unnötig, ja.

Statt des JS Gedönsraths könnte man auch 2 Forms nacheinander anzeigen, jedes mit einer Frage. Aber dann stellt sich die Frage, was auf dem 2. Form passieren soll, wenn der Besucher nur die 1. Frage beantwortet und dann weggeht. Da braucht's dann wohl einen "Geh Zurück" Timeout.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Wenn er 2 Fragen stellt, braucht er 2 Antworten. Und dann geht's mMn nicht mit Buttons.

2 Fragen steht im Widerspruch zu „Sie hätten halt das Form gern mit jeder Auswahl abgesendet.“

Wenn gleich nach der Antwort abgeschickt werden soll, kann man auf einer Seite nur eine Frage stellen. Die nächste Frage dann auf der nächsten Seite.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Apolle,

ist diese check5-Seite die, auf der das gemacht werden soll? In dem Fall wäre dein Wunsch kontraproduktiv, weil ja 2 Fragen zu beantworten sind.

Vom wüsten HTML red ich lieber gar nicht, das sieht nach Wordpress aus und vermutlich kommt das ganze div Geraffel nicht von Dir, sondern von WP oder irgendwelchen Plugins. Wenn doch: das geht garantiert cleaner.

Einen Radiobutton mit left:-9999px zu verstecken ist ein Antipattern. Das scheint zu funktionieren, führt aber dazu, dass der Browser einen Viewport aufbaut, der unnötige 10000 Pixel zu breit ist. Das kostet zumeist über 10 MB Speicher! Gerade auf einer Stele, die vermutlich einen schwachbrüstigen Computer enthält, kann das kritisch sein. Schau Dir die Klasse visually-hidden an, die im Wiki unter Dropdown-Menü verwendet wird. Nimm diese Regel in dein Stylesheet und gib deinen input type=radio Elemente diese Klasse.

Wenn Du zwei Sets von Radiobuttons hast, hast Du eine weitere Anforderung. Der Submit sollte erst passieren, wenn in beiden Sets etwas ausgewählt wurde. Denn andernfalls bekommt der Server nach der ersten Auswahl Nachricht, und nach der zweiten Auswahl auch.

Zu den Events: click könnte gehen, kommt aber vermutlich zu früh. Ein checked-Event gibt es nicht. Du brauchst input oder change, bei einem Radiobutton ist das egal.

Mein Vorschlag wäre:

• registriere einen input Handler auf dem Form (nicht auf jedem Radiobutton einzeln - die input Events blubbern vom Radio zum Form hoch)
• frage im input-Handler ab, ob in beiden Radiogruppen etwas ausgewählt wurde. Wenn ja, submitte das Form. Bspw. so:

   const uf = document.forms.uf;
   const f4 = uf.querySelector("[name='4']:checked");
   const f5 = uf.querySelector("[name='5']:checked");
   const complete =  f4 && f5;
   if (complete) {
      form.style="pointer-events: none";
      setTimeout(function() { uf.submit(); }, 1000)
   }

Das sollte zu einem Reload der Seite führen, wodurch die Buttons wieder ungecheckt gesetzt werden.

Dieser Submit im input-Event sorgt allerdings dafür, dass man die Animation des zweiten Buttons nicht mehr sieht. Deshalb hab ich den setTimeout hinzugefügt, der wartet eine Sekunde, bis er das Form abschickt. Und damit nach dem Aktivieren des zweiten Radiobuttons keine weiteren Klicks mehr akzeptiert werden, setze ich das Form auf pointer-events:none.

Für eine Stele ist das OK, die hat keine Tastatur oder sonstige Zusatzinputs, nur den Touchscreen. Auf einem PC würde pointer-events:none immer noch die Tastatur erlauben. Oder eine Sprachsteuerung.

Und dann brauchst Du eigentlich auch noch eine Logik, die nach X Sekunden zuschlägt, wenn einer der beiden Buttons gedrückt wurde, aber der zweite nicht. Dann kannst Du entweder den gedrückten Button zurücksetzen, oder das Form mit dem einen gedrückten Button abschicken.

Basisbeispiel - mit addEventListener statt oninput:

<form method="get" name="uf" action="#">
  <input type="radio" name="4" value="a">
  <input type="radio" name="4" value="b">
  <input type="radio" name="4" value="c">
  <input type="radio" name="5" value="a">
  <input type="radio" name="5" value="b">
  <input type="radio" name="5" value="c">
</form>

Script:

document.addEventListener("DOMContentLoaded", function() {
   let watchdog = 0;
   let form = documents.form.uf;   
   form.addEventListener("input", handleInput);

   function handleInput(event) {
      let f4 = form.querySelector("[name='4']:checked");
      let f5 = form.querySelector("[name='5']:checked");

      if (f4 && f5) { 
         setTimeout(function() { form.submit(); }, 2000);
      }
      
      if (watchdog)
         clearTimeout(watchdog);
      watchdog = setTimeout(resetChecked, 5000);
   }
   
   function resetChecked() {
      let f4 = form.querySelector("[name='4']:checked"),
          f5 = form.querySelector("[name='5']:checked");
      if (f4) f4.checked = false;
      if (f5) f5.checked = false;   
   }
});

Das Einpacken in einen DOMContentLoaded-Handler kannst Du Dir sparen, wenn das Script entweder im Body hinter dem Form steht, oder wenn Du es mit der defer-Option laden kannst. Weiß nicht was WP hergibt.

Rolf

[Apolle]

Das sieht schon mal ganz gut aus. Das Form soll allerdings immer abgeschickt werden sobald ein Radio ausgewählt wird, egal welches. Ich muss also nicht warten bis ein 2-er angeklickt wird. Das HTML stammt aus WP. Da es am Ende mit einer BlankPage als Template ausgeliefert wird Bau ich das noch auf die Xbox um.

[Rolf B]

Hallo Apolle,

dann mach es wie Gunnar sagte und nimm Buttons. Kein Javascript.

Rolf

[Apolle]

Ich bin mir absolut sicher das ich flexbox geschrieben hatte.

[Gunnar Bittersmann]

@@Apolle

Ich bin mir absolut sicher das ich flexbox geschrieben hatte.

Heite ist ein x-beliebiger Tag: Twitter heißt jetzt X, Flexbox heißt XBox. X!Box?

„Maybe Musk bought Twitter for the only reason to annoy everyone here on a weekly basis. #TwitterX“ —Annette Dittert

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Apolle,

Ich bin mir absolut sicher das ich flexbox geschrieben hatte.

Ja. Hm. Und was hat das jetzt mit dem Thread hier zu tun?

Rolf

[MudGuard]

Hi,

Ich bin mir absolut sicher das ich flexbox geschrieben hatte.

Ja. Hm. Und was hat das jetzt mit dem Thread hier zu tun?

Guckst Du letzte Zeile im Posting von 24.07.2023 19:32 in diesem Thread …

cu,
Andreas a/k/a MudGuard