0

I have a web page with some input sliders just like this one: http://jqueryui.com/demos/slider/#steps.

What I need, is to force the user to move the slider before he presses the submit button.

So I'm thinking in put the default color of the handle red, and if he presses submit when it's red, an alert window appears warning that he needs to click or move the handle. Of course, when he do that the color will change and he'll able to continue.

What I've so far is:

<html>
    <head>
        <meta charset="utf-8">
        <link type="text/css" href="jQuery/css/start/jquery-ui-1.8.21.custom.css" rel="stylesheet" />   
        <script type="text/javascript" src="jQuery/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="jQuery/js/jquery-ui-1.8.21.custom.min.js"></script>
            <style>
                #demo-frame > div.demo { padding: 10px !important; };
            </style>
        <script>
            $(document).ready(function() {
                $(".slider").slider({
                    step: 0.01,
                    min: 0,
                    max: 1,
                    value: 0.5,
                    slide: function(event, ui) {
                        $("input[name=" + $(this).attr("id") + "_question]").val(ui.value); 
                        }
                });
            });

        </script>

        <form action="next.php" method="POST">
                <input type="hidden" value=0.5 name="first_question"/>
            <div class="demo">
                <p>
                    <label>question 1:</label>
                </p>
                <div class="slider" id="first"></div>   
                <br />
                <br />
                <input type="hidden" value=0.5 name="second_question"/>
                <p>
                    <label>question 2:</label>
                </p>
                <div class="slider" id="second"></div>
            </div><!-- End demo -->
                <br />
                <input type="submit" value="submit" id="bt"/>
        </form>
    </body>
</html>

Is this too much complicated to implement? Any help is welcome.

1 Answers1

1

This can definitely be done. I would recommend storing whether a slider has been interacted with in a HTML data attribute. You can set this in the slide event you already have. Then when the form is submitted you can ensure that the data attribute was set for all sliders.

I put together an example that does some basic visual stuff to show this to the user - http://jsfiddle.net/s6XTu/2/.

TJ VanToll
  • 12,584
  • 4
  • 43
  • 45