Slider Position via Formulareingabe ändern

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Slider Position via Formulareingabe ändern

    Hi Folks,

    ich würde gerne die Position eines Sliders ändern, wenn innerhalb eines Formulars bestimmte Radio-Buttons angeklickt werden.
    HTML-Code:

    Quellcode

    1. <input id="a" type="range" min="1" max="3" value="2" step="1"/>
    2. <input value="OK" type="button" id="okbutton" onClick="formslider()">


    JS-Code:

    Quellcode

    1. function formslider(){
    2. var a = document.getElementById('a').value;
    3. var closing = document.getElementById('formular').style.display = "none";
    5. if (q11.checked & q22.checked){
    6. closing;
    7. a = 1;
    8. $('#a').slider.("refresh"); //<-- das funktioniert leider nicht
    9. alert(a);
    10. }
    11. }
    Alles anzeigen


    Der Wert wird an den slider übergeben, das sehe ich durch den alert-Befehl. Allerdings wird die Position des sliders nicht angepasst.

    HILFE!

    Gruß,
    Maule

  • Moin!

    Zuerst mal ein paar Fragen:

    1. Hast du jQuery eingebunden? Für die Verwendung der Zeile 8 in deinem JS brauhst du jQuery.
    2. die Punktanotation in der gleichen Zeile macht keinen Sinn. Willst du die Refresh-Methode aufrufen oder eine andere Methode, der du "refresh" als Parameter übergibst?
    3. Was soll die Zeile 6 bringen? "closing;" tut meines Erachtens nach nichts anderes, als "true" oder "false" ... ja, auszuführen? Da fehlt wohl die Anweisung.
    4. Im Post sprichst du von mehreren Radio Buttons, hast aber einen input type="range". Warum dies?

    Viele Grüße
    Bodo06

  • Hi Bodi06,
    erstmal danke für deine Antwort! Nun zu den Fragen:

    1. Hast du jQuery eingebunden? Für die Verwendung der Zeile 8 in deinem JS brauhst du jQuery.
    Die Bibliotheken sind eingebunden.

    Quellcode

    1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    2. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
    3. <script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>



    2. die Punktanotation in der gleichen Zeile macht keinen Sinn. Willst du die Refresh-Methode aufrufen oder eine andere Methode, der du "refresh" als Parameter übergibst?
    In dieser Zeile wollte ich eben den Schieberegler automatisch verstellen, heißt, sobald ich auf "ok" im Formular drücke, soll der Schiebergler auf position 1 (in diesem Fall) gesetzt werden. Den Wert übergebe ich einfach der Variable a, das funktionert auch, allerdings wird eben der Schieberegler nicht verschoben. Die Codezeile habe ich in den weiten des www gefunden. Leider funktioniert sie nicht...


    3. Was soll die Zeile 6 bringen? "closing;" tut meines Erachtens nach
    nichts anderes, als "true" oder "false" ... ja, auszuführen? Da fehlt
    wohl die Anweisung.
    Das Formular welches die Radio Buttons enthält, wird durch "closing;" quasi geschlossen, sodass man sie slider und den Rest der Seite wieder sieht. Diese Anweisung brauche ich, sollte aber für mein Problem keine Rolle spielen... sollte...


    4. Im Post sprichst du von mehreren Radio Buttons, hast aber einen input type="range". Warum dies?
    Der input type="range" ist der Schieberegler der sich verstellen soll. Also je nach dem wie der User die Fragen beantwortet, soll die Reglerstellung automatisch angepasst werden. Das Formular mit den Radio-Buttons sieht so aus:

    Quellcode

    1. <div id="question1">
    2. <label>
    3. Können Sie eine Gitarre ohne Stimmgerät stimmen?
    4. </label>
    5. <div>
    6. <input id="q11" type="radio" name="q1" value="q1ja" checked>
    7. Ja
    8. </div>
    9. <div>
    10. <input id="q12" type="radio" name="q1" value="q1nein">
    11. Nein
    12. </div>
    13. <div>
    14. <input id="q13" type="radio" name="q1" value="q1vielleicht">
    15. Ich bin mir nicht ganz sicher
    16. </div>
    17. </div>
    18. ...
    Alles anzeigen


    Ich hoffe mir kann noch geholfen werden und ich konnte mein problem einigermaßen plausible schildern.

    Gruß,
    Maule

  • Zum besseren Verstänis

    jsfiddle.net/NVQY2/

    der untenstehende slider soll seine Position je nach formularangaben verändern.
    in diesem Beispiel:
    wenn bei der ersten frage der erste radio button und bei der zweiten frage der zweite radio button gewählt wird, soll beim klick auf "ok" der regler auf position 1 gestellt werden.

    Gruß,
    Marcel