JQuery UI несколько ползунков и их значения во время проверки формы

Question

Я настраиваю 5 слайдеров с помощью jQuery UI в такой форме:

$(".slider").slider({
   step: 1,
   min:0,
   max:10,
   value: 5,
   start: // start logic,
   slide: function(event, ui) { //slide logic },
   stop: function(event, ui) { //stop logic }

});

Ползунки являются частью формы с другими полями, такими как имя, адрес электронной почты и т. Д. Когда форма отправляется, и я показываю форму с возможными ошибками, ползунки сбрасываются до 5 (значение по умолчанию). Возможно ли вместо сброса показывать значения, назначенные пользователем?

Answer 1

Вы можете настроить скрытые поля формы, которые содержат значения ползунков при их изменении.

Затем, когда ваша форма перезагрузится, установите ползунки на основе скрытых полей формы.

То, что я обычно делаю с ползунками, - это текстовое поле под ними, которое обновляется, когда пользователь устанавливает ползунок.С некоторыми последовательными соглашениями об именах это довольно легко сделать.

Вот простой пример:

<script type="text/javascript">
$(document).ready(function() {
    $(".slider1").slider({
        step: 1,
        min: 0,
        max: 10,
        value: 5,
        slide: function(event, ui) {
            //get the id of this slider
            var id = $(this).attr("id");

            //select the input box that has the same id as the slider within it and set it's value to the current slider value. 
            $("input[id*=" + id + "]").val(ui.value);
        }
    });
});

Вот часть HTML:

<div class="slider1">       
</div>
<input type="text" id="slider1-txt" />

Если вы не хотите, чтобы поля вводаВы можете просто заменить их скрытыми полями.