Javascript/PHP Как сохранить значение слайдера после отправки формы?

Question

У меня есть форма со случайными фильтрами и слайдер, который регулирует ширину/высоту элементов. Как сохранить значение ползунка после отправки формы, чтобы, когда я вернусь к ползунку, я вижу значение, на которое я его оставил?

Моя попытка:

<input type="text" id="amount" name="slider_id" value="<?php if (isset($_POST['slider_id'])){ echo $_POST['slider_id']; }?>"> 
<div id="slider"></div> 

Javascript:

$(function() { 
     $("#slider").slider({ 
      value:$("input[name='slider_id']").val(), min: 80, max: 400, step: 10, 
      slide: function(event, ui) { 
      $("#amount").val(ui.value-70 + "%"); 
      $('.display').css('width', ui.value + 'px'); 
      } 
     }); 
     $("#amount").val( $("#slider").slider("value") + "%"); 
     }); 

Сейчас он покажет NaN после отправки формы. Вся помощь очень ценится!

Answer 1

Ваша проблема здесь: $("input[name='slider_id']").val() Отладить его, и вы обнаружите, что это какая-то форма «nn%», таким образом, строка. $.slider требует, чтобы value был числовым. Вам нужно разобрать его как-то:

value: parseInt($("input[name='slider_id']").val().replace('%', ''), 10) 

Answer 2

кажется мне, что проблема заключается в наборе значений PHP. Просто измените значение ввода перед вызовом ползунка.

$(function() { 
    var newVal = $('input').val().replace("%",""); 
    $('input').val(newVal); 
    $("#slider").slider({ 
     value: $("input[name='slider_id']").val(), 
     min: 80, 
     max: 400, 
     step: 10, 
     slide: function (event, ui) { 
      $("#amount").val(ui.value - 70 + "%"); 
      $('.display').css('width', ui.value + 'px'); 
     } 
    }); 
    $("#amount").val($("#slider").slider("value") + "%");  
}); 

http://jsfiddle.net/joeSaad/hZCDZ/#base