Ablesung und Überprüfung von Variabeln in HTML Elementen

Question

Guten Abend zusammen,

Situation: Für ein Projekt versuche ich einen simplen HTML Code mit Input Feldern (radio button, textarea). Ziel ist, dass Teilnehmer*innen Stern-Bewertungen und Reviews abgeben.
Ich orientiere mich hierbei an der Anleitung Eigene Formularelemente verwenden (https://www.soscisurvey.de/help/doku.php/de:create:inputs-custom) aber komme nicht weiter.

Aktueller HTML Textbaustein:

<script type="text/javascript">
    function changeRating(){
        //simpler Code der Sterne korrekt färbt
        }
    }
</script>
<style>
    //CSS Stuff
</style>

<p class="prompt">Here comes the prompt!</p>
<div class="gridBox">
    <div>
        <h1 class="">Name of the Place</h1>
        <img class="exampleImg" src="">
        <p class="srcInd">image source indication</p>
    </div>
    <div class="inputArea">
        <h2>Your Review:</h2>
        <div class="rate" onchange="changeRating()">
            <input type="radio" id="star1" name="rating" value="1"><label for="star1" title="text">★</label>
            <input type="radio" id="star2" name="rating" value="2"><label for="star2" title="text">★</label>
            <input type="radio" id="star3" name="rating" value="3"><label for="star3" title="text">★</label>
            <input type="radio" id="star4" name="rating" value="4"><label for="star4" title="text">★</label>
            <input type="radio" id="star5" name="rating" value="5"><label for="star5" title="text">★</label>
        </div>
        <textarea id="text" name="text" col="50" row="4"></textarea>
    </div>
</div>

Interne Variabeln: B003_01 und B003_02

Fragebogen:
PHP

question('B003', '1, 2');

Textbaustein
HTML Code

<script type="text/javascript">
    document.getElementById("B003_01").value = document.querySelector('input[name = "rating"]:checked').value;
    document.getElementById("B003_02").value = document.getElementById("text").value;
</script>

Problem: Variabeln werden nicht tatsächlich abgelesen (egal ob HTML Code über oder unter dem Textbaustien plaziert ist). Das erstaunt mich an sich nicht weiter, da der Code ja nicht erst abgerufen wird, wenn der User gerne weiterfahren möchte.

Frage: Wie verknüpfe ich meine HTML Variabeln korrekt mit den intern Variabeln?

Zusätzliche Frage: Was ist der PHP Code um bei fehlen der Variabeln auf der Seite zu bleiben und eine Warnung zu geben? (wie es ja sonst auch passieren würde, wenn Fragen als verpflichtend eingestellt sind).

Ich danke im Vorraus für jegliche Hilfe!

Answer 1

Variabeln werden nicht tatsächlich abgelesen

Das hat zwei Gründe. Der eine Grund ist, dass Ihr JavaScript-Code nicht beim Abschicken ausgeführt wird, sondern nur einmalig beim Laden der Seite. Dies könnten Sie im Prinzip ändern, aber vermutlich ist ein anderes Vorgehen zielführender:

Nehmen Sie die internen Variable aus der Seite, entfernen sie den JavaScript-Code und verwenden Sie die IDs der internen Variablen direkt in Ihrem HTML-Code. Also statt

<input type="radio" id="star1" name="rating"

Würden Sie dann schreiben

<input type="radio" id="star1" name="B003_01"

Außerdem müssen Sie bitte auf der Seite noch folgenden PHP-Code einfügen:

prepare_input('B003_01');
prepare_input('B003_02');

Comments

Liebes Team,

Vielen Dank für die schnelle und illustrative Antwort!
Diesen Ansatz habe ich tatsächlich auch probiert, er funktioniert jedoch nicht ausreichend da es mehrere Radio Buttons innerhalb der gleichen Gruppe gibt was zu einer entsprechenden Fehlermeldung führt.
Ich habe mal aus Interesse den Code vorgeschlagenen JS code direkt in mein HTML integriert und mit einem eigenen Button ausgelöst, jedoch funktioniert auch das nicht da der Button scheinbar eine andere Funktion automatisch triggert und zur nächsten Seite springt.
Kann es sein, dass eine solche Einbindung einfach nicht möglich ist und ich entsprechend eine etwas weniger schöne aber funktionerende Alternative mit den existierenden Question-Types bauen sollte?

Beste Grüsse

---

Radio-Buttons setzt man eigentlich immer als Gruppe ein - der Browser schickt dann jeweils nur die Information vom ausgewählten Button. Welche Fehlermeldung bekommen Sie denn?

>  da der Button scheinbar eine andere Funktion automatisch triggert und zur nächsten Seite springt.

Ohne dass ich die Seite via Pretest-Link sehe, kann ich die Ursache dieses Verhalten nur raten...