"this field is required" error with raw html widget

[dklin...@gmail.com]

Hi,

I have a task in which the subject can increase or decrease the payoff of another subject. For this, I created a slider input that hides the knob until the slider is clicked (ht: modified from https://www.accountingexperiments.com/post/sliders/). 

The slider ranges from -2 to 2 in increments of 0.4.

In the code below, the html input "slider_one" is the slider seen be the subject, and the hidden input "check_slider_input" checks that the slider has been clicked.

The slider is giving dynamic feedback correctly on the current position of the slider. However, upon clicking the "Next" button to submit the form, I get the error "this field is required". I have not be able to figure why the values of the inputs "slider_one" and "check_slider_input" are not being recorded. 

Thank you for any help on this.

html code:

...

    <input type="hidden" name="check_slider_one" value="" id="id_check_slider_one"/>

    <input type="range" name="slider_one" value="None" style="width: 380px" min="-2" max="2" step="0.4" id="id_slider_one" class="form-control"/>

    <div class="ticks" style="width: 380px">

        <span class="tick">-2</span>

        <span class="tick"></span>

        <span class="tick"></span>

        <span class="tick"></span>

        <span class="tick"></span>

        <span class="tick">0</span>

        <span class="tick"></span>

        <span class="tick"></span>

        <span class="tick"></span>

        <span class="tick"></span>

        <span class="tick">2</span>

    </div>

    <div style="width: 380px">

        <p style="text-align: center; margin-bottom: 0px" id="feedback_one"></p>

        <p style="text-align: center" id="feedback_two"></p>

    </div>

    <p style="padding-bottom: 10px"></p>

    {{ formfield_errors 'slider_one' }}

    {{ formfield_errors 'check_slider_one' }}

...

{{ block scripts }}

    <script>

        $(document).ready(function () {

            $('input[name=slider_one]').on('input change', function () {

                $('input[name=slider_one]').addClass('myClass');

            });

            $('input[name=slider_one]').on('input', function () {

                $('#check_slider_one').val(1);

                var sliderval = document.getElementById("id_slider_one").value;

                var payval = Math.abs(sliderval)/2;

                if (sliderval > 0) {

                    document.getElementById("feedback_one").innerHTML = "Increase by: $"+$(this).val();

                    document.getElementById("feedback_two").innerHTML = `You pay: $`+payval;

                } else if (sliderval == 0) {

                    document.getElementById("feedback_one").innerHTML = "No change ($0)";

                    document.getElementById("feedback_two").innerHTML = `You pay: $`+payval;

                } else if (sliderval < 0) {

                    document.getElementById("feedback_one").innerHTML = "Decrease by: $"+Math.abs($(this).val());

                    document.getElementById("feedback_two").innerHTML = `You pay: $`+payval;

                }

            });

            $('.otree-btn-next').click(function () {

                $('#id_slider_one').val(document.getElementById("id_slider_one").value);

                $('#id_check_slider_one').val(document.getElementById("id_check_slider_one").value);

            });

        });

    </script>

{{ endblock }}

[Vera L. te Velde]

Hi, did you figure this out? I'm having the same issue.

Thanks!

[Max R. P. Grossmann]

Hi,

Have you considered using my slider?

https://max.pm/posts/otree_slider/

Best,

Max

On 14/09/2021 08:38, Vera L. te Velde wrote:
> Hi, did you figure this out? I'm having the same issue.
> Thanks!
>
> On Wednesday, May 12, 2021 at 5:34:14 AM UTC+10 dklin...@gmail.com wrote:
>
> Hi,
>

> I have a task in which the subject can increase or decrease the payoff of another subject. For this, I created a slider input that hides the knob until the slider is clicked (ht: modified from https://www.accountingexperiments.com/post/sliders/ <https://www.accountingexperiments.com/post/sliders/>). 

> --
> You received this message because you are subscribed to the Google Groups "oTree help & discussion" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to otree+un...@googlegroups.com <mailto:otree+un...@googlegroups.com>.
> To view this discussion on the web, visit https://groups.google.com/d/msgid/otree/45ba4703-562b-4e59-b009-cb0af1eecf1fn%40googlegroups.com <https://groups.google.com/d/msgid/otree/45ba4703-562b-4e59-b009-cb0af1eecf1fn%40googlegroups.com?utm_medium=email&utm_source=footer>.

[Vera L. te Velde]

Thanks! I will try that.

In case others find this: my problem was that I had an "id" for my slider instead of, or in addition to, a "name". Doh.

[Vic vP]

The post I made is a little old already. I have added a link to Max' slider at the top of the post.