javascript — публикация значения входных данных слайдера начальной загрузки с использованием переполнения стека
я добавить множественный загрузчик-слайдер в моем PHP страница как это:
HTML:
<input type="text" class="sliderMaster slider-horizontal" id="sl2" name="q2" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">
JS:
$(function(){
$('#sl2').slider({
formater: function(value) {
return 'Current value: '+value;
}
}).on('slideStop', function(ev){
$(this).val($(this).data('slider').getValue());
});
});
Мне нужно изменить значение, когда я сдвигаю рейнджер и публикую ввод данных value с PHP $_POST отправка формы. Но в действии input value не меняется, и я вижу по умолчанию value, как это исправить и опубликовать ввод данных значения ?!
ДЕМО: http://jsfiddle.net/Sambora/D7Ctg/148/
Решение
Если вы используете несколько ползунков, присвойте им имена, например name='q[]' для всех входных элементов слайдера
и получить доступ к этим входным данным в PHP POST, как $_POST['q[0]'], $_POST['q[1]'], …. как это
и ваш модифицированный код, как это
<form id="formSlider" type="POST" action="abc.php">
<input type="text" class="sliderMaster slider-horizontal sl2" name="q[]" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">
<br/>
<br/>
<input type="text" class="sliderMaster slider-horizontal sl2" name="q[]" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">
<br/>
<br/>
<input type="text" class="sliderMaster slider-horizontal sl2" name="q[]" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">
<br/>
<br/>
<input type="text" class="sliderMaster slider-horizontal sl2" name="q[]" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">
<br/>
<br/>
<input type='submit' value='Submit' />
</form>
и сценарий
$( "#formSlider" ).submit(function( event ) {
var post_data = $("#formSlider").serialize();
alert(post_data);
});
$(function () {
$('.sl2').slider({
formater: function (value) {
return 'Current value: ' + value;
}
}).on('slideStop', function (ev) {
$(this).val($(this).data('slider').getValue());
});
});
Замечания: добавлен обработчик отправки в скрипте, просто чтобы посмотреть результаты в окне предупреждения, вы можете удалить его.
Надеюсь, это работает для вас 🙂
Другие решения
Других решений пока нет …