javascript - 使用 PHP 发布 bootstrap-slider 输入数据值

Question

我在我的 PHP 页面中添加多个 bootstrap-slider，如下所示:

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());
  });
});

当我滑动 Ranger 并使用 PHP $_POST 发布数据输入 value 时，我需要更改值 $_POST 表单提交。但实际上输入值没有改变，我看到默认值。如何解决这个问题并发布数据输入值？!

演示:http://jsfiddle.net/Sambora/D7Ctg/148/

Answer 1

如果您使用多个 slider ，则为所有输入 slider 元素提供输入名称，例如 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());
    });
});

注意:在脚本中添加提交处理程序只是为了在警报框中查看结果，您可以将其删除。

希望它对你有用:)