Submit

[Cujo]

Hallo,

ich bin gerade dabei ein PHP-Quiz zu programmieren (Multiple-Choice mit 4 Antworten). Die Antworten sollen dabei nicht mittels eines Submit-Buttons abgeschickt werden, sondern mit der Javascript-Funktion submit();.

Wenn ich bei der jeweiligen Antwort auf den Radio-Button klicke, funktioniert das auch einwandfrei. Ich möchte aber auch, dass beim Klicken auf den Text die submit-Funktion ausgeführt wird. Auch das funktioniert soweit. Allerdings wird dann nicht diese PHP-Abfrage ausgeführt:

if(isset($_POST['antwort'])) 

Beim Klick auf den Radio-Button funktioniert es, aber nicht beim Klicken auf den Text.

Es funktioniert weder diese Variante:

echo '<label for="antwort" onclick="this.form.submit();"><input type="radio" name="antwort" value="' .$antworten[0]. '" onclick="this.form.submit();" /> ' .$antworten[0]. '</label><br />'; 

noch diese:

echo '<label for="antwort" name="antwort" onclick="this.form.submit();"><input type="radio" name="antwort" value="' .$antworten[0]. '" onclick="this.form.submit();" /> ' .$antworten[0]. '</label><br />'; 

Habt ihr eine Idee, wie ich das realisieren kann?

Gruß

Cujo

[ein schlauer]

Es wäre interessanter gewesen, wenn du uns den Code, der im Browser ankommt gezeigt hättest, nicht den PHP Code.

[Cujo]

Ich weiß nicht genau, welchen Code du meinst. Meinst du den Inhalt der Fehlerkonsole? Da wird nichts angezeigt.

Ich kann aber mal den Link der Seite posten, auf der ich das Quiz gerade teste:

20. Jahrhundert-Quiz

P. S.

Jetzt weiß ich, was du meinst. Du wolltest den erzeugten HTML-Code sehen. Hier ist er:

<form method="post" action="20-jahrhundert-quiz.html">
<div class="box">
<div class="frage">In welcher Stadt findet man eine Straße mit den Namen "Die große Freiheit"?</div>
<div class="antworten">
<label for="antwort" name="antwort" onclick="this.form.submit();">
<input type="radio" name="antwort" value="Braunschweig" onclick="this.form.submit();" /> Braunschweig
</label>
<br />
<label for="antwort" name="antwort" onclick="this.form.submit();">
<input type="radio" name="antwort" value="Hannover" onclick="this.form.submit();" /> Hannover
</label>
<br />
<label for="antwort" name="antwort" onclick="this.form.submit();">
<input type="radio" name="antwort" value="Bremen" onclick="this.form.submit();" /> Bremen
</label>
<br />
<label for="antwort" name="antwort" onclick="this.form.submit();">
<input type="radio" name="antwort" value="Hamburg" onclick="this.form.submit();" /> Hamburg
</label>
<br />
</div>
<input type="hidden" name="antwortrichtig" value="Hamburg" />
<input type="hidden" name="fragennummer" value="1" />
<input type="hidden" name="richtig" value="0" />
</div>
</form>

[ein schlauer]

Dein Code funktioniert bei mir ohne Probleme. Es ist kein Javascript Problem.

[mikdoe]

Ich möchte aber auch, dass beim Klicken auf den Text die submit-Funktion ausgeführt wird.

Ich glaube, ich weiß ungefähr, um was es dir geht.
Dir reicht es nicht, wenn man bei Radio Feldern auf die Punkte klickt sondern man soll auch auf den Text klicken können, richtig?
Ich mach das immer so:

<div onclick="document.getElementById('radio').checked=true;">Hier der Text vom Radiobutton</div><input id="radio" type="radio" name="xyz" value="N">

Meintest du das?

[Cujo]

Meintest du das?

Ja, genau das habe ich gemeint. Ist gar nicht so einfach zu erklären


Ich habe deinen Code versucht so umzusetzen:

echo '<div onclick="document.getElementById(\"radio\").checked=true;">'.$antworten[0].'</div><input id="radio" type="radio" name="antwort" value="' .$antworten[0]. '" /><br />'; 

So funktioniert es leider gar nicht

Es ist übrigens leicht zu erkennen, ob es funktioniert oder nicht. Wenn die Ausgabe "test" oberhalb der Frage erscheint, hat es funktioniert, ansonsten nicht.

[kicia]

jede id darf nur einmal vorkommen. Du müsstest also "radio1", "radio2", ... usw. schreiben.

Ich weiss gar nicht... kann der HTML parser auch die Anführungszeichen escapen? Und auch wenn ja, hätte ich vermutet, dass man \\" schreiben muss, damit der backslash nicht schon bei php rausfliegt. Scheint aber ja im HTML Quelltext anzukommen.Wieso? Werden bei PHP nur die Zeichen escaped, die sonst probleme machen?
Auf jeden Fall sollte ...getElementById(\'radio\').. funktionieren (also mit einfachen Anführungszeichen)

edit:
wegen den quotes: hab schon gefunden: www.php.net: strings
PHP sucht womöglich allen ernstes nach den Zeichenfolgen (backslash und Zeichen), statt beim backslash auszusteigen und zu schauen, was danach kommt. (wird echt Zeit für die verbreitung von Python oder Serverside-JS oder sonstwas zeitgemässes)

[Cujo]

jede id darf nur einmal vorkommen. Du müsstest also "radio1", "radio2", ... usw. schreiben.

Auf jeden Fall sollte ...getElementById(\'radio\').. funktionieren (also mit einfachen Anführungszeichen)

Ich hab's jetzt so geändert:

echo '<div onclick="document.getElementById(\'radio\').checked=true;">'.$antworten[0].'</div><input id="radio0" type="radio" name="antwort" value="' .$antworten[0]. '" /><br />'; 

Funktioniert aber immer noch nicht.

[kicia]

Funktioniert aber immer noch nicht.

klar, wenn du die ID änderst musst Du auch den Zugriff darauf ändern, also das getElementById.

Poste lieber den HTML Quelltext, nicht PHP

[Cujo]

klar, wenn du die ID änderst musst Du auch den Zugriff darauf ändern, also das getElementById.

Ich hab's geändert.

Poste lieber den HTML Quelltext, nicht PHP

okay

<form method="post" action="20-jahrhundert-quiz.html">
<div class="box">
<div class="frage">Wie viele Bytes hat ein Kilobyte?</div>
<div class="antworten">
<div onclick="document.getElementById('radio0').checked=true;">8</div>
<input id="radio0" type="radio" name="antwort" value="8" /><br />
<div onclick="document.getElementById('radio1').checked=true;">64</div>
<input id="radio1" type="radio" name="antwort" value="64" /><br />
<div onclick="document.getElementById('radio2').checked=true;">256</div>
<input id="radio2" type="radio" name="antwort" value="256" /><br />
<div onclick="document.getElementById('radio3').checked=true;">1024</div>
<input id="radio3" type="radio" name="antwort" value="1024" /><br />
<input type="hidden" name="antwortrichtig" value="1024" />
<input type="hidden" name="fragennummer" value="1" />
<input type="hidden" name="richtig" value="0" />
</div>
</form>

[ein schlauer]

Ach so, jetzt habe ich es verstanden. Das onlick auf dem Label ist unnötig. Aber du brauchst IDs für die Elemente.

<div class="antworten">
<label for="Braunschweig">
<input type="radio" name="antwort" id="Braunschweig" value="Braunschweig" onclick="this.form.submit();" /> Braunschweig
</label>
<br />
<label for="Hannover">
<input type="radio" id="Hannover" name="antwort" value="Hannover" onclick="this.form.submit();" /> Hannover
</label>
<br />
<label for="Bremen">
<input type="radio" id="Bremen" name="antwort" value="Bremen" onclick="this.form.submit();" /> Bremen
</label>
<br />
<label for="hamburg">
<input type="radio" name="antwort"  id="hamburg" value="Hamburg" onclick="this.form.submit();" /> Hamburg
</label>
<br />
</div>

[Cujo]

So hat es funktioniert. Vielen Dank an alle für die Hilfe

[kkapsner]

Soweit ich weiß, sind die IDs nicht unbedingt nötig. Wenn der <input type="radio"> innerhalb des <label>s ist, werden die automatisch zueinander zugeordnet (im FF ist das jedenfalls so...).

Im IE ist's genauso und ich glaube, das ist auch dokumentiertes Verhalten.

[ein schlauer]

Dachte ich auch, hat aber bei mir nicht funktioniert.

EDIT: Nein, du hast recht, das label darf einfach kein for Attribut haben, dann geht's.

[ein schlauer]

Also, for, id und onclick sind unnötig:

<div class="antworten">
<label>
<input type="radio" name="antwort" value="Braunschweig" onclick="this.form.submit();" /> Braunschweig
</label>
<br />
<label>
<input type="radio" name="antwort" value="Hannover" onclick="this.form.submit();" /> Hannover
</label>
<br />
<label>
<input type="radio" name="antwort" value="Bremen" onclick="this.form.submit();" /> Bremen
</label>
<br />
<label>
<input type="radio" name="antwort" value="Hamburg" onclick="this.form.submit();" /> Hamburg
</label>
<br />
</div>