Weiter-Button soll erst erscheinen, wenn Schieberegler betätigt wurde.

Question

Ich verwende auf einer Seite einen Schiebregler und möchte, dass der "Weiter"-Button erst erscheint, wenn die Personen auf dem Regler ihre Antwort gegeben haben.

Folgenden Code verwende ich mit Buttons und hier funktioniert das wunderbar:

    <script type="text/javascript">
<!--
document.addEventListener("DOMContentLoaded", function() {
  var optionA = document.getElementById("PG01_01a");
  var optionB = document.getElementById("PG01_02a");
  var optionC = document.getElementById("PG01_03a");
  var optionD = document.getElementById("PG01_04a");
  var optionE = document.getElementById("PG01_05a");
  var optionF = document.getElementById("PG01_06a");
  var optionG = document.getElementById("PG01_R1a");
  
  
  

  // HTML-ID des "Weiter"-Buttons
  //var weiterButton = document.getElementById("weiter-button");

  // Button zu Beginn verstecken
  SoSciTools.submitButtonsHide();
  
   function toggleButton() {
    // Prüfen, ob alle Checkboxen oder Radiobuttons angeklickt wurden (checked)
    if (optionA.checked || optionB.checked || optionC.checked || optionD.checked || optionE.checked || optionF.checked || optionG.checked) {
      // Wenn alle ausgewählt sind, zeige den "Weiter"-Button an
      SoSciTools.submitButtonsDisplay();  // SoSciTools Funktion, um den Button anzuzeigen
    } else {
      // Wenn nicht alle ausgewählt sind, verstecke den "Weiter"-Button
      SoSciTools.submitButtonsHide();
    }
  }

  // Die Funktion soll jedes Mal ausgeführt werden, wenn eine der Optionen angeklickt wird
  optionA.addEventListener("click", toggleButton);
    optionB.addEventListener("click", toggleButton);
      optionC.addEventListener("click", toggleButton);
        optionD.addEventListener("click", toggleButton);
          optionE.addEventListener("click", toggleButton);
            optionF.addEventListener("click", toggleButton);
              optionG.addEventListener("click", toggleButton);
              

  

  // Und jetzt gleich ausführen, um den Button zu Beginn korrekt zu verstecken
  toggleButton();
});
// -->
</script>

Kann man das für einen Schieberegler anpassen?

Vielen Dank für die Hilfe!

Answer 1

Der Code ist ein wenig aufwändiger als notwendig, scheint aber okay zu sein.

Einfacher wäre...

document.addEventListener("DOMContentLoaded", function() {

  function toggle() {
     if (s2.PG01.value > -9) {
      SoSciTools.submitButtonsDisplay();  // SoSciTools Funktion, um den Button anzuzeigen
    } else {
      SoSciTools.submitButtonsHide();
    }
  }

  s2.PG01.addEventListener("click", toggle);
  toggle();
}

Hintergrund: SoSci Survey stattet die meisten Fragetypen mit einer JavaScript-Anbindung aus, welche das Handling einfacher macht.

Beim -9 und "click" (versus "change") bin ich nicht ganz sicher, aber das lässt sich einfach mit einem console.log(s2.PG01.value) herausfinden.

Dieser Code sollte so auch für Schieberegler funktionieren.