javascript — публикация значения входных данных слайдера начальной загрузки с использованием переполнения стека

Question

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/

1

bootstrap-slider javascript jquery php twitter-bootstrap

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Если вы используете несколько ползунков, присвойте им имена, например 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());
});
});

Замечания: добавлен обработчик отправки в скрипте, просто чтобы посмотреть результаты в окне предупреждения, вы можете удалить его.

Надеюсь, это работает для вас 🙂

1